The committers listed above are authorized under a signed CLA.

• ✅ login: alexander-akait / name: Alexander Akait (0a482d3, fd5729c)
• ✅ login: mariusGundersen / name: Marius Gundersen (d4ec7a9)

I've added a failing test case. I tried to fix this, but that causes the other tests to fail. I'm not certain, but I think that is because the existing tests are not correct.

This new test fails with the error Cannot find module '/bundle14/../async/936.bundle14.mjs' from 'test/ConfigTestCases.template.js' given this config:

output: {
	path: path.resolve(testPath, "./bundle14"),
	module: true,
	publicPath: "/bundle14/",
	filename: "initial/bundle14.mjs",
	chunkFilename: "async/[id].bundle14.mjs"
}

It should look for bundle14/async/936.bundle14.mjs but it looks for /bundle14/../async/936.bundle14.mjs. The /../ comes from the rootOutputPath that shouldn't be there.

I'm not able to understand how these tests verify the paths, but looking at the generated files it looks incorrect. For example for bundle11, which has this config:

output: {
	path: path.resolve(testPath, "./bundle11"),
	module: true,
	publicPath: "https://example.com/public/path/",
	filename: "initial/bundle11.mjs",
	chunkFilename: "async/[id].bundle11.mjs"
},

The generated code contains:

__webpack_require__.u = (chunkId) => {
	// return url for filenames based on template
	return "async/" + chunkId + ".bundle11.mjs";
};

__webpack_require__.p = "https://example.com/public/path/";

var promise = import(__webpack_require__.p + "../" + __webpack_require__.u(chunkId)).then(installChunk, (e) => {
	if(installedChunks[chunkId] !== 0) installedChunks[chunkId] = undefined;
	throw e;
});

The result is import("https://example.com/public/path/../async/[chunkId].bundle11.mjs"). That is not what I expect.

The same is true for other tests, for example for bundle6, which has this config:

{
	devtool: false,
	target: "web",
	output: {
		module: true,
		publicPath: "",
		filename: "initial/bundle6.mjs",
		chunkFilename: "async/[id].bundle6.mjs"
	},
	experiments: {
		outputModule: true
	}
}

It produces the following (summarized)

__webpack_require__.u = (chunkId) => {
	// return url for filenames based on template
	return "async/" + chunkId + ".bundle6.mjs";
};

__webpack_require__.p = "";

var promise = import(__webpack_require__.p + "../" + __webpack_require__.u(chunkId)).then(installChunk, (e) => {
	if(installedChunks[chunkId] !== 0) installedChunks[chunkId] = undefined;
	throw e;
});

The result is import("../async/[chunkId].bundle6.mjs"). I'm not sure if this is correct, according to the documentation a publicPath: '' should result in relative to HTML directory, but it becomes relative to entry file instead.

Yes, tests are not good, I am WIP on this

Ignore failed tests, they will fixed in other PR, because it is not related to this job

CodSpeed Performance Report

Merging #19546 will degrade performances by 80.74%

_{Comparing mariusGundersen:esm-publicPath-issue (fd5729c) with main (c1e7ba2)}

Summary

⚡ 2 improvements
❌ 4 regressions
✅ 127 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown