[6.*] TypeError: Cannot read property 'postCss' of undefined

[HDVinnie]

• Laravel Mix Version: laravel-mix@6.0.0-beta.4
• Node Version v12.19.0
• NPM Version 6.14.8
• OS: Ubuntu 20.04

Description:

When attempting to run npm run prod or npx mix -p I get the following output immediately.

> @ prod /var/www/html
> npm run production


> @ production /var/www/html
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js

[webpack-cli] TypeError: Cannot read property 'postCss' of undefined

web pack.mix.js

let mix = require('laravel-mix');
require('laravel-mix-sri');
require('laravel-mix-purgecss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 |
 */

mix.version();
mix.options({
  processCssUrls: false
})

    /*
     * Sourced asset dependencies via node_modules and JS bootstrapping
     */
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .purgeCss({
      enabled: true,

      extensions: ['html', 'php', 'js', 'vue'],

      whitelistPatterns: [/tooltip/, /fa/, /far/, /fas/, /fal/],
    })
    .generateIntegrityHash()

    /*
     * Themes
     *
     * Note: Default wysibb theme is compiled into public/css/app.css from resources/sass/app.scss
     *
     */
    .sass('resources/sass/themes/galactic.scss', 'public/css/themes/galactic.css')
    .sass('resources/sass/themes/dark-blue.scss', 'public/css/themes/dark-blue.css')
    .sass('resources/sass/themes/dark-green.scss', 'public/css/themes/dark-green.css')
    .sass('resources/sass/themes/dark-pink.scss', 'public/css/themes/dark-pink.css')
    .sass('resources/sass/themes/dark-purple.scss', 'public/css/themes/dark-purple.css')
    .sass('resources/sass/themes/dark-red.scss', 'public/css/themes/dark-red.css')
    .sass('resources/sass/themes/dark-teal.scss', 'public/css/themes/dark-teal.css')
    .sass('resources/sass/themes/dark-yellow.scss', 'public/css/themes/dark-yellow.css')
    .sass('resources/sass/themes/cosmic-void.scss', 'public/css/themes/cosmic-void.css')
    .generateIntegrityHash()

    /*
     * Login and TwoStep Auth styles
     *
     * We compile each of these separately since they should only be loaded with the certain views
     */
    .sass('resources/sass/main/login.scss', 'public/css/main/login.css')
    .sass('resources/sass/main/twostep.scss', 'public/css/main/twostep.css')
    .generateIntegrityHash()

    /*
     * Here we take all these scripts and compile them into a single 'unit3d.js' file that will be loaded after 'app.js'
     *
     * Note: The order of this array will matter, no different then linking these assets manually in the html
     */
    .babel(['resources/js/unit3d/hoe.js', 'resources/js/unit3d/custom.js', 'resources/js/unit3d/tmdb.js', 'resources/js/unit3d/parser.js', 'resources/js/unit3d/helper.js'], 'public/js/unit3d.js')
    .generateIntegrityHash()

    /*
     * Copy emojione assets
     */
    .copy('node_modules/emojione-assets/png/64', 'public/img/joypixels')
    .copy('resources/sass/vendor/webfonts/wysibb', 'public/fonts/wysibb')
    .copy('resources/sass/vendor/webfonts/font-awesome', 'public/fonts/font-awesome')
    .copy('resources/sass/vendor/webfonts/bootstrap', 'public/fonts/bootstrap');

[JeffreyWay]

Can you bump to the latest beta and let me know if it’s still an issue?

[HDVinnie]

Bumped to laravel-mix@6.0.0-beta.5 and still get same error.

[HDVinnie]

ok it seems this error is coming from https://github.com/spatie/laravel-mix-purgecss . Once removed from the webpack.mix.js that error is gone and now get:

[webpack-cli] TypeError: compiler.plugin is not a function

[webpack-cli] TypeError: Cannot read property 'compilers' of undefined

Which seems to be coming from https://github.com/Elhebert/laravel-mix-sri . So removed that from the webpack.mix.js as well and now get:

 ERROR  Failed to compile with 1 errors                                                                                                                                                      10:23:30 PM

 error  in ./resources/sass/app.scss

Error: [object Object] is not a PostCSS plugin


[webpack-cli] Promise rejection: Error: EISDIR: illegal operation on a directory, read
[webpack-cli] Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:568:3)
    at tryReadSync (fs.js:353:20)
    at Object.readFileSync (fs.js:390:19)
    at File.read (/var/www/html/node_modules/laravel-mix/src/File.js:210:19)
    at File.version (/var/www/html/node_modules/laravel-mix/src/File.js:217:25)
    at Manifest.hash (/var/www/html/node_modules/laravel-mix/src/Manifest.js:53:65)
    at /var/www/html/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:99:26
    at Collection.each (/var/www/html/node_modules/collect.js/dist/methods/each.js:21:14)
    at CustomTasksPlugin.applyVersioning (/var/www/html/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:98:37)
    at /var/www/html/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:16:30

So it seems https://github.com/spatie/laravel-mix-purgecss and https://github.com/Elhebert/laravel-mix-sri are not Laravel Mix 6 ready but the last error does indeed seem directly related to Mix?

[JeffreyWay]

Sounds like PostCSS isn't installed. Try npm install postcss --save-dev and recompile. I bet it'll work.

Though I need to figure out why you didn't have access to that. We have it listed as a dependency.

[HDVinnie]

Some progress after installing postcss. Strange indeed it didn't install with Mix.

root@UNIT3D:/var/www/html# npx mix -p
99% done plugins FriendlyErrorsWebpackPlugin

 DONE  Compiled successfully in 52452ms                                                                                                                                                      12:33:38 AM

99% done plugins CustomTasksPlugin[webpack-cli] Promise rejection: Error: EISDIR: illegal operation on a directory, read
[webpack-cli] Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:568:3)
    at tryReadSync (fs.js:353:20)
    at Object.readFileSync (fs.js:390:19)
    at File.read (/var/www/html/node_modules/laravel-mix/src/File.js:210:19)
    at File.version (/var/www/html/node_modules/laravel-mix/src/File.js:217:25)
    at Manifest.hash (/var/www/html/node_modules/laravel-mix/src/Manifest.js:53:65)
    at /var/www/html/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:99:26
    at Collection.each (/var/www/html/node_modules/collect.js/dist/methods/each.js:21:14)
    at CustomTasksPlugin.applyVersioning (/var/www/html/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:98:37)
    at /var/www/html/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:16:30

[JeffreyWay]

We're too far down the rabbit hole at this point. If you can break it down to a small example that reproduces that "illegal operation" error, I can help more.

Everything else is related to plugin support for PostCSS8.

[Aslam97]

Sounds like PostCSS isn't installed. Try npm install postcss --save-dev and recompile. I bet it'll work.

Though I need to figure out why you didn't have access to that. We have it listed as a dependency.

Confirming installing postcss fixes the issue for me. Using mix 6.0.0-beta.9

[thecrypticace]

The latest version of Mix auto-installs PostCSS v8 in your root package.json file to work around this problem.
In addition the error EISDIR: illegal operation on a directory, read has been fixed — it was related to manifest generation.

I've opened a PR with laravel-mix-sri that will let it work with Mix v6: Elhebert/laravel-mix-sri#25