Neither relative nor aliased imports working

I've been developing a NextJS app locally without issue but have hit issues when deploying to Vercel. Specifically, in the Vercel build, I'm hitting this error:

./src/app/dashboard/page.tsx Module not found: Can't resolve '../../components/Chart'

The relative path is valid and has no issue routing in development. I had previously been using the @ alias, again without issue locally, but decided to use a relative import to see if it'd resolve – clearly it has not.

FWIW, this is my directory structure:

1/project-root2  /src3    /app4      /dashboard5        page.tsx6    /components7      Chart.tsx8  next.config.mjs9  package.json

Anyone else run into similar issues with imports working locally, but breaking on Vercel?

Vercel Alum

Hi, !

Welcome to the Vercel Community 😃

I'll share this internally and ask for some pointers, but it would also be helpful if you could create a minimal reproducible example for us to dig deeper.

Vercel Alum

Hi, !

This guide might be helpful. 😄

https://vercel.com/guides/how-do-i-resolve-a-module-not-found-error

Accepted answer

Thank you, ! This bit resolved my issue:

make sure git config core.ignorecase false is set in your environment.

To be clear, the issue appears to be that Vercel's filesystem is case-sensitive, but the files I checked into version control were not. Here is my file structure:

1/project-root2  /src3    /app4      /dashboard5        page.tsx6    /components7      Chart.tsx

In dashboard/page.tsx, the following import was working locally, but not on Vercel:

1import Chart from '@/components/Chart';

By setting my git config per the instructions above, then deleting and readding the Chart.tsx file (and committing the change at each step), I was able to resolve the issue on Vercel.

This topic is closed. It no longer accepts new replies.