Compilation error: ERROR in child compilations [laravel] #3196

abr4xas · 2022-01-10T01:22:11Z

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.

The text was updated successfully, but these errors were encountered:

noogen · 2022-01-19T15:34:45Z

As it is said above "1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)"

To see details of the warning/error, you want to add to your webpack config:

stats: {
    children: true
  }

Something like this: https://github.com/niiknow/vue-wp-plugin-starter/blob/main/webpack.mix.js#L33

gregorytoscano · 2022-01-20T14:38:18Z

I get a very similar issue with a recent yarn upgrade

Now it won't compile yarn run dev

ERROR in ./resources/assets/vendor/libs/plyr/plyr.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "  $var-name: list": expected expression (e.g. 1px, bold), was ".nth($args, 1);"
    on line 44 of node_modules/plyr/src/sass/lib/css-vars.scss
    from line 3 of resources/assets/vendor/libs/plyr/plyr.scss
>>   $var-name: list.nth($args, 1);`

 -----------------^

at processResult (/home/vagrant/code/node_modules/webpack/lib/NormalModule.js:751:19)
at /home/vagrant/code/node_modules/webpack/lib/NormalModule.js:853:5
at /home/vagrant/code/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /home/vagrant/code/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/home/vagrant/code/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.callback (/home/vagrant/code/node_modules/sass-loader/dist/index.js:62:7)
at Object.done [as callback] (/home/vagrant/code/node_modules/neo-async/async.js:8069:18)
at options.error (/home/vagrant/code/node_modules/node-sass/lib/index.js:293:32)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! laravel-starter@1.6.0 development: `npx mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the laravel-starter@1.6.0 development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

noogen · 2022-01-20T14:53:52Z

@abr4xas show issue in his css file TypeError: Cannot read properties of undefined (reading '500') but doesn't really say much. He need to get more details by showing stats.children or use stylelint to see issue in his stylesheet.

@gregorytoscano Your error actually show more details. Like it said, look in your sass file line 44.

SassError: Invalid CSS after "  $var-name: list": expected expression (e.g. 1px, bold), was ".nth($args, 1);"
    on line 44 of node_modules/plyr/src/sass/lib/css-vars.scss
    from line 3 of resources/assets/vendor/libs/plyr/plyr.scss

But I understand that the error doesn't mean it's your css or sass issue. It might be some other package bug causing compilation issue.

janpersiel · 2022-02-04T10:11:26Z

Using Statamic I ran into the same issue and could get it solved by adding a line of code:

My webpack.mix.js got the extra line (third line with nesting in it.

mix.postCss('resources/css/tailwind.css', 'public/css', [
    require('postcss-import'),

require('tailwindcss/nesting'),

    require('tailwindcss'),
    require('postcss-nested'),
    require('postcss-preset-env')({stage: 0})
])

driesvints · 2022-04-12T12:39:54Z

Add .webpackConfig({ stats: { children: true } }) to your mix. compilation and the errors will display. Props to @reinink for this one 🎉

thecrypticace · 2022-04-12T12:49:29Z

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)

noogen · 2022-04-12T14:53:52Z

I agree with the original reason to keep stats off because it's just too much info. This can cause you to miss critical/important messages. You can always turn it on by manually setting that webpackConfig.

thecrypticace · 2022-04-12T15:01:37Z

Ideally we could surface it when there are warnings and errors but not otherwise. Because yeah it’s definitely too much info normally.

AiFxApp · 2022-05-08T12:48:27Z

As it is said above "1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)"

To see details of the warning/error, you want to add to your webpack config:
stats: {
    children: true
  }
Something like this: https://github.com/niiknow/vue-wp-plugin-starter/blob/main/webpack.mix.js#L33

For those that had to go hunting for the complete lines of code as suggested by @noogen

mix.webpackConfig({
    stats: {
        children: true,
    },
});

AiFxApp · 2022-05-08T12:59:56Z

Jetstream : Laravel 9
Fresh Install: laravel new jet9 --jet --stack=livewire

I have looked in both files given from the warning...

ERROR MESSAGE:

  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
  Warning

  (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
  Warning

  (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
  Warning

  (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

  Child mini-css-extract-plugin C:\projects\a.admin-auth\jet9\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[5].use[1]!C:\projects\a.admin-auth\jet9\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[5].use[2]!C:\projects\a.admin-auth\jet9\resources\css\app.css compiled with 3 warnings
webpack compiled with 3 warnings

MY /resources/css/app.css file:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

MY /node_modules/postcss-loader/dist/cjs.js

"use strict";

module.exports = require("./index").default;

MY webpack.mix.js

const mix = require('laravel-mix');

mix.webpackConfig({
    stats: {
        children: true,
    },
});

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),

    ]);

if (mix.inProduction()) {
    mix.version();

}

Please share with me where is the issue(s)?

AiFxApp · 2022-05-08T13:51:45Z

I edited every file where color-adjust is found.. (and I mean every file) to print-color-adjust

Using IDE: VSCode
Clicked Searchbar: color-adjust
Edit: every line that where color-adjust is displayed to print-color-adjust
Ran $: npm run dev

And the public/app.css file repopulates with color-adjust

I am unsure how to solve this?

thecrypticace · 2022-05-08T17:09:18Z

This is likely because you're using the @tailwindcss/forms plugin. If so you can update to the latest version of that and the error should go away.

AiFxApp · 2022-05-08T21:12:54Z

This is likely because you're using the @tailwindcss/forms plugin. If so you can update to the latest version of that and the error should go away.

Thanks. I will check this immediately and reply with result

AiFxApp · 2022-05-08T21:18:37Z

npm install -D @tailwindcss/forms

up to date, audited 779 packages in 10s

77 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm run dev

> dev
> npm run development

> development
> mix

● Mix █████████████████████████ emitting (95%)
 emit

● Mix █████████████████████████ done (99%) plugins
 WebpackBar:done

✔ Mix
  Compiled successfully in 4.80s
                   
   Laravel Mix v6.0.43   
                    
✔ Compiled Successfully in 4699ms
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                                        File │ Size     │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                                  /js/app.js │ 694 KiB  │
│                                                                                                                 css/app.css │ 84.2 KiB │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
    
  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
  Warning

  (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
  Warning

  (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
  Warning

  (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

  Child mini-css-extract-plugin C:\projects\a.admin-auth\jet9\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[5].use[1]!C:\projects\a.admin-auth\jet9\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[5].use[2]!C:\projects\a.admin-auth\jet9\resources\css\app.css compiled with 3 warnings
webpack compiled with 3 warnings

Didnt do what I hoped it would?

AiFxApp · 2022-05-08T21:21:51Z

When i removed the
require('@tailwindcss/forms'),
the errors don't show up.. so it is definitely the problem child.
Yet i want to make use of tailwindcss/forms -- Did i maybe update this incorrectly?

AiFxApp · 2022-05-08T21:30:47Z

OK -->> I thought to actually remove the package so..
npm uninstall @tailwindcss/forms

removed 2 packages, and audited 777 packages in 5s

77 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Then re-install npm install -D @tailwindcss/forms

npm run dev and BANG! No Errors!

THANKS for your direction! 👌

AiFxApp · 2022-05-10T17:58:42Z

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:

1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 1 warning

npm install autoprefixer@10.4.5 --save-exact

Said20hr · 2022-05-14T12:19:50Z

In my case the bug was in resources/css/app.css the code was with scss instead of css, i removed the children classes and it worked for me Ex &.class

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compilation error: ERROR in child compilations [laravel] #3196

Compilation error: ERROR in child compilations [laravel] #3196

abr4xas commented Jan 10, 2022

noogen commented Jan 19, 2022

gregorytoscano commented Jan 20, 2022

noogen commented Jan 20, 2022 •

edited

janpersiel commented Feb 4, 2022

driesvints commented Apr 12, 2022

thecrypticace commented Apr 12, 2022

noogen commented Apr 12, 2022

thecrypticace commented Apr 12, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

thecrypticace commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 10, 2022 •

edited

Said20hr commented May 14, 2022

Compilation error: ERROR in child compilations [laravel] #3196

Compilation error: ERROR in child compilations [laravel] #3196

Comments

abr4xas commented Jan 10, 2022

Description:

Steps To Reproduce:

noogen commented Jan 19, 2022

gregorytoscano commented Jan 20, 2022

noogen commented Jan 20, 2022 • edited

janpersiel commented Feb 4, 2022

driesvints commented Apr 12, 2022

thecrypticace commented Apr 12, 2022

noogen commented Apr 12, 2022

thecrypticace commented Apr 12, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

thecrypticace commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 8, 2022

AiFxApp commented May 10, 2022 • edited

Said20hr commented May 14, 2022

noogen commented Jan 20, 2022 •

edited

AiFxApp commented May 10, 2022 •

edited