Crashing due to Critters.prototype.readFile vs. this$1.fs about critters HOT 11 CLOSED

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.

from critters.

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?

from critters.

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

from critters.

That did the trick!

from critters.

Can you check if this still happens in [email protected]?

from critters.

Getting the same with [email protected] and [email protected]. 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, [email protected], [email protected]

from critters.

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.

from critters.

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?

from critters.

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

from critters.

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

from critters.

I'm having this issue not using prerender-loader

from critters.