NextJS '@' Path Seems To Be Off?

Answered

West African Lion posted this in #help-forum

West African LionOP

2024-04-17T09:43:46.271Z

I'm getting the following error: Cannot find module '@/components/SettingsMenu/SettingsMenu' or its corresponding type declarations.

I tried going into the tsconfig.json to remap the path but it is still throwing a compilation error

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

The following does seem to work, but I don't know why the original didn't as this is something I've used in many other projects
import SettingsMenu from "../SettingsMenu/SettingsMenu";

Answered by joulev

You are declaring the absolute path import starting with @/app, so all your imports of this kind must start with @/app so @/components for example is invalid

View full answer

26 Replies

@West African Lion I'm getting the following error: `Cannot find module '@/components/SettingsMenu/SettingsMenu' or its corresponding type declarations.` I tried going into the `tsconfig.json` to remap the path but it is still throwing a compilation error json "compilerOptions": { "baseUrl": ".", "paths": { "@/app/*": ["app/*"] } }, The following does seem to work, but I don't know why the original didn't as this is something I've used in many other projects `import SettingsMenu from "../SettingsMenu/SettingsMenu";`

joulev

2024-04-17T09:57:05.571Z

Looks like it should be "src/app/*" instead of "app/*"

@joulev Looks like it should be "src/app/\*" instead of "app/*"

West African LionOP

2024-04-17T10:09:53.216Z

I tried the following, but no luck 😦

    "paths": {
      "@/src/app/*": ["app/*"]
    }
    
    "paths": {
      "@/src/app/*": ["src/app/*"]
    }

    "paths": {
      "@/app/*": ["src/app/*"]
    }

@West African Lion I tried the following, but no luck 😦 ts "paths": { "@/src/app/*": ["app/*"] } "paths": { "@/src/app/*": ["src/app/*"] } "paths": { "@/app/*": ["src/app/*"] }

joulev

2024-04-17T10:10:25.260Z

Can you send me the repo link?

@joulev Can you send me the repo link?

West African LionOP

2024-04-17T10:13:07.800Z

Sure, one sec! Let me commit this stuff rq. I'm not sure if this is related but I'm also having issues with @apply in the global.css

@joulev Can you send me the repo link?

West African LionOP

2024-04-17T10:13:40.642Z

https://github.com/EladKarni/acc-ipad-app

I didn't even start yet. Just create-next-app and removed some of the template code from page.tsx

@West African Lion https://github.com/EladKarni/acc-ipad-app

joulev

2024-04-17T10:23:04.076Z

You are declaring the absolute path import starting with @/app, so all your imports of this kind must start with @/app so @/components for example is invalid

Answer

joulev

2024-04-17T10:23:30.508Z

Change @/app/* to @/*

West African LionOP

2024-04-17T10:24:37.992Z

Yep, that was it! I'm an idiot sorry!

@West African Lion Sure, one sec! Let me commit this stuff rq. I'm not sure if this is related but I'm also having issues with @apply in the `global.css`

joulev

2024-04-17T10:25:07.549Z

This should be unrelated, please make a new post with a reproduction repo like the above

The repo link helped a lot in debugging