With the following webpack.mix.js file
const mix = require("laravel-mix");
// Laravel Mix plugins for additional capabilities
require("laravel-mix-purgecss");
require("laravel-mix-criticalcss");
// CSS Plugins
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const presetenv = require("postcss-preset-env");
mix.setPublicPath('../public_html/assets/')
.sass(pkg.paths.src.scss + "master.scss", "css/master.min.css")
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
})
.js(pkg.paths.src.js + "site.js", "js/site.min.js")
.sourceMaps()
.browserSync({
proxy: "domain.local",
notify: {
styles: {
top: 'auto',
bottom: '0'
}
},
files: [
"src/scss/*.scss",
"templates/*.twig",
"templates/**/*.twig",
"templates/*.js",
"templates/**/*.js"
]
});
// mix.disableSuccessNotifications();
if (mix.inProduction()) {
mix.webpackConfig({
plugins: [],
})
.criticalCss({
enabled: true,
paths: {
base: 'https://domain.local',
templates: './templates/_inline_css/',
suffix: '.min'
},
urls: [
{ url: '/', template: 'index' },
],
options: {
minify: true,
timeout: 1200000,
},
})
.version();
}
when I run npm run production I get:
98% after emitting HtmlCriticalWebpackPlugin(node:58149) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined.
What's confusing about this is that at one point this was working OK. My list of URLs is longer than what I've displayed above. And the first time I tried it, it successfully output CSS files but I was getting problems with timeouts so started doing a few at a time.
I was able to successfully run it two or three times before the above error appeared and now it won't compile anymore. I even went back and tried the same bundles I'd tried before but it wouldn't work the second time around.
I've also tried a similar set-up using Gulp but get the same error.
Has anyone else ever got this? How did you solve it?