shadcn-ui
Fresh install results in two tailwind.config files and error on start
Hi there,
I've just done a new fresh install of shadcn-ui, following the getting started page.
The installation process resulted in two tailwind.config files, one .js and the other .ts not sure if this is correct.
When I run pnpm run dev I get the following error
> [email protected] dev /Users/FRANCESCO.ZUPPICHINI/Documents/dbi_alphaai_knowledge_bot/app
> next dev
▲ Next.js 13.5.6
- Local: http://localhost:3000
✓ Ready in 2.3s
⨯ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./app/globals.css
RangeError: Maximum call stack size exceeded
at Function.keys (<anonymous>)
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./app/globals.css
./app/globals.css
⨯ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./app/globals.css
RangeError: Maximum call stack size exceeded
at Function.keys (<anonymous>)
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./app/globals.css
./app/globals.css
⚠ Fast Refresh had to perform a full reload due to a runtime error.
✓ Compiled /favicon.ico/route in 52ms (318 modules)
Thanks a lot ❤️
Chers,
Fra
Seems like you probably used the default in the option. Try with tailwind.config.ts here itself.
- Where is your tailwind.config.js located? › tailwind.config.js
+ Where is your tailwind.config.js located? › tailwind.config.ts
I'm also facing the same issue, tried changing the tailwind.config.js to tailwind.config.js but still same issue.
Anyone got the solution for this?
Error I'm getting:
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[7].oneOf[13].use[1]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[7].oneOf[13].use[2]!./src/styles/globals.css
TypeError: Cannot read properties of undefined (reading 'config')
I think the issue is probably due to pnpm, when I used yarn to create the next app and configure shadcn, it works fine.
I'm also facing the same issue, tried changing the
tailwind.config.jstotailwind.config.jsbut still same issue. Anyone got the solution for this?Error I'm getting:
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[7].oneOf[13].use[1]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[7].oneOf[13].use[2]!./src/styles/globals.css TypeError: Cannot read properties of undefined (reading 'config')
When I try to create a Next app router project using pnpm, it throws related errors.
You can try the pnpm update command to update the relevant package versions to the highest version within a specified range, which solved the issue for me.
Related reference issue: create-next-app with pnpm is broken #57184.
Seems like you probably used the default in the option. Try with tailwind.config.ts here itself.
- Where is your tailwind.config.js located? › tailwind.config.js + Where is your tailwind.config.js located? › tailwind.config.ts
Hi, so in the root folder
@FrancescoSaverioZuppichini did you figure this out?
No, I still have them both. I installed tailwindcss and then manually force update some dependencies and that solved the issue but I still have two tailwind config files 😄
When I try to create a Next app router project using pnpm, it throws related errors.
You can try the
pnpm updatecommand to update the relevant package versions to the highest version within a specified range, which solved the issue for me.Related reference issue: create-next-app with pnpm is broken #57184.
yes, it did the trick (I manually update the packages)
I noticed if you specify ✔ Where is your tailwind.config.js located? … tailwind.config.ts actually type out with the .ts it will result in only 1 config file as expected ... maybe when a user chooses Typescript in the first step of CLI we change the default tailwind config to .ts?
Added a PR that I think will clear this up in the future, sorry in advance if its a duplicate @shadcn
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.