Laravel Mix Critical CSS - criticalCss is not a function - laravel

Question

I have been trying to compile Webpack with laravel-mix, laravel-mix-purgecss, and laravel-mix-criticalcss. But I have been facing issues compiling it with laravel-mix-criticalcss. If I comment the criticalcss in webpack.mix.js, it works fine, but with criticalcss it throws an error. I have upgraded npm and all packages, but whenever I try to compile webpack, it throws this error:
[webpack-cli] TypeError:
mix.js(...).options(...).postCss(...).options(...).sass(...).sass(...).criticalCss
is not a function
I have included laravel-mix-criticalcss in webpack.mix.js
require('laravel-mix-criticalcss');
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"dependencies": {
"intersection-observer": "^0.12.0",
"laravel-vue-pagination": "^3.0.0",
"sass-migrator": "^1.5.4",
"v-lazy-image": "^2.1.1",
"vanilla-lazyload": "^17.6.1",
"vue-clickaway": "^2.2.2",
"vue-slider-component": "^3.2.15",
"vue-sweetalert2": "^5.0.2",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"autoprefixer": "^10.4.4",
"axios": "^0.26.1",
"bootstrap": "^4.6.0",
"bs-custom-file-input": "^1.3.4",
"cross-env": "^7.0.3",
"jquery": "^3.6.0",
"laravel-mix": "^6.0.43",
"laravel-mix-criticalcss": "^0.1.0",
"laravel-mix-purgecss": "^6.0.0",
"laravel-mix-workbox": "^0.1.4",
"livewire-sortable": "^0.2.2",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.4.12",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.23",
"vue": "^3.2.31",
"vue-template-compiler": "^2.6.14",
"workbox-webpack-plugin": "^6.5.1"
}
}

Answer 1

Try using a new version of Laravel Mix Critical.
npm i laravel-mix-criticalcss#latest --save-dev
Or use this package.json and do npm install.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"dependencies": {
"intersection-observer": "^0.12.0",
"laravel-vue-pagination": "^3.0.0",
"sass-migrator": "^1.5.4",
"v-lazy-image": "^2.1.1",
"vanilla-lazyload": "^17.6.1",
"vue-slider-component": "^3.2.15",
"vue-sweetalert2": "^5.0.2",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"autoprefixer": "^10.4.4",
"axios": "^0.26.1",
"bootstrap": "^4.6.0",
"bs-custom-file-input": "^1.3.4",
"cross-env": "^7.0.3",
"jquery": "^3.6.0",
"laravel-mix": "^6.0.43",
"laravel-mix-criticalcss": "^1.0.2",
"laravel-mix-purgecss": "^6.0.0",
"laravel-mix-workbox": "^0.1.4",
"livewire-sortable": "^0.2.2",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.4.12",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.23",
"vue": "^3.2.31",
"vue-template-compiler": "^2.6.14",
"workbox-webpack-plugin": "^6.5.1"
}
}