'@' import not working

[gabriansa]

Summary

I get the following error of module not found in my page.jsx: Module not found: Can't resolve '@/components/ui/button'.

I am importing with import { Button } from "@/components/ui/button"; Standard shadcn/ui button.

My jsconfig.json is as follows:

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

So it should allow for @ type imports. I can't figure out why I keep getting this error. I tried to create a new project from scratch and still encounter it.

Additional information

No response

Example

No response

[mandorakannu]

You have to pass a baseUrl too.

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

[gabriansa]

I tried that but I still encounter the same issue. Actually, I noticed that when I run something like npx shadcn@latest add button then it creates a new folder @/components/ui where it places the component. However it should use the src.

[AmaraFray]

Summary

I get the following error of module not found in my page.jsx: Module not found: Can't resolve '@/components/ui/button'.

I am importing with import { Button } from "@/components/ui/button"; Standard shadcn/ui button.

My jsconfig.json is as follows:

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

So it should allow for @ type imports. I can't figure out why I keep getting this error. I tried to create a new project from scratch and still encounter it.

Additional information

No response

Example

No response

any solution? when i replace the "@" imports with direct imports like "../" it works. any way to resolve it, our tsconfig is the same

[pinpos375]

I encountered the same error. When I tried to install a package from shadcn, it placed it in the root instead of the src directory. Have tried tweaking the jsconfig.json file in all the ways I could think of but it's not working: {
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/styles/": ["styles/"],
"@/components/": ["components/"],
"@/providers/": ["providers/"]
}
}
}, Anybody got a solution?

[shreeram312]

@gabriansa @AmaraFray @mandorakannu @pinpos375 @toolmantim Did you find out the solution,I am also facing the same problem

[TirthRadadiya]

It will depend on what you are using. I am using typescript but I have added extension .jsx or .js file. I renamed extension to .tsx nd .ts. Worked like charm.

[Mil00Z]

I have the same issue since yesterday on deploiement flow , and it's happen on some import, not for the all imports elements on project.

I don't understand why and what the hell :/

1. NextJs 15.1.7,
2. React 19

• Typescript

• my tsconfig.json is like (the part for Url Path config) :

"baseUrl": "./",
    "paths": {
      "@/components/*": ["src/components/*"],
      "@/ui/*": ["src/components/ui/*"],
      "@/layout/*": ["src/components/layout/*"],
      "@/styles/*": ["src/styles/*"]

Errors are like :
Module not found: Can't resolve '@/components/ui/Counter/CounterElement''

[mandorakannu]

Add:
"@/*": ["src/*"],
hope this help.

[Mil00Z]

THX
I have already this path in my config,(i have shared here a little part of the config).

Yesterday, I found my issue and it's "weird" :

• changing case of files or folder in project (Navigation.jsx to navigation.jsx) doesn't trigger versionning alert or diff between files / folder name.

• So i have diffente name of file between local and repo, and so imports are not correct finaly on the repo.

• When i'm going to trigger the deploiement in Vercel, a lot of error in cascade (not all but one by one) came because the diff betweens imports and file names.

=> I don't understand why this issue with Git / Github and i don't understand why the Log Error in Vercel are not more detailed ^^

[mandorakannu]

Reinstall Git and don't change settings

[JuvitaSaini09]

In your Next App, If you see two files "tsconfig.json" and "jscofig.json" then in both of files check is this code present:

1. tscofig.json: "compilerOptions": {
   "baseUrl": ".",
   "paths": {
   "@/": ["./"]
   },...

2. jscofig.json:
   {
   "compilerOptions": {
   "baseUrl": ".",
   "paths": {
   "@/": ["./"]
   }} }