question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ExtendedAPIPlugin incorrectly causes 'cannot use [chunkhash] error'

See original GitHub issue

Do you want to request a feature or report a bug? Bug.

What is the current behavior? Usage of [chunkhash] for both output.filename & output.chunkFilename along with ExtendedAPIPlugin causes incorrect compilation error.

If the current behavior is a bug, please provide the steps to reproduce.

Demo: https://github.com/hulkish/webpack-ExtendedAPIPlugin-bug

  1. In your webpack config, set your output to:
output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[id].[chunkhash].js'
}
  1. Add ExtendedAPIPlugin:
plugins: [new ExtendedAPIPlugin()]
  1. Run the build & get this error:
ERROR in chunk main [entry]
[name].[chunkhash:5].js
Cannot use [chunkhash] for chunk in '[name].[chunkhash].js' (use [hash] instead)

What is the expected behavior? Should not cause this error.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System. node@8.2.0, yarn@0.27.5, webpack@3.3.0

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:9
  • Comments:16 (12 by maintainers)

github_iconTop GitHub Comments

2reactions
hulkishcommented, Sep 3, 2018

@ICELI Sounds like you might have an actual fix, why not make pr?

1reaction
ICELIcommented, Sep 3, 2018

bug analyze

Compare with APIPlugin.js and ExtendedAPIPlugin.js, we will find this line:
ExtendedAPIPlugin.js#L35

compilation.mainTemplate.plugin("global-hash", () => true);

so, useChunkHash fn always return false MainTemplate.js#L229

useChunkHash(chunk) {
	const paths = this.applyPluginsWaterfall("global-hash-paths", []);
	return !this.applyPluginsBailResult("global-hash", chunk, paths); // always return `false`
}

then noChunkHash always true
Compilation.js#L1266

file = this.getPath(filenameTemplate, {
	noChunkHash: !useChunkHash,
	chunk
});

then asset-path plugin will throw the error

Cannot use [chunkhash] for chunk in '${path}' (use [hash] instead)

TemplatedPathPlugin.js#L63

// replacePathVariables
if(data.noChunkHash && REGEXP_CHUNKHASH_FOR_TEST.test(path)) {
	throw new Error(`Cannot use [chunkhash] for chunk in '${path}' (use [hash] instead)`);
}

by commenting out the following line in the ExtendedAPIPlugin.js#L35, it works fine.

hack fix:

  1. create ExtendedAPIPlugin.js
/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/
"use strict";

const ConstDependency = require("webpack/lib/dependencies/ConstDependency");
const ParserHelpers = require("webpack/lib/ParserHelpers");
const NullFactory = require("webpack/lib/NullFactory");

const REPLACEMENTS = {
	__webpack_hash__: "__webpack_require__.h", // eslint-disable-line camelcase
	__webpack_chunkname__: "__webpack_require__.cn" // eslint-disable-line camelcase
};
const REPLACEMENT_TYPES = {
	__webpack_hash__: "string", // eslint-disable-line camelcase
	__webpack_chunkname__: "string" // eslint-disable-line camelcase
};

class ExtendedAPIPlugin {
	apply(compiler) {
		compiler.plugin("compilation", (compilation, params) => {
			compilation.dependencyFactories.set(ConstDependency, new NullFactory());
			compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template());
			compilation.mainTemplate.plugin("require-extensions", function(source, chunk, hash) {
				const buf = [source];
				buf.push("");
				buf.push("// __webpack_hash__");
				buf.push(`${this.requireFn}.h = ${JSON.stringify(hash)};`);
				buf.push("");
				buf.push("// __webpack_chunkname__");
				buf.push(`${this.requireFn}.cn = ${JSON.stringify(chunk.name)};`);
				return this.asString(buf);
			});
			// compilation.mainTemplate.plugin("global-hash", () => true);

			params.normalModuleFactory.plugin("parser", (parser, parserOptions) => {
				Object.keys(REPLACEMENTS).forEach(key => {
					parser.plugin(`expression ${key}`, ParserHelpers.toConstantDependency(REPLACEMENTS[key]));
					parser.plugin(`evaluate typeof ${key}`, ParserHelpers.evaluateToString(REPLACEMENT_TYPES[key]));
				});
			});
		});
	}
}

module.exports = ExtendedAPIPlugin;
  1. import the custom plugin in webpack.config.prod.js
const ExtendedAPIPlugin = require('./ExtendedAPIPlugin'); // your file path
// ...
plugins: [
    // ...
    new ExtendedAPIPlugin()
]
Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot use [chunkhash] or [contenthash] for chunk in '[name ...
Fixed my problem and still able to use chunkhash for my production filenames as well as HotModuleReplacementPlugin.
Read more >
webpack/webpack - Gitter
Hi everybody ! I'm assuming some troubles on my webpack installation. Can someone could tell me what i did wrong ?
Read more >
ERROR in chunk application [entry] js/[name]-[contenthash].js ...
I have always this error in red !!! ERROR in chunk application [entry] js/[name]-[contenthash].js Cannot use [chunkhash] or [contenthash] for ...
Read more >
webpack @ 4.0.0-beta.3 .. 4.0.0 - Package Diff
console.error("-> When using npm: npm install webpack-cli -D"); ... + const validReasons = m.reasons.filter(reason => reason.module);.
Read more >
Webpack 5 release (2020-10-10)
While this makes using modules written for Node.js easier, ... This caused much stderr output and yielded a performance problem on some ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found