airbnb / babel-plugin-dynamic-import-webpack

Babel plugin to transpile import() to require.ensure, for Webpack

babel-plugin-dynamic-import-webpack

Babel plugin to transpile import() to require.ensure, for Webpack.

Note that Webpack 2 has gotten import() after this code was written.

NOTE: Babylon v6.12.0 is required to correctly parse dynamic imports.

Installation

$ npm install babel-plugin-dynamic-import-webpack --save-dev

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["dynamic-import-webpack"]
}

Via CLI

$ babel --plugins dynamic-import-webpack script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["dynamic-import-webpack"]
});

Dynamic imports and webpack

Although the specification for import() supports a dynamic importing of modules in the browser runtime, webpack's require.ensure() is not dynamic and requires a hardcoded string to work correctly. For more information see webpack's documentation on dynamic imports.

babel-plugin-dynamic-import-webpack's Issues

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

• engines was only updated if it defined a single version, not a range.
• .nvmrc was updated to Node.js 10
• .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Node polyfill

Hey all, I made a proper node polyfill for require.ensure - would be cool if this library could somehow automatically import it.

Heres a link if you are interested -
https://github.com/DylanPiercey/require-ensure

Feel free to close the issue or let me know if I can be of help in anyway.

This is technically not a _dynamic_ import. Consider Readme update.

Not to squabble over semantics, but a conversion from import() to require.ensure() is really not a dynamic import statement through webpack.

I've already started to see people saying that its possible to perform dynamic imports when that really is 0% supported by webpack (since it is only accomplished through static analysis). Since you folks are pretty well regarded in the OSS technology you publish, I just want to ensure that our webpack user base doesn't have misguided expectations about what is possible.

With that in mind, would you consider renaming this module to be whatwg-import-webpack instead of dynamic-import-webpack?

Thanks for providing this awesome workaround to the API. You can track our github issue for implementing the native webpack support for import() as we may add additional require.ensure features. (webpack/webpack#3098). (It will however, still be statically analyzed).

Actually as I've been writing this I also noticed that @domenic called the proposal [dynamic-loader] so that is fair that you would call it there.

I would be happy to PR the README to state that this doesn't really perform truly dynamic imports, since webpack doesn't support this.

Should this handle babel's interop?

ie, remove the .default when __esModule is present?

What does the import() spec say?

An in-range update of babel-cli is breaking the build 🚨

Version 6.22.1 of babel-cli just got published.

Branch	Build failing 🚨
Dependency	babel-cli
Current Version	6.22.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

add name to require.ensures

Hello,
While webpack 2 has import, this plugin still can be very valuable...

Can you please add it so that the imported module generates a name for the chunk as require.ensures 3rd argument?

The flaw with WP2 import is that you can't name the chunks. They are trying to resolve that, but who knows when that would be completed.

This plugin has opportunity to quickly provide a way to name the chunks.

An in-range update of eslint is breaking the build 🚨

Version 3.14.1 of eslint just got published.

Branch	Build failing 🚨
Dependency	eslint
Current Version	3.14.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v3.14.1

• 791f32b Fix: brace-style false positive for keyword method names (fixes #7974) (#7980) (Teddy Katz)
• d7a0add Docs: Add ESLint tutorial embed to getting started (#7971) (Jamis Charles)
• 72d41f0 Fix: no-var autofix syntax error in single-line statements (fixes #7961) (#7962) (Teddy Katz)
• b9e5b68 Fix: indent rule crash on sparse array with object (fixes #7959) (#7960) (Gyandeep Singh)
• a7bd66a Chore: Adding assign/redeclare tests to no-undefined (refs #7964) (#7965) (Kevin Partington)
• 8bcbf5d Docs: typo in prefer-promise-reject-errors (#7958) (Patrick McElhaney)

Commits

The new version differs by 8 commits .

• e544644 3.14.1
• 1297635 Build: package.json and changelog update for 3.14.1
• 791f32b Fix: brace-style false positive for keyword method names (fixes #7974) (#7980)
• d7a0add Docs: Add ESLint tutorial embed to getting started (#7971)
• 72d41f0 Fix: no-var autofix syntax error in single-line statements (fixes #7961) (#7962)
• b9e5b68 Fix: indent rule crash on sparse array with object (fixes #7959) (#7960)
• a7bd66a Chore: Adding assign/redeclare tests to no-undefined (refs #7964) (#7965)
• 8bcbf5d Docs: typo in prefer-promise-reject-errors (#7958)

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Unable to use import() with magic comments

import(/* webpackChunkName: "plugin" */ './plugin.js') sets chunk [name] the same as [id], so the output filename is 0.0.js (in config: chunkFilename: '[id].[name].js')

Avoid the dependency on both the syntax plugin and this one

Most of Babel's transformation plugins internally depend on their syntax plugins so people don't have to list both, e.g. https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-class-properties/src/index.js#L24

Seems like that could benefit this plugin too.

Error handling

Current implementation never rejects promise. However, in the spec, there is a failure path when a module has failed to load, it should be rejected.

I understand, that it will be hard to implement due to limitations of Webpack 1.x, but I'd like to create this issue to look for a possible way to work around this.

An in-range update of safe-publish-latest is breaking the build 🚨

Version 1.1.2 of safe-publish-latest was just published.

Branch	Build failing 🚨
Dependency	safe-publish-latest
Current Version	1.1.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

safe-publish-latest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Commits

The new version differs by 26 commits.

• a88a710 v1.1.2
• d82e47a [Tests] up to node v10.8, v9.11, v8.11, v6.14, v4.9; use nvm install-latest-npm
• 8c5878d [Dev Deps] update eslint, @ljharb/eslint-config, nsp, tape
• 632c8a9 [Tests] up to node v9.4, v8.9, v6.12; use nvm install-latest-npm; pin included builds to LTS
• 71972c6 [Deps] update semver
• 64dbc28 [Dev Deps] update eslint, nsp
• 3abce66 [Deps] update semver
• 7249655 [Dev Deps] update eslint, @ljharb/eslint-config, nsp, tape
• 5fe7d29 [Dev Deps] update eslint, @ljharb/eslint-config, tape
• 8cc40c7 [Tests] add editorconfig-tools
• 739e547 [Tests] up to node v8, v7.10; npm v5+ fails on node < v4
• 55fa31f Only apps should have lockfiles.
• 040194f [Tests] require 0.8 to be passing again
• dfddb24 [Deps] pin yargs to v7, since v8 drops node < 4 compat.
• 376c98d [Tests] allow 0.8 to fail, pending burl/mock-env#2

There are 26 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Minimal sample code snippet using `import()` or link to spec

Hi there!
Cool stuff :)

I just have a small suggestion: A few short lines of sample code would be nice. You show how to use it, but not the code it's supposed to run on.

Or a link to the import() spec. I was puzzled for a moment, since in my head import is a keyword for static module imports and not a function :)

Plugin Doesn't Work With babel-plugin-module-resolver

I recently discovered that when you try to use this plug-in with another Babel plug-in, module-resolver, it breaks. That plug-in re-writes the paths of import statements, for instance transforming "~/src/foo" to "projectRoot/src/foo".

For instance:

 // a.js
 export const foo = 1;

 // b.js
 import {foo} from '~/a';

 // c.js
 import('./b');

results in:

ERROR in ./c.js
Module not found: Error: Can't resolve '~/a' in ...

Presumably this is happening because when c imports b this plug-in somehow bypasses the module-resolver plug-in. While this may well be module-resolver's fault, it could also be this library's, so I figured I'd try submitting the issue here first.

Ultimately it would be nice if these two great plug-ins could work together. Thanks.

An in-range update of babel-preset-airbnb is breaking the build 🚨

Version 2.5.0 of babel-preset-airbnb was just published.

Branch	Build failing 🚨
Dependency	[babel-preset-airbnb](https://github.com/airbnb/babel-preset-airbnb)
Current Version	2.4.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

babel-preset-airbnb is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 12 commits.

• f438196 v2.5.0
• 82f94a2 [Dev Deps] update eslint-plugin-import
• dbdeb2d [Deps] update babel-preset-env
• f1bbda2 [Fix] set "strict" to true.
• 9749005 [Tests] on node v10; use nvm install-latest-npm
• c89c008 [Dev Deps] update eslint, eslint-config-airbnb-base, eslint-plugin-import
• ec3b6cb [Deps] update babel-preset-env, babel-plugin-transform-es2015-modules-commonjs, object.assign
• 5f6b84d [Deps] update babel-plugin-transform-object-rest-spread, babel-plugin-transform-es2015-modules-commonjs
• c3e597a [Dev Deps] update eslint, eslint-config-airbnb-base
• 20a15ac [New] transform ES5 property mutators
• 17d2bdc [Deps] update babel-preset-env
• 482eda6 [Dev Deps] update eslint, eslint-config-airbnb-base, eslint-plugin-import

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of eslint is breaking the build 🚨

Version 4.11.0 of eslint was just published.

Branch	Build failing 🚨
Dependency	eslint
Current Version	4.10.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

---

Release Notes

v4.11.0

• d4557a6 Docs: disallow use of the comma operator using no-restricted-syntax (#9585) (薛定谔的猫)
• d602f9e Upgrade: espree v3.5.2 (#9611) (Kai Cataldo)
• 4def876 Chore: avoid handling rules instances in config-validator (#9364) (Teddy Katz)
• fe5ac7e Chore: fix incorrect comment in safe-emitter.js (#9605) (Teddy Katz)
• 6672fae Docs: Fixed a typo on lines-between-class-members doc (#9603) (Moinul Hossain)
• 980ecd3 Chore: Update copyright and license info (#9599) (薛定谔的猫)
• cc2c7c9 Build: use Node 8 in appveyor (#9595) (薛定谔的猫)
• 2542f04 Docs: Add missing options for lines-around-comment (#9589) (Clément Fiorio)
• b6a7490 Build: ensure fuzzer tests get run with npm test (#9590) (Teddy Katz)
• 1073bc5 Build: remove shelljs-nodecli (refs #9533) (#9588) (Teddy Katz)
• 7e3bf6a Fix: edge-cases of semi-style (#9560) (Toru Nagashima)
• e5a37ce Fix: object-curly-newline for flow code (#9458) (Tiddo Langerak)
• 9064b9c Chore: add equalTokens in ast-utils. (#9500) (薛定谔的猫)
• b7c5b19 Fix: Correct [object Object] output of error.data. (#9561) (Jonathan Pool)
• 51c8cf0 Docs: Disambiguate definition of Update tag (#9584) (Jonathan Pool)
• afc3c75 Docs: clarify what eslint-config-eslint is (#9582) (Teddy Katz)
• aedae9d Docs: fix spelling in valid-typeof example (#9574) (Maksim Degtyarev)
• 4c5aaf3 Docs: Fix typo in no-underscore-dangle rule (#9567) (Fabien Lucas)
• 3623600 Chore: upgrade [email protected] (#9557) (薛定谔的猫)
• 1b606cd Chore: Remove an indirect dependency on jsonify (#9444) (Rouven Weßling)
• 4d7d7ab Update: Resolve npm installed formatters (#5900) (#9464) (Tom Erik Støwer)
• accc490 Fix: Files with no failures get "passing" testcase (#9547) (Samuel Levy)
• ab0f66d Docs: Add examples to better show rule coverage. (#9548) (Jonathan Pool)
• 88d2303 Chore: Add object-property-newline tests to increase coverage. (#9553) (Jonathan Pool)
• 7f37b1c Build: test Node 9 on Travis (#9556) (Teddy Katz)
• acccfbd Docs: Minor rephrase in no-invalid-this. (#9542) (Francisc)
• 8f9c0fe Docs: improve id-match usage advice (#9544) (Teddy Katz)
• a9606a3 Fix: invalid tests with super (fixes #9539) (#9545) (Teddy Katz)
• 8e1a095 Chore: enable a modified version of multiline-comment-style on codebase (#9452) (Teddy Katz)
• cb60285 Chore: remove commented test for HTML formatter (#9532) (Teddy Katz)
• 06b491e Docs: fix duplicate entries in changelog (#9530) (Teddy Katz)
• 2224733 Chore: use eslint-plugin-rulesdir instead of --rulesdir for self-linting (#9164) (Teddy Katz)
• 9cf4ebe Docs: add .md to link(for github users) (#9529) (薛定谔的猫)

Commits

The new version differs by 35 commits.

• 1a9a6a5 4.11.0
• ef4d268 Build: changelog update for 4.11.0
• d4557a6 Docs: disallow use of the comma operator using no-restricted-syntax (#9585)
• d602f9e Upgrade: espree v3.5.2 (#9611)
• 4def876 Chore: avoid handling rules instances in config-validator (#9364)
• fe5ac7e Chore: fix incorrect comment in safe-emitter.js (#9605)
• 6672fae Docs: Fixed a typo on lines-between-class-members doc (#9603)
• 980ecd3 Chore: Update copyright and license info (#9599)
• cc2c7c9 Build: use Node 8 in appveyor (#9595)
• 2542f04 Docs: Add missing options for lines-around-comment (#9589)
• b6a7490 Build: ensure fuzzer tests get run with npm test (#9590)
• 1073bc5 Build: remove shelljs-nodecli (refs #9533) (#9588)
• 7e3bf6a Fix: edge-cases of semi-style (#9560)
• e5a37ce Fix: object-curly-newline for flow code (#9458)
• 9064b9c Chore: add equalTokens in ast-utils. (#9500)

There are 35 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

CJS interop?

To my understanding this will load CJS files and have named property access on them? There is ongoing discussion if this is going to be implemented or not. I am hesitant to encourage named properties working. In all proposed interopoperability scenarios however, there is a default export that maps directly to module.exports. Something to bear in mind, and perhaps remove named imports until interop is ironed out.

Incompatible with lastest babel-core release

I couldn't make dynamic-import-webpack work with [email protected]even though it works fine in the version 6.24.0. Is anyone else having the same issue?

add chunk name

Would it make sense to allow for the chunk to be named, with something like import(./foo.js, 'mod_name')?

An in-range update of eslint-plugin-import is breaking the build 🚨

Version 2.4.0 of eslint-plugin-import just got published.

Branch	Build failing 🚨
Dependency	eslint-plugin-import
Current Version	2.3.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

---

Commits

The new version differs by 10 commits.

• 44ca158 update utils changelog
• a3728d7 bump eslint-module-utils to v2.1.0
• 3e29169 bump v2.4.0
• ea9c92c Merge pull request #737 from kevin940726/master
• 8f9b403 fix typos, enforce type of array of strings in allow option
• 95315e0 update CHANGELOG.md
• 28e1623 eslint-module-utils: filePath in parserOptions (#840)
• 2f690b4 update CI to build on Node 6+7 (#846)
• 7d41745 write doc, add two more tests
• dedfb11 add allow glob for rule no-unassigned-import, fix #671

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Default export is not picked up properly

I have the following Babel config:

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "dynamic-import-webpack",
    "transform-decorators-legacy"
  ]
}

I am also using Webpack 2.

In order to make everything work with this setup I have to do some custom stuff in React Router configuration:

<Route path='/' getComponent={() => import('../path/to/component').then(cmp => cmp.default)}/>

Without .then(cmp => cmp.default) it does not work.

not work in webpack3

not work in webpack3

Can I use it in React Native?

Can I use it in React Native?

1.0.2 breaks code splitting

Updating from "^1.0.1" to "^1.0.2" has broken my code splitting. This shouldn't be a breaking change from a patch update.

{
  test: /\.jsx?$/,
  include: [ APP, CONFIG, SERVER ],
  loader: 'babel-loader',
  options: {
    presets: [
      [ 'env', {
        targets: { browsers: [ 'last 2 versions' ] },
        modules: false,
      } ],
      'react',
    ],
    plugins: [
      'dynamic-import-webpack',
      'transform-export-extensions',
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-object-rest-spread',
      'add-module-exports',
      'lodash',
      'ramda',
      'react-require',
      [ 'provide-modules', {
        'debug': 'debug',
      } ],
      'babel-root-import',
    ],
  },
}

Also possibly worth note is:

  resolve: {
    modules: [ SRC, STYLES, 'node_modules' ],
    extensions: [
      '.js', '.jsx', '.scss',
    ],
  },

And using react-loadable/webpack

An in-range update of babel-preset-airbnb is breaking the build 🚨

Version 2.3.0 of babel-preset-airbnb just got published.

Branch	Build failing 🚨
Dependency	babel-preset-airbnb
Current Version	2.2.3
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-preset-airbnb is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 6 commits.

• 9410812 Version 2.3.0
• 98c9c1d Merge pull request #13 from airbnb/babel-preset-env
• a3b73f6 Switches to use babel-preset-env
• 13da4ee [Tests] npm v4.6+ doesn’t work on node < v1
• 3065a5c [Deps] update babel-plugin-syntax-trailing-function-commas, babel-plugin-transform-es2015-template-literals, babel-plugin-transform-es3-member-expression-literals, babel-plugin-transform-es3-property-literals, babel-plugin-transform-exponentiation-operator, babel-plugin-transform-jscript, babel-plugin-transform-object-rest-spread, babel-preset-es2015, babel-preset-react
• bd811d3 [Dev Deps] update eslint, eslint-config-airbnb-base, eslint-plugin-import

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴