Neither relative nor aliased imports working

Help
1

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:

/project-root
  /src
    /app
      /dashboard
        page.tsx
    /components
      Chart.tsx
  next.config.mjs
  package.json

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

2

Hi, @zeantsoi-gmailcom!

Welcome to the Vercel Community :smiley:

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.

4

Hi, @zeantsoi-gmailcom!

This guide might be helpful. :smile:

5

Thank you, @pawlean! 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:

/project-root
  /src
    /app
      /dashboard
        page.tsx
    /components
      Chart.tsx

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

import 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.

2 Likes
6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.