[bug]: Module not found: Error: Can't resolve '@/components/ui .......

[Quietscher]

Describe the bug

When using create react app and compiling / starting the react-scripts start command, you get
Module not found: Error: Can't resolve '@/components/ui .......
Also found here:
#1101 (comment)

Affected component/components

all

How to reproduce

create a react app by create react app (i added typescript)
add shadcn
create a component
run start script

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

(MacOS)(Chromium browser) Create React App

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[Quietscher]

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./*"], }, "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src", "components" ] }
this is the tsconfig.
everything is left at its original place

[sakshamvedi]

Hi you can resolve it just by replacing your path is here ---> "@/": ["./"], , replace with this "@/": ["./src/"], in your tsconfig.ts file

[Quietscher]

But the components folder is not inside of the src folder

[Quietscher]

And I already tried setting a definite path in the config to the folder. It did not work on reactscripts start.

[sakshamvedi]

um when you install can you write the step how you install the component

[Quietscher]

Just with the normal component install. It installs it directly to components/ui at root

[Benjiixd]

hello, very interesting that this happend to Quitscher two hours ago, since this same issue arrived for me out of nowhere 2 hours ago aswell, and im trying to fix it.

[Benjiixd]

hello i fixed it by deleting a tsconfig file but that also isn't optimal

[Quietscher]

npx shadcn-ui@latest add --all

[sakshamvedi]

and you are updated config file or not ..?

[Quietscher]

Ofcourse but it is still correct

[ShubhamPatilSp]

You can import like this ==> import Image from "next/image";
see this image

My image folder is not in my src folder; instead, it's located in the public folder, import Image from "next/image";

[Quietscher]

noo... please read beforehand.
The imports are all correct!
But when i start via reactscripts start it says the error.

[ShubhamPatilSp]

You can Please Share a screenshot

[Quietscher]

not working

working

[ShubhamPatilSp]

and your file structure screenshot

[ShubhamPatilSp]

try this ==> @/app/components/ui/button

[Quietscher]

i am sorry. but as i said the imports are correct.

[Quietscher]

it is just a runtime error when doing "start": "react-scripts start",

[ShubhamPatilSp]

Oh, brother, you don't understand my point. You're right, his [program] cannot give you a red line, but your error is here.not giving the correct file path. Just try this ==> @/app/components/ui/button

[Quietscher]

why should this work....... please...

[Quietscher]

it is not inside of /app/

[Quietscher]

[ShubhamPatilSp]

so push them in app this is not good way, like this

[Quietscher]

It does not matter (at least it should not) what the file structure is, when my imports are correct.

As I stated earlier, it seems to be a problem with react-scripts!

This topic needs some experts in that direction.

[SureshPradhana]

I encountered similar issue.
I set up a React project with TypeScript using create-react-app and integrated Tailwind CSS. Initially, I set up paths in tsconfig.json as follows:

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

and defined aliases in component.json like this:

"aliases": {
"components": "@/components", 
"utils": "@/library/utils" 
}

this placed shadcn components at the root level , don't know what causing issue but I encountered a module error.


To resolve this, I modified tsconfig.json:

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

and adjusted component.json:

"aliases": { 
"component": "src/components", 
"utils": "src/library/utils" }

this placed shadcn components inside src directory. Although '@' alias import doesn't work in this case, I can only be able to import using relative paths, like import Button from './components/ui/button',
with @ alias import The TypeScript language server functions correctly, but upon compilation, it throws a module error.

[SureshPradhana]

I followed this manual (https://ui.shadcn.com/docs/installation/vite) and it's working fine. However, it's not working with a project bootstrapped with create-react-app, but it's working fine with Vite installation.

[Quietscher]

Thats the point. I just want the create-react-app. No Vite or Next.js.

[alfinauzikri]

I had the same problem, and I spent the whole night messing around with it.

I finally found the solution.

Reference : https://stackoverflow.com/questions/50679031/why-are-these-tsconfig-paths-not-working

Just add one line of code in tsconfig.app.json as follows:

"extends": "./tsconfig.json",

So the whole code looks like this:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

Hope this helps those of you who have the same problem.

[igloo1505]

so push them in app this is not good way, like this

While I appreciate your enthusiasm, your replies are so wrong it makes my head hurt.

[SureshPradhana]

I had the same problem, and I spent the whole night messing around with it.

I finally found the solution.

Reference : https://stackoverflow.com/questions/50679031/why-are-these-tsconfig-paths-not-working

Just add one line of code in tsconfig.app.json as follows:

"extends": "./tsconfig.json",

This seems like a project bootstrapped with Vite, not Create React App.

[SureshPradhana]

Shadcn-ui uses import aliases, which create-react-app doesn't support yet. Here is the related issue: facebook/create-react-app#12047.

[alfinauzikri]

That's right, my project bootstrapped with Vite. @SureshPradhana

Shadcn-ui uses import aliases, which create-react-app doesn't support yet. Here is the related issue: facebook/create-react-app#12047.

It's unfortunate that create-react-app has problems handling aliases.

I tried it earlier and ended up the same as @Quietscher

I saw that someone can make shadcn/ui work well with create-react-app and he has also provided a starter template: https://github.com/ahmad1702/shadcn-ui-cra

[vasvalstan]

@alfinauzikri I've created the project and followed the exact instructions as per : https://ui.shadcn.com/docs/installation/vite. Sorry if I'm repeating in this case something that other's experienced, but in the shadcn installation docs, the resolve alias is set to ./src and the installation of shadcn goes in the root project, not in the src/folder .

Same thing with the tsconfig : "baseUrl": ".",
"paths": {
"@/": [
"./src/"
]
} . I tried modifying paths to match the root folder, but still didn't manage to find a solution :(

[alfinauzikri]

@alfinauzikri I've created the project and followed the exact instructions as per : https://ui.shadcn.com/docs/installation/vite. Sorry if I'm repeating in this case something that other's experienced, but in the shadcn installation docs, the resolve alias is set to ./src and the installation of shadcn goes in the root project, not in the src/folder . Same thing with the tsconfig : "baseUrl": ".", "paths": { "@/": [ "./src/" ] } . I tried modifying paths to match the root folder, but still didn't manage to find a solution :(

Set the aliases in components.json as follows:

{
 "$schema": "https://ui.shadcn.com/schema.json",
 "style": "default",
 "rsc": false,
 "tsx": true,
 "tailwind": {
   "config": "tailwind.config.js",
   "css": "src/styles/global.css",
   "baseColor": "slate",
   "cssVariables": true,
   "prefix": ""
 },
 "aliases": {
   "components": "@/components",
   "utils": "@/lib/utils"
 }
}

Delete the @ folder and then run npx shadcn-ui@latest init again. Make sure the tsconfig.json file is set up properly.

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

[vasvalstan]

I have the exact setup you've recommended :( I deleted the @ folder, thinking that if I do shadcn init again after deleting it, will put the @ folder inside src, instead of root.

[SureshPradhana]

@alfinauzikri the template repo doesn't work solely with Create React App; it uses CRACO. Personally, I don't like using it because it isn't good for updates with Create React App. However, we can use it as a workaround

[alfinauzikri]

@alfinauzikri the template repo doesn't work solely with Create React App; it uses CRACO. Personally, I don't like using it because it isn't good for updates with Create React App. However, we can use it as a workaround

That's right, he has modified it.

[alfinauzikri]

I have the exact setup you've recommended :( I deleted the @ folder, thinking that if I do shadcn init again after deleting it, will put the @ folder inside src, instead of root.

Can you show me all the screenshots of these files?

• vite.config.ts
• tsconfig.json
• tsconfig.app.json
• components.json

[vasvalstan]

vite.config.ts :

ts.config.json :

This is being split in 2 files from what I see by default, I did not do anything, and here is the tsconfig.app.json file :

I've put the same config in tsconfig.node.json file :

components.json:

[alfinauzikri]

Okay, thank you @vasvalstan for providing all the screenshots and I have seen them, change it to something like this.

Simply set the paths or aliases in this file.

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Then extends in tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

Restore the content of the tsconfig.node.json file to the original. For the vite.config.ts and components.json file, there is no problem.

Delete the @ folder and then run npx shadcn-ui@latest init again.

[vasvalstan]

Thank you @alfinauzikri, saved me hours. Now it all makes sense putting the compiler options in the tsconfig file and extend it in the .app. Thank you again, hope it helps others as well.

[alfinauzikri]

Thank you @alfinauzikri, saved me hours. Now it all makes sense putting the compiler options in the tsconfig file and extend it in the .app. Thank you again, hope it helps others as well.

You're welcome. Glad to hear that the problem has been resolved.. :)

[AMISH-KHAN]

Okay, thank you @vasvalstan for providing all the screenshots and I have seen them, change it to something like this.

Simply set the paths or aliases in this file.

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Then extends in tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

Restore the content of the tsconfig.node.json file to the original. For the vite.config.ts and components.json file, there is no problem.

Delete the @ folder and then run npx shadcn-ui@latest init again.

Thanks @alfinauzikri it actually worked!!!

[NatanCieplinski]

npx shadcn-ui@latest init

This worked for me too, thanks

[MohammadShabazuddin]

Thanks @alfinauzikri My issue is resolved.

[FrancoVacirca]

@alfinauzikri I've created the project and followed the exact instructions as per : https://ui.shadcn.com/docs/installation/vite. Sorry if I'm repeating in this case something that other's experienced, but in the shadcn installation docs, the resolve alias is set to ./src and the installation of shadcn goes in the root project, not in the src/folder . Same thing with the tsconfig : "baseUrl": ".", "paths": { "@/": [ "./src/" ] } . I tried modifying paths to match the root folder, but still didn't manage to find a solution :(

Set the aliases in components.json as follows:

{
 "$schema": "https://ui.shadcn.com/schema.json",
 "style": "default",
 "rsc": false,
 "tsx": true,
 "tailwind": {
   "config": "tailwind.config.js",
   "css": "src/styles/global.css",
   "baseColor": "slate",
   "cssVariables": true,
   "prefix": ""
 },
 "aliases": {
   "components": "@/components",
   "utils": "@/lib/utils"
 }
}

Delete the @ folder and then run npx shadcn-ui@latest init again. Make sure the tsconfig.json file is set up properly.

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

this solved it for me at least using vite, just changing the path in components and reinstalling

[spamdwich]

is it fixed for create-react-app yet?

[ManishKapoor5]

Hi
If you are using 'use client' at top in any file then remove it

[okaynils]

I've been using create-react-app and ran into the same issue.

create-react-app doesn't allow path aliases to be overwritten to "@" out of the box.

I've fixed the "Module not found"-Error by adding craco to my project. Craco allows you to override the CRA configurations.

Here's how:

1. Add craco to your project:
   run npm install @craco/craco

2. Create a craco.config.js-File in the root of your project and add the following to it:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
};

If you're using React TypeScript, make sure the '@'-alias is also present in your tsconfig.json:

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

Note: Inside tsconfig.json, the paths need to be specified with /* to explicitly add all subelements.

3. And at last you of course need to make sure that you run your project with craco by replacing the react-script calls with craco in your package.json such as:

"scripts": {
   "start": "npm run craco start"
   "build": "npm run craco build"   
   "test": "npm run craco test"
   "eject": "npm run craco eject"
}

[ShutSasha]

I've been using create-react-app and ran into the same issue.

create-react-app doesn't allow path aliases to be overwritten to "@" out of the box.

I've fixed the "Module not found"-Error by adding craco to my project. Craco allows you to override the CRA configurations.

Here's how:

1. Add craco to your project:
   run npm install @craco/craco
2. Create a craco.config.js-File in the root of your project and add the following to it:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
};

If you're using React TypeScript, make sure the '@'-alias is also present in your tsconfig.json:

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

Note: Inside tsconfig.json, the paths need to be specified with /* to explicitly add all subelements.

3. And at last you of course need to make sure that you run your project with craco by replacing the react-script calls with craco in your package.json such as:

"scripts": {
   "start": "npm run craco start"
   "build": "npm run craco build"   
   "test": "npm run craco test"
   "eject": "npm run craco eject"
}

It has helped me