Html-webpack-plugin: Error: Cannot find module 'loader-utils'

[blinkcat]

Current behaviour 💣

Error: Cannot find module 'loader-utils'

Expected behaviour ☀️

It should work properly

Reproduction Example 👾

Environment 🖥

"html-webpack-plugin": "5.3.0",
"typescript": "^4.2.3",
"webpack": "^5.24.3"

here

https://github.com/jantimon/html-webpack-plugin/blob/6f39192da6d68bb58c178cc769d0c8c810bf82e7/index.js#L17

but

https://github.com/jantimon/html-webpack-plugin/blob/6f39192da6d68bb58c178cc769d0c8c810bf82e7/package.json#L52-L58

[jantimon]

Oh 😨 thanks @blinkcat for reporting!

I'll try to fix that asap - for now you can use html-webpack-plugin 5.2.0 or by installing loader-utils manually

[sibiraj-s]

will be fixed by https://github.com/jantimon/html-webpack-plugin/pull/1626

[sibiraj-s]

@jantimon Also we may not need loader utils if we support Webpack 5's template strings format and the templateHash workaround can be removed too.

Note. it brings in a slightly breaking change. [hashType:contenthash:digestType:length] is not supported. only [hash:length] is supported. The rest can be configured via output options.

[jantimon]

@sibiraj-s thanks 👍

I prepared this pr (but tests are failing): https://github.com/jantimon/html-webpack-plugin/pull/1628/files

probably one issue is that it is still using the no longer supported digestType..
I guess if webpack 5 dropped it we can also drop it for the html-webpack-plugin

[sibiraj-s]

I guess if webpack 5 dropped it we can also drop it for the html-webpack-plugin

Agreed. I was also going to make a PR for the same. Implementation is different though.

const output = new webpack.sources.RawSource(html, false);
const {
  hashDigest,
  hashDigestLength,
  hashFunction,
  hashSalt,
} = compilation.outputOptions;

const hash = compiler.webpack.util.createHash(hashFunction);

hash.update(output.source());

if (hashSalt) {
  hash.update(hashSalt);
}

const fullContentHash = hash.digest(hashDigest);
const contentHash = fullContentHash.slice(0, hashDigestLength);
const ext = path.extname(options.template);
const base = path.basename(options.template);
const name = base.slice(0, base.length - ext.length);

const pathData = {
  filename: options.template,
  contentHash,
  chunk: {
    name,
    id: options.template,
    hash: contentHash,
    contentHash,
  },
};

const { path: finalOutputName, info } = compilation.getPathWithInfo(
  options.filename,
  pathData
);

// Add the evaluated html code to the webpack assets
compilation.emitAsset(
  finalOutputName,
  new webpack.sources.RawSource(html, false),
  info
);
previousEmittedAssets.push({ name: finalOutputName, html });
return finalOutputName;

this also supports additional template parameters in the template strings. like name, id, ext. etc.

[jantimon]

@sibiraj-s I am afraid this approach will not work..

We need to generate the hash after the webpack assets have been injected and that's not possible if we do it during the template compilation

[sibiraj-s]

@jantimon I am not sure what you are referring here. we are just replacing the old code
https://github.com/jantimon/html-webpack-plugin/blob/6f39192da6d68bb58c178cc769d0c8c810bf82e7/index.js#L378-L380

with this. Same to same. I also made a snapshot testing with the above code, the output hash is also same after emit.

[jantimon]

Oh I am very sorry I thought you would like to build that into the child compiler...

You are right your code would work too 👍

[sibiraj-s]

I have the changes ready. I am not sure what to do with the breaking changes though. I was going to create a separate issue for that, but the conversation happened here.

Shall go ahead and raise a PR for that?

[jantimon]

sure thank you so much :)

[jantimon]

@sibiraj-s I adjusted some small parts in #1628 could you please take a look? :)

[jantimon]

Published as [email protected]

[sibiraj-s]

Awesome.