fix: handle dynamic import chunks in Webpack 5 #305
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -31,7 +31,7 @@ const copyDynamicImportChunks = async (functionPath) => { | |||
| // WP5 files are looked for two levels up (../../chunks) in runtime | |||
| // This is a hack to make the file one level up i.e. with | |||
| // nextPage/nextPage/index.js, the chunk is moved to outer nextPage in a /chunks dir | |||
There was a problem hiding this comment.
can we update this comment to reflect your changes p pls :)
| copySync(join(nextDistDir, 'serverless', filePath), nextPageCopyPath, { | ||
| overwrite: false, | ||
| errorOnExist: true, | ||
| }) | ||
|
|
||
| // Write the import entry point | ||
| await writeFile(join(functionDirectory, 'nextPage', 'index.js'), `module.exports = require("./${filePath}")`) |
There was a problem hiding this comment.
ah, clever! templating wouldn't work because of the require
ascorbic
force-pushed
the
ll/dynamic-imports-webpack-5
branch
from
e974077 to
4847929
Compare
lindsaylevine
approved these changes
May 14, 2021
serhalp
pushed a commit
that referenced
this pull request
Apr 5, 2024
…hout --filter (#305) * test: add simple npm monorepo and deploy from workspace directory without --filter * test: use empty base and init git repo * test: use previous cli * Revert "test: use previous cli" This reverts commit d5368afb17a1d909f6f9354c10c2da215986cb9a. * chore: clearer names in create-e2e-fixtures * chore: upgrade turbo * test: install monorepo root deps as well with npm * test: maybe not run turbo in parallel * test: maybe not run any test in parallel * chore: more debug information on deployment failures * revert some debug changes * Revert "chore: more debug information on deployment failures" This reverts commit e3cbe529e624b1ba8833892ed8bbf7cf4f57e8f5. * remove .gitignore from fixture as there is common one * test: cleanup, remove empty destructuring * test: install latest cli in smoke test and don't rely on version in runner
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When using Webpack 5, Next.JS builds serverless functions with async chunks in a
chunksdirectory as a sibling of thepagesandapidirectories in.next/serverless. Currently we move these functions to the top level innetlify/functions/next_xxxx, meaning that the relative imports of the dynamic chunks in them are incorrect. e.g. with a page like.next/serverless/pages/deeply/nested/file.jsthe relative import will be something like../../../chunks/mychunkname.js. Currently this would be moved up tonext_deeply_nested_file/nextPage/index.js, with chunks innext_deeply_nested_file/chunksThis PR preserves the directory structure:
next_deeply_nested_file/nextPage/pages/deeply/nested/file.js, with chunks innext_deeply_nested_file/nextPage/chunks, so relative imports will work.In order for our handler to import the nested file, we now also write out an entry point at
nextPage/index.jsthat refers to the next page, e.g. in this example it would containmodule.exports = require("./pages/deeply/nested/file.js")