[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.