Running "npm run dev " gives the following error. Can someone help me solve this?
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'theme' of undefined
at _default (/var/www/html/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5)
at /var/www/html/work/node_modules/@tailwindcss/jit/src/index.js:50:11
at LazyResult.runOnRoot (/var/www/html/work/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/var/www/html/work/node_modules/postcss/lib/lazy-result.js:391:26)
at LazyResult.async (/var/www/html/work/node_modules/postcss/lib/lazy-result.js:221:30)
at LazyResult.then (/var/www/html/work/node_modules/postcss/lib/lazy-result.js:206:17)
at processResult (/var/www/html/work/node_modules/webpack/lib/NormalModule.js:701:19)
at /var/www/html/work/node_modules/webpack/lib/NormalModule.js:807:5
at /var/www/html/work/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /var/www/html/work/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/var/www/html/work/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/var/www/html/work/node_modules/postcss-loader/dist/index.js:96:7)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
Hi,
i am facing the exact same problem. What i did is to remove the plugin option from webpack.mix.json
This here prevents npm to compile:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("@tailwindcss/jit"),
require("autoprefixer")
]);
This here compiles
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css'
);
Problem not solved, maybe some input needed
in postcss.config.js:
remove require("@tailwindcss/jit")
put in require('postcss-import'), require('tailwindcss'),
in tailwind.config.js add mode: "jit"
Make sure that you did not have url() function inside your CSS file,
This was the answer to the same problem that I have faced before
@mahmoud.a.dev This works for me but now how to use image background-image: url("../public/bg.jpg"); I was getting errors on this line
node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[7].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[4]!./src/styles/globals.scss Error: Can't resolve '../public/bg.jpg' in 'C:\Users\amank\OneDrive\Desktop\the_travel_guide_india\the_travel_guide_india\src\styles'
Which npm version are you using?
Add these on your webpack.mix.js file
mix.webpackConfig({ stats: { children: true, },});
Please or to participate in this conversation.