Repository navigation
fix: inline named webpack chunks (webpackChunkName) in the server runtime - #1439
Conversation
…untime
The webpack runtime patch only inlined `chunks/<digits>.js` and switched on
the numeric chunk id, so a chunk named with `/* webpackChunkName */` (written
as `chunks/<name>.js` and reached through the `__webpack_require__.u`
id-to-filename map) hit `default: throw new Error("Unknown chunk N")` at
runtime.
List every `.js` file under `chunks/` (nested names included) and switch on
the computed path `"./chunks/" + __webpack_require__.u(chunkId)` instead of
the id. Chunk names are escaped so they cannot collide with the `$NAME`
placeholders of the fix template. The single chunk rule uses the same
switch so a single named chunk also loads.
Adds a pages-router e2e page using `next/dynamic` with a named chunk.
Fixes opennextjs#1326
🦋 Changeset detectedLatest commit: a8b267d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
🔍 Devin Review: 1 flag
Not posted on this PR by your GitHub settings — view it in Devin Review. (Configure)
A non-matching rule used to leave the dynamic require in place silently and the worker would only fail when loading a chunk at runtime.
|
Devin Review reports one flag on this PR but it is not posted here (hidden by the org's review settings), so I could not read it. I re-reviewed the diff against the webpack template shipped in Next 15.5.27 and 16.3.8 and the emitted |
Apps in examples/e2e come from `@opennextjs/aws` so it's better not to add tests only for cloudflare if they can be added to a cloudflare specific app
commit: |
vicb
left a comment
There was a problem hiding this comment.
Thanks for the PR @mathurshubham!
The e2e was super helpful to investigate.
I moved the e2e to the playground16 app because apps under examples/e22 are shared with the aws adapter.
The last commit simplifies the implementation.
Fixes #1326
Problem
The webpack server runtime loads chunks with
installChunk(require("./chunks/" + __webpack_require__.u(chunkId))), which esbuild cannot bundle, so the adapter rewrites it into aswitchwith one staticrequireper chunk. That rewrite only listedchunks/<digits>.jsand switched on the numeric id. Next's serverchunkFilenameis[name].js, so a chunk named with/* webpackChunkName: "x" */(fromnext/dynamicor a dependency) is written aschunks/x.jsand reached through the__webpack_require__.uid-to-name map (e.u=a=>""+(522===a?"x":a)+".js"). It had nocase, so the page failed withError: Unknown chunk 522and a 500.Fix
patchWebpackRuntimenow lists every.jsunderchunks/(nested names likedir/nameincluded, symlinks accepted) and the generated code switches on the computed path:The single-chunk rule uses the same switch so a single named chunk also loads. Chunk names are escaped (
$to\x24) so they can't collide with the$NAMEplaceholders of the ast-grep fix template. The chunk listing is skipped when no webpack runtime file exists (Turbopack builds).Testing
__webpack_require__.umaps, nested names, a single named chunk, a$in the name, an executable test that runs the patched runtime, andapplyRule(...).edits.lengthno-op checks.require("./chunks/"+left behind.examples/e2e/pages-router:/named-chunk/renders anext/dynamiccomponent withwebpackChunkName. Builthandler.mjscontainscase"./chunks/named-chunk.js"for both runtimes; the full pages-router Playwright suite passes (40 passed, 1 skipped).pnpm testandpnpm code:checkspass.Note:
examples/e2e/pages-routeris periodically synced fromopennextjs-aws; the new test may need to be upstreamed there as well.