laravel-mix: Compilation error: ERROR in child compilations [laravel]
- Laravel Mix Version: 6.0.39 (
npm list --depth=0)
├── @tailwindcss/forms@0.2.1
├── @tailwindcss/typography@0.5.0
├── alpinejs@2.8.2
├── autoprefixer@10.4.2
├── axios@0.21.1
├── global@4.4.0
├── laravel-mix@6.0.39
├── lodash@4.17.21
├── postcss-import@12.0.1
├── postcss@8.4.5
├── puppeteer@10.2.0
└── tailwindcss@3.0.12
- Node Version (
node -v): v17.3.0 - NPM Version (
npm -v): 8.3.0 - OS: macOS (M1)
Description:
Cant compile
Steps To Reproduce:
In a laravel install: yarn add --dev tailwindcss postcss autoprefixer @tailwindcss/typography
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/js/**/*.vue",
"./resources/js/**/*.jsx",
],
theme: {
extend: {
fontFamily: {
sans: [
"Nunito",
"Inter var",
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
...defaultTheme.fontFamily.sans,
],
},
},
},
variants: {
extend: {
opacity: ["disabled"],
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
],
};
// webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
Error:
→ yarn dev
yarn run v1.22.17
$ yarn run development
> development
> mix
✖ Mix
Compiled with some errors in 357.00ms
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 properties of undefined (reading '500')
at /Users/user/Work/tepui/blog.dev/node_modules/@tailwindcss/forms/src/index.js:28:59
at registerPlugins (/Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/lib/setupContextUtils.js:669:61)
at createContext (/Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/lib/setupContextUtils.js:828:5)
at Object.getContext (/Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/lib/setupContextUtils.js:883:19)
at /Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:142:53
at /Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/processTailwindFeatures.js:39:11
at plugins (/Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/index.js:20:104)
at LazyResult.runOnRoot (/Users/user/Work/others/blog.dev/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/Users/user/Work/others/blog.dev/node_modules/postcss/lib/lazy-result.js:393:26)
at async Object.loader (/Users/user/Work/others/blog.dev/node_modules/postcss-loader/dist/index.js:97:14)
at processResult (/Users/user/Work/others/blog.dev/node_modules/webpack/lib/NormalModule.js:721:19)
at /Users/user/Work/others/blog.dev/node_modules/webpack/lib/NormalModule.js:827:5
at /Users/user/Work/others/blog.dev/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/user/Work/others/blog.dev/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/user/Work/others/blog.dev/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/user/Work/others/blog.dev/node_modules/postcss-loader/dist/index.js:142:7)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
About this issue
- Original URL
- State: open
- Created 2 years ago
- Comments: 18 (1 by maintainers)
Naturally it would depend on your build… a recent installation I did I came across this same error again and this is how I solved it:
npm install autoprefixer@10.4.5 --save-exactOK -->> I thought to actually remove the package so…
npm uninstall @tailwindcss/formsThen re-install
npm install -D @tailwindcss/formsnpm run devand BANG! No Errors!THANKS for your direction! 👌
There was a reason we turned stats off but I think this is annoying enough of a problem that it should be a default — I won’t have time today I don’t think to push out a release with this but I’ll try to later in the week (unless someone wants to PR it)