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

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

In your webpack config, set your output to:

output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[id].[chunkhash].js'
}

Add ExtendedAPIPlugin:

plugins: [new ExtendedAPIPlugin()]

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 9
Comments: 16 (12 by maintainers)

Most upvoted comments

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

hulkish on 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:

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;

import the custom plugin in webpack.config.prod.js

const ExtendedAPIPlugin = require('./ExtendedAPIPlugin'); // your file path
// ...
plugins: [
    // ...
    new ExtendedAPIPlugin()
]

ICELI on Sep 3, 2018