fix(bundling): fix webpack publicPath: 'auto' behavior for esm builds

[karaggeorge]

There's a lot more detail in the issue I opened, but I'll summarize the output changes here.

When building with webpack and:

• output.publicPath is set to auto or omitted (it defaults to auto)
• There's an async loaded chunk (for example using a dynamic import)
• Scripts are of type module when injected in the html markup (i.e. esm: true)

The wrong snippet from the webpack AutoPublicPathRuntimeModule template is injected

Current Behavior

Current output uses document.currentScript which is not supported for type="module" scripts

Minified (note the currentScript usage):

(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var r=n.g.document;if(!e&&r&&(r.currentScript&&(e=r.currentScript.src),!e)){var t=r.getElementsByTagName("script");t.length&&(e=t[t.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})()

With minification manually disabled:

/******/ 	/* webpack/runtime/publicPath */
/******/ 	(() => {
/******/ 		var scriptUrl;
/******/ 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
/******/ 		var document = __webpack_require__.g.document;
/******/ 		if (!scriptUrl && document) {
/******/ 			if (document.currentScript)
/******/ 				scriptUrl = document.currentScript.src
/******/ 			if (!scriptUrl) {
/******/ 				var scripts = document.getElementsByTagName("script");
/******/ 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
/******/ 			}
/******/ 		}
/******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
/******/ 		// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
/******/ 		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
/******/ 		scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
/******/ 		__webpack_require__.p = scriptUrl;
/******/ 	})();

Expected Behavior

After this change:

Minified (not import.meta.url usage):

(()=>{var e;if("string"==typeof import.meta.url&&(e=import.meta.url),!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})()

With minification manually disabled:

/******/ 	/* webpack/runtime/publicPath */
/******/ 	(() => {
/******/ 		var scriptUrl;
/******/ 		if (typeof import.meta.url === "string") scriptUrl = import.meta.url
/******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
/******/ 		// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
/******/ 		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
/******/ 		scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
/******/ 		__webpack_require__.p = scriptUrl;
/******/ 	})();

Related Issue(s)

Fixes #13185

[nx-cloud-staging]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 5b353ea. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 12 targets

• nx affected --target=e2e --base=c2d4bf5fc8119abc00c16f96fd6b25b9385f894e --head=5b353ea06e7855942725c50bde3dd48bc64c09b5 --exclude=e2e-storybook,e2e-storybook-angular,e2e-react-native,e2e-detox --parallel=1
• nx affected --target=test --base=c2d4bf5fc8119abc00c16f96fd6b25b9385f894e --head=5b353ea06e7855942725c50bde3dd48bc64c09b5 --parallel=1
• nx affected --target=build --base=c2d4bf5fc8119abc00c16f96fd6b25b9385f894e --head=5b353ea06e7855942725c50bde3dd48bc64c09b5 --parallel=3
• nx-cloud record -- yarn depcheck
• nx affected --target=lint --base=c2d4bf5fc8119abc00c16f96fd6b25b9385f894e --head=5b353ea06e7855942725c50bde3dd48bc64c09b5 --parallel=3
• nx-cloud record -- yarn nx workspace-lint
• nx-cloud record -- yarn check-lock-files
• nx-cloud record -- yarn check-commit
• nx-cloud record -- yarn nx format:check --base=c2d4bf5fc8119abc00c16f96fd6b25b9385f894e --head=5b353ea06e7855942725c50bde3dd48bc64c09b5
• nx-cloud record -- yarn check-imports
• nx-cloud record -- yarn documentation
• nx build typedoc-theme

---

Sent with 💌 from NxCloud.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
nx-dev	⬜️ Ignored (Inspect)		Nov 15, 2022 at 7:46PM (UTC)

[karaggeorge]

This issue was originally found while working with @antoniolofiego on their repo using nx@14.5.10

They are currently using a workaround overriding the webpack config. If desired, I can open a similar PR for the 14.x version, but since the issue was reproducible on the latest, I opened it targeting master

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.