Crashing due to Critters.prototype.readFile vs. this$1.fs

Using new Critters() without (in the usual Webpack plugins array) any options causes the compilation process to crash:

ERROR in TypeError: Cannot read property 'readFile' of undefined
  - critters.js:216 
    [LianaUI]/[critters-webpack-plugin]/dist/critters.js:216:19
 . . .
  - critters.js:215 Critters.readFile
    [LianaUI]/[critters-webpack-plugin]/dist/critters.js:215:12
  
  - critters.js:272 Critters.<anonymous>
    [LianaUI]/[critters-webpack-plugin]/dist/critters.js:272:25
. . .
  - critters.js:258 Critters.embedLinkedStylesheet
    [LianaUI]/[critters-webpack-plugin]/dist/critters.js:258:12
  
  - critters.js:233 
    [LianaUI]/[critters-webpack-plugin]/dist/critters.js:233:83
. . .

^ Seems to break on Critters.prototype.readFile = function readFile(filename, encoding) {...} because this$1.fs is undefined.

Tried with:

"html-webpack-plugin": "3.2.0"
"webpack": "4.12.0"
"webpack-dev-server": "3.1.4"
"critters-webpack-plugin": "1.0.0"

[isidrok]

Hi @DavidCondit, I was having that problem because there seems to be a conflict when using mini-css-extract-plugin and prerender-loader. prerender-loader was outputing incorrect hashes for the css files which could not be resolved later by Critters but using contenthash did work.

Here is my relevant configuration:

const HASH = 'contenthash';
{
entry: resolve('src/index.js'),
output: {
  filename: `static/js/[name]${HASH}.js`,
  chunkFilename: `static/js/[name]${HASH}.js`,
  path: resolve('dist'),
  publicPath: '/',
  },
plugins: [
  new webpack.HashedModuleIdsPlugin(),
  new MiniCssExtractPlugin({
    filename: `static/css/[name]${HASH}.css`,
    chunkFilename: `static/css/[name]${HASH}.css`,
  }),
 new HtmlWebpackPlugin({
    template: `!prerender-loader?string!${resolve('public/index.html')}`,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true,
      removeStyleLinkTypeAttributes: false,
      keepClosingSlash: true,
      minifyURLs: true,
    },
  }),
  new Critters(),
}

Will try to reproduce that prerender-loader behaviour with a minimal example and open an issue in that repo.

[MikaAK]

That did the trick!