Alias Imports Suddenly Caused Module Not Found Errors in NextJS

Question

I am building a NextJS app and all of a sudden all my import aliases stopped working

This is my jsconfig.json

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./*"]
      }
    }
  }

I have an initial import like this in my layout.jsx file:

import {RootLayout} from '@/components/RootLayout';

And that stopped working completely.

I had to go through my project and use absolute paths so I turned that into:

import {RootLayout} from '/src/components/RootLayout';

And everything is loading but does anyone have any ideas what happened? I can't get my alias to work now.

Im using Linux, Visual Studio Code, Nginx, on a DO Droplet.

I tried to use @/components/RootLayout but received a Module not found - my aliases broke and they had been working for days before?

Answer 1

I had a similar issue. It started after I created a page file called page.tsx instead of page.jsx.

Apparently adding a TypeScript file in the app directory causes a tsconfig.json file to be generated in the root directory of the project which seemingly overrode the jsconfig.json file. The tsconfig.json file did not have the "paths" object with the alias.

Deleting the tsconfig.json file fixed the issue.