[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: https://github.com/shadcn-ui/ui/issues/1101#issuecomment-1998726992

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

• [X] I've made research efforts and searched the documentation
• [X] 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.