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

[bjarn]

• Laravel Mix Version: 6.0.0
• Node Version (node -v): v14.15.2
• NPM Version (npm -v): 6.14.9
• OS: MacOS Big Sur 11.1

Description:

Since updating to Laravel Mix 6 I am getting the following exception, which as also mentioned in #2527 :

❯ npm run production

> @ production /Users/bjarnbronsveld/PhpStormProjects/xxxx
> mix --production

[webpack-cli] TypeError: Cannot read property 'postCss' of undefined
    at Object.boot (/Users/bjarnbronsveld/PhpStormProjects/es-xxxx/node_modules/laravel-mix-purgecss/index.js:25:35)
    at /Users/bjarnbronsveld/PhpStormProjects/es-xxxx/node_modules/laravel-mix/src/components/ComponentRegistrar.js:72:41
    at /Users/bjarnbronsveld/PhpStormProjects/es-xxxx/node_modules/laravel-mix/src/Dispatcher.js:34:69
    at Array.map (<anonymous>)
    at Dispatcher.fire (/Users/bjarnbronsveld/PhpStormProjects/es-xxxx/node_modules/laravel-mix/src/Dispatcher.js:34:54)
    at Mix.dispatch (/Users/bjarnbronsveld/PhpStormProjects/es-xxxx/node_modules/laravel-mix/src/Mix.js:108:32)
    at module.exports (/Users/bjarnbronsveld/PhpStormProjects/es-xxxx/node_modules/laravel-mix/setup/webpack.config.js:5:15)
    at /Users/bjarnbronsveld/PhpStormProjects/es-xxxx/node_modules/webpack-cli/lib/groups/resolveConfig.js:176:35
    at Array.map (<anonymous>)
    at finalize (/Users/bjarnbronsveld/PhpStormProjects/es-xxxx/node_modules/webpack-cli/lib/groups/resolveConfig.js:166:20)

Even though I have postCss 8 installed, it seems to keep failing.

My webpack.mix.js looks like this:

const mix = require('laravel-mix')

require('laravel-mix-tailwind')
require('laravel-mix-purgecss')

mix.js('resources/js/app.js', 'public/assets/js')
    .postCss('resources/css/app.css', 'public/assets/css')
    .tailwind('./tailwind.config.js')

if (mix.inProduction()) {
    mix
        .version()
        .purgeCss()
}

This is my package.json:

{
    "private": true,
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/aspect-ratio": "^0.2.0",
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.1",
        "autoprefixer": "^10.1.0",
        "axios": "^0.21",
        "cross-env": "^7.0",
        "laravel-echo": "^1.10.0",
        "laravel-mix": "^6.0.0",
        "laravel-mix-purgecss": "^5.0",
        "laravel-mix-tailwind": "^0.1.1",
        "lodash": "^4.17.20",
        "postcss": "^8.2.1",
        "postcss-custom-properties": "^10.0.0",
        "pusher-js": "^7.0.2",
        "resolve-url-loader": "^3.1.2",
        "tailwindcss": "^2.0.2"
    },
    "dependencies": {
        "alpinejs": "^2.8.0"
    }
}

Steps To Reproduce:

Create a Laravel 8 project with TailwindCSS 2.0 and Laravel Mix 6. Then set up my webpack.mix.js and install the packages above.

Once done, run npm run production

[bjarn]

Issue has been fixed by updating Spatie's Laravel Mix PurgeCSS to 6.0.0.beta.0. Completely missed that one.

spatie/laravel-mix-purgecss#89