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

[neutraali]

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"

[developit]

Can you check if this still happens in critters@1.1.0?

[ansballard]

Getting the same with critters@1.1.0 and webpack@4.16.1. At first I assumed it was because I was passing a string to templateContent instead of the template option in html-webpack-plugin, but switching gives the same error. My webpack config is not in the root of the project (./config/webpack.config.js), and the template is in that directory as well, in case that's part of the issue.

Full error:

ERROR in   TypeError: Cannot read property 'readFile' of undefined

- critters.js:225
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:225:19

- new Promise

- critters.js:224 Critters.readFile
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:224:12

- critters.js:281 Critters.<anonymous>
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:281:25

- new Promise

- critters.js:278 Critters.<anonymous>
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:278:16

- new Promise

- critters.js:267 Critters.embedLinkedStylesheet
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:267:12

- critters.js:242
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:242:83

- Array.map

- critters.js:242 Critters.<anonymous>
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:242:47

- new Promise

- critters.js:234 Critters.process
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:234:12

- critters.js:193
  [Mailhouse]/[critters-webpack-plugin]/dist/critters.js:193:24


- new Promise


- Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
  [Mailhouse]/[tapable]/lib/Hook.js:35:21

- index.js:673
  [Mailhouse]/[html-webpack-plugin]/index.js:673:47

- index.js:196 Promise.resolve.then.then.then.then.then.then.then.th    en.result
  [Mailhouse]/[html-webpack-plugin]/index.js:196:18


- next_tick.js:188 process._tickCallback
  internal/process/next_tick.js:188:7

OSX, Node@8.9.1, NPM@6.2.0

[isidrok]

I was having the same error because a css file I was loading in the html entrypoint could not be found (404), removing that link fixed the problem.

[vinaybedre]

I am using Vue CLI 3 with Vuetify and have the same issue. Vuetify uses stylus and all the files referred are included. Can a repo help you guys solve?

[DavidCondit]

I was having the same error because a css file I was loading in the html entrypoint could not be found (404), removing that link fixed the problem.

I'm having the same issue as OP. isidrok, can you post snippets of your webpack.config.js entry points and plugins?

[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.

[developit]

@isidrok hmm - prerender-loader probably can't generate the same hashes for CSS as the main bundle.

The simple fix here would be to have this.fs fall back to require('fs'), but I don't think that will work properly when running Webpack against a virtual filesystem.

[isidrok]

Hi @developit, I can confirm that the issue is due to prerender-loader outputing incorrect hashes for css files loaded with mini-css-extract-plugin for dynamic chunks if the hashing strategy is different from contenthash.

Then Critters fails because the file cannot be found.

The reproduction is in https://github.com/isidrok/prerender-loader-reprod, the steps are in the readme.

So it seems there's no real issue with Critters apart from a somehow cryptic error message when it cannot find a file.

Filed an issue in prerender-loader GoogleChromeLabs/prerender-loader#17

[MikaAK]

I'm having this issue not using prerender-loader

[developit]

@MikaAK @isidrok - it looks like mini-css-extract-plugin had a bug that caused the hashes to be dependent on things other than the filename:
webpack-contrib/mini-css-extract-plugin#281

Updating to the latest version fixes this in my projects, hope it does for you too.

[MikaAK]

That did the trick!