npm run prod fails due to 'mini-css-extract-plugin' and 'postcss-loader' in /resources/css/app.css

I'm hoping someone can help me because I can't compile my tailwind styles anymore.

I've hit an issue when trying to run npm run prod where the error I'm getting relates to a failure with mini-css-extract-plugin and postcss-loader.

I have another Laravel installation which this is a clone of and it doesn't have any issues.

When this version was put on another subdomain it wouldn't compile so I reinstalled the node_modules and updated composer. That worked fine and I was able to run npm run prod.

I now need to update my tailwind styles and for some reason it won't work. Its on a VPS so I'm pretty sure nothing has changed on it, but I don't know if something else is causing it to fail.

I have tried removing all custom styles in app.css so that it only contains:

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

but it still fails.

Below is my mix file and the error I'm getting - does anyone have any idea why this has suddenly started happening?

I'm running Laravel 8.5.4 and mix is

Thanks for any help you can provide.

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'),
])
.scripts([
    'public/js/app.js',
    'public/js/jquery-3.5.1.min.js',
    'public/js/jquery-ui-1.12.1/jquery-ui.min.js',
    'public/js/js.cookie.min.js',
    'public/js/collect.min.js',
    'public/js/moment.min.js',
    'public/js/sweetalert2/dist/sweetalert2.all.min.js',
    'public/js/wow.min.js',
    'public/js/slick/slick.min.js',
    'public/js/chart.min.js',
  ], 'public/js/merged-header.js')
.scripts([
    'public/js/yall.min.js',
    'public/js/splide407/dist/js/splide.min.js',
  ], 'public/js/merged-footer.js')
.styles([
    'public/css/fontawesome-5-9-0/css/all.css',
    'public/js/jquery-ui-themes-1.12.1/themes/base/jquery-ui.css',
    'public/css/app.css',
    'public/css/animate.min.css',
    'public/js/slick/slick-theme.css',
    ], 'public/css/merged.css')

.minify(['public/css/merged.css', 'public/js/merged-header.js', 'public/js/merged-footer.js']);

mix.webpackConfig({
    plugins: [
        // ...
    ],
    resolve: {
       // ...
    },
    stats: {
         children: true
    }
});


  ERROR 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 build failed (from ./node_modules/postcss-loader/dist/cjs.js):
  SyntaxError: Unexpected token (16:13)
      at _class.pp.raise (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2927:15)
      at _class.pp.unexpected (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:698:10)
      at _class.pp.expect (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:692:28)
      at _class.pp.parseExprList (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2818:14)
      at _class.pp.parseExprAtom (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2298:28)
      at _class.parseExprAtom (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/lib/dynamic-import/index.js:77:117)
      at _class.pp.parseExprSubscripts (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2129:21)
      at _class.pp.parseMaybeUnary (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2106:19)
      at _class.parseMaybeUnary (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/lib/private-class-elements/index.js:122:54)
      at _class.pp.parseExprOps (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2041:21)

  Child mini-css-extract-plugin /home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/resources/css/app.css compiled with 1 error

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):
SyntaxError: Unexpected token (16:13)
    at _class.pp.raise (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2927:15)
    at _class.pp.unexpected (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:698:10)
    at _class.pp.expect (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:692:28)
    at _class.pp.parseExprList (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2818:14)
    at _class.pp.parseExprAtom (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2298:28)
    at _class.parseExprAtom (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/lib/dynamic-import/index.js:77:117)
    at _class.pp.parseExprSubscripts (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2129:21)
    at _class.pp.parseMaybeUnary (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2106:19)
    at _class.parseMaybeUnary (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/lib/private-class-elements/index.js:122:54)
    at _class.pp.parseExprOps (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2041:21)
    at processResult (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/webpack/lib/NormalModule.js:753:19)
    at /home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/webpack/lib/NormalModule.js:855:5
    at /home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/ACCOUNTNAMEHERE/WEBADDRESSHERE.COM/laravel_system/node_modules/postcss-loader/dist/index.js:142:7)

webpack compiled with 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `mix --production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ACCOUNTNAMEHERE/.npm/_logs/LOGNAME-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ACCOUNTNAMEHERE/.npm/_logs/LOGNAME-debug.log

Sinnbeck

3 years ago

Level 102

Start by comparing node versions. If they are running different versions, that could cause the issue

1 like

Devedge

3 years ago

Level 1

@Sinnbeck Sorry, meant to say this but forgot - I went into the root of the original, entered node -v and it shows as running v14.4.0.

I did the same with the current installation (which fails) and it is also showing v14.4.0.

There are some other Laravel installations on the VPS which are also running the same versions.

Devedge

3 years ago

Level 1

@Sinnbeck I also just ran npm run prod on the original installation and it worked fine again.

The main difference I'm seeing is that on the original I'm getting warnings (not errors) after the success 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.

  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 /home/ACCOUNTNAME/DOMAINADDRESS.COM/laravel-system/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!/home/ACCOUNTNAME/DOMAINADDRESS.COM/laravel-system/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!/home/ACCOUNTNAME/DOMAINADDRESS.COM/laravel-system/resources/css/app.css compiled with 6 warnings
webpack compiled with 6 warnings

So it compiles okay, but just shows warnings. So something must have changed to stop the errors showing and instead throw an error?

I don't use color-adjust but it may be used elsewhere, I'm guessing maybe tailwind?

Devedge

3 years ago

Best Answer

Level 1

@sinnbeck Found it.

If I add this to package.json:

    "overrides": {
        "autoprefixer": "10.4.5"
    }

It runs fine with that.

Is it okay to keep this as an override or should the cause be tackled to prevent the same thing happening in the future?

1 like

Please or to participate in this conversation.