Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: global css breaks npm run #1498

Closed
violetbee opened this issue Jul 4, 2023 · 4 comments
Closed

bug: global css breaks npm run #1498

violetbee opened this issue Jul 4, 2023 · 4 comments

Comments

@violetbee
Copy link

violetbee commented Jul 4, 2023

Provide environment information

System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1
Memory: 77.98 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.16.1 - /usr/local/bin/node
npm: 9.7.2 - /usr/local/bin/npm

{
"name": "dokap-poll-app",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"postinstall": "prisma generate",
"lint": "next lint",
"start": "next start"
},
"dependencies": {
"@prisma/client": "^4.14.0",
"@t3-oss/env-nextjs": "^0.3.1",
"@tanstack/react-query": "^4.29.7",
"@trpc/client": "^10.26.0",
"@trpc/next": "^10.26.0",
"@trpc/react-query": "^10.26.0",
"@trpc/server": "^10.26.0",
"next": "^13.4.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"superjson": "1.12.2",
"zod": "^3.21.4"
},
"devDependencies": {
"@types/eslint": "^8.37.0",
"@types/node": "^18.16.0",
"@types/prettier": "^2.7.2",
"@types/react": "^18.2.6",
"@types/react-dom": "^18.2.4",
"@typescript-eslint/eslint-plugin": "^5.59.6",
"@typescript-eslint/parser": "^5.59.6",
"autoprefixer": "^10.4.14",
"eslint": "^8.40.0",
"eslint-config-next": "^13.4.2",
"postcss": "^8.4.21",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.2.8",
"prisma": "^4.14.0",
"tailwindcss": "^3.3.0",
"typescript": "^5.0.4"
},
"ct3aMetadata": {
"initVersion": "7.15.0"
}
}

Describe the bug

I have installed create-t3-stack latest version. My preferences was tailwindcss, prisma, trpc during install. I just made a fresh installation and I aint install any other dependencies. Previous versions of create-t3-app works properly. The error is:

  • info Loaded env from /Users/violetbee/Programming/dokap-poll-app/.env
  • info Linting and checking validity of types
    Failed to compile.

./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./src/styles/globals.css
TypeError: Cannot create property '/Users/violetbee/Programming/dokap-poll-app/tailwind.config.ts' on string '/var/folders/ms/t10l4xj93tv29swq41k2c2g40000gn/T/node-jiti'
at evalModule (/Users/violetbee/Programming/dokap-poll-app/node_modules/jiti/dist/jiti.js:1:254815)
at jiti (/Users/violetbee/Programming/dokap-poll-app/node_modules/jiti/dist/jiti.js:1:253034)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/load-config.js:37:30
at loadConfig (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/load-config.js:39:6)
at getTailwindConfig (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:116)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:99:92
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/processTailwindFeatures.js:48:11
at plugins (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/plugin.js:38:63)
at LazyResult.runOnRoot (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/node_modules/postcss/lib/lazy-result.js:393:26)

Import trace for requested module:
./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./src/styles/globals.css
./src/styles/globals.css

./src/styles/globals.css
TypeError: Cannot create property '/Users/violetbee/Programming/dokap-poll-app/tailwind.config.ts' on string '/var/folders/ms/t10l4xj93tv29swq41k2c2g40000gn/T/node-jiti'
at evalModule (/Users/violetbee/Programming/dokap-poll-app/node_modules/jiti/dist/jiti.js:1:254815)
at jiti (/Users/violetbee/Programming/dokap-poll-app/node_modules/jiti/dist/jiti.js:1:253034)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/load-config.js:37:30
at loadConfig (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/load-config.js:39:6)
at getTailwindConfig (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:116)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:99:92
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/processTailwindFeatures.js:48:11
at plugins (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/plugin.js:38:63)
at LazyResult.runOnRoot (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/node_modules/postcss/lib/lazy-result.js:393:26)
at tryRunOrWebpackError (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:311493)
at webpack_require_module (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:131117)
at nested_webpack_require_153754 (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:130556)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:131409
at symbolIterator (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/neo-async/async.js:1:14444)
at done (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/neo-async/async.js:1:14824)
at Hook.eval [as callAsync] (eval at create (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:13:28867), :15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:13:26021)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:130276
at symbolIterator (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/neo-async/async.js:1:14402)
-- inner error --
TypeError: Cannot create property '/Users/violetbee/Programming/dokap-poll-app/tailwind.config.ts' on string '/var/folders/ms/t10l4xj93tv29swq41k2c2g40000gn/T/node-jiti'
at evalModule (/Users/violetbee/Programming/dokap-poll-app/node_modules/jiti/dist/jiti.js:1:254815)
at jiti (/Users/violetbee/Programming/dokap-poll-app/node_modules/jiti/dist/jiti.js:1:253034)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/load-config.js:37:30
at loadConfig (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/load-config.js:39:6)
at getTailwindConfig (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:116)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:99:92
at /Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/processTailwindFeatures.js:48:11
at plugins (/Users/violetbee/Programming/dokap-poll-app/node_modules/tailwindcss/lib/plugin.js:38:63)
at LazyResult.runOnRoot (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/node_modules/postcss/lib/lazy-result.js:393:26)
at Object. (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!/Users/violetbee/Programming/dokap-poll-app/src/styles/globals.css:1:7)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:915095
at Hook.eval [as call] (eval at create (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:13:28645), :7:1)
at Hook.CALL_DELEGATE [as _call] (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:13:25915)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:131150
at tryRunOrWebpackError (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:311447)
at webpack_require_module (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:131117)
at nested_webpack_require_153754 (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:130556)
at /Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:131409
at symbolIterator (/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/compiled/neo-async/async.js:1:14444)

Generated code for /Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!/Users/violetbee/Programming/dokap-poll-app/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!/Users/violetbee/Programming/dokap-poll-app/src/styles/globals.css

Import trace for requested module:
./src/styles/globals.css

Build failed because of webpack errors

Reproduction repo

https://github.com/violetbee/dokap-poll-app

To reproduce

Just clone it and then do npm i and run.

Additional information

No response

@kmbremnertes
Copy link

I'm seeing this too

@violetbee
Copy link
Author

violetbee commented Jul 4, 2023

To fix that I have made changes in "tailwind.config.ts".

from :

import { type Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

to :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

fixed issue.

@c-ehrlich
Copy link
Member

c-ehrlich commented Jul 4, 2023

Thanks for opening this. I couldn't recreate it on a new app that I scaffolded myself (v7.15)

CleanShot 2023-07-04 at 19 21 51@2x

But I did manage to reproduce from your repo

CleanShot 2023-07-04 at 19 17 02@2x

Also the last change to the generated tailwind.config.ts was three months ago. This makes me feel like there's more to it than "just" the tailwind types. Will investigate more.

@c-ehrlich
Copy link
Member

c-ehrlich commented Jul 4, 2023

The issue was caused by peer dependency [email protected]. Please run npm update to get the current newest version, 1.9.1 or newer.

See unjs/jiti#147 and tailwindlabs/tailwindcss#11546

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants