Open Quietscher opened 3 months ago
{ "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
Hi you can resolve it just by replacing your path is here ---> "@/": ["./"], , replace with this "@/": ["./src/"], in your tsconfig.ts file
But the components folder is not inside of the src folder
And I already tried setting a definite path in the config to the folder. It did not work on reactscripts start.
um when you install can you write the step how you install the component
Just with the normal component install. It installs it directly to components/ui at root
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.
hello i fixed it by deleting a tsconfig file but that also isn't optimal
npx shadcn-ui@latest add --all
and you are updated config file or not ..?
Ofcourse but it is still correct
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";
noo... please read beforehand. The imports are all correct! But when i start via reactscripts start it says the error.
You can Please Share a screenshot
not working
working
and your file structure screenshot
try this ==> @/app/components/ui/button
i am sorry. but as i said the imports are correct.
it is just a runtime error when doing "start": "react-scripts start",
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
why should this work....... please...
it is not inside of /app/
so push them in app this is not good way, like this
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.
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.
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.
Thats the point. I just want the create-react-app. No Vite or Next.js.
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.
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.
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.
Shadcn-ui uses import aliases, which create-react-app doesn't support yet. Here is the related issue: https://github.com/facebook/create-react-app/issues/12047.
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
@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 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/*"
]
}
// ...
}
}
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.
@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 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.
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 :
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:
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.
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.
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.. :)
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!!!
npx shadcn-ui@latest init
This worked for me too, thanks
Thanks @alfinauzikri My issue is resolved.
@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
is it fixed for create-react-app yet?
Hi If you are using 'use client' at top in any file then remove it
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
Before submitting