'ModuleNotFoundError on vercel when importing an image

It's working on local, but when I'm building on Vercel I get a Module not found error:

./pages/projects.js
12:34:04.505 | Module not found: Can't resolve '../public/images/projects/image.png' in '/vercel/path0/pages'
12:34:04.505

This is my project.js file:

import { Container, Heading, SimpleGrid} from '@chakra-ui/react'
import Section from '../components/section'
import { ProjectGridItem} from '../components/grid-items'
import image from '../public/images/projects/logo.png'


const Projects = () => {
    return(
        <Container>
            <Section>
            <Heading as="h1" mb={4} >
                Projects
            </Heading>
            </Section>
            <SimpleGrid columns={[1,1,2]} gap={6}>
                <Section>
                    <ProjectGridItem id="logo" title="Logo" thumbnail={image}>
                    </ProjectGridItem>
                </Section>
            </SimpleGrid>
        </Container>
    )
}

export default Projects

My project structure:

|-Nextjs-root
  |-components
    |-section.js
    |-grid-items.js
  |-pages
   |-index.js
   |-projects.js
  |-public
   |-images
    |-projects
     |-logo.png

Any workaround or fix on this?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'ModuleNotFoundError on vercel when importing an image

Sources

Related Questions