Dynamic import #32
Merged
Dynamic import #32
Conversation
This file contains 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
Now that the organization is named "happo", it's time to remove old references.
I added this plugin a while ago, but forgot to mention it here.
By default, webpack will treat a dynamic import as a split point [1],
meaning it will try to download a bundle as part of evaluating an
`import(somePath)` statement. This won't work for Happo -- since there's
no running server, people end up with something like this:
Error: Could not load script: "http://localhost/92.happo-bundle-react-L3Jvb3Qvc3R1ZGlv.js"
at onErrorWrapped (/root/studio/node_modules/jsdom/lib/jsdom/browser/resources/per-document-resource-loader.js:39:19)
at Object.check (/root/studio/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:58:23)
at request.then.catch.err (/root/studio/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:104:14)
To work around this, I'm using the babel-plugin-dynamic-import-node [2]
babel plugin. Thanks to @ljharb for making the suggestion and writing
the plugin. This plugin will transpile `import()` into a (deferred)
regular `require`, which is all we need to avoid the split point in
webpack.
While adding a test for this, I had to modify eslint a little, plus add
a babel plugin to make the dynamic imports recognized as valid syntax.
[1] https://webpack.js.org/api/module-methods/#import-
[2] https://www.npmjs.com/package/babel-plugin-dynamic-import-node
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.
By default, webpack will treat a dynamic import as a split point,
meaning it will try to download a bundle as part of evaluating an
import(somePath)statement. This won't work for Happo -- since there'sno running server, people end up with something like this:
To work around this, I'm using the babel-plugin-dynamic-import-node
babel plugin. Thanks to @ljharb for making the suggestion and writing
the plugin. This plugin will transpile
import()into a (deferred)regular
require, which is all we need to avoid the split point inwebpack.
While adding a test for this, I had to modify eslint a little, plus add
a babel plugin to make the dynamic imports recognized as valid syntax.
Fixes #31