如何为Webpack的动态import（）调整模块形状？

Question

When trying to use import() with webpack using one of our components, I end up getting back an object like this instead of the module:

{
  __webpackChunkName: "_nteract_notebook_app_component_6bdbaebb993d75f174e800c88ff17fc7"
}

Example code:

import("@nteract/notebook-app-component").then(App => {
  // Rely on App!
  // ...
  // Except not, because we've got that strange little webpack object
})

Which is in steep contrast to how lodash loads, which provides the real module.

import("lodash").then(_ => {
  // Full blown lodash here!
})

---

If I look at the generated chunk file, it does have javascript in it. One thing (that might be a red herring) is that some modules have /*! no static exports found */ /*! no static exports found */ in them yet have code as well. Here's the first 10 lines of the chunk:

$ head -n 10 dist/chunks/_nteract_notebook_app_component_6bdbaebb993d75f174e800c88ff17fc7.js
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunks/_nteract_notebook_app_component_6bdbaebb993d75f174e800c88ff17fc7"],{

/***/ "../../../packages/dropdown-menu/src/index.js":
/*!************************************************************************************************!*\
  !*** /Users/kylek/code/src/github.com/nteract/nteract-ext/packages/dropdown-menu/src/index.js ***!
  \************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

After that it's a big chunk of eval ed code this is the actual module.

Answer 1

This is a result of using the next.js preset for babel, due to their custom handling of import() . They create an object with the webpackChunkName to be used in a lookup later using their dynamic() function.

In order to allow dynamic imports with webpack (and babel), you need to not use the next/babel preset on non-next.js apps and add the syntax-dynamic-import plugin to your babelrc.

npm install --save-dev babel-plugin-syntax-dynamic-import

Example babelrc:

{
  "presets": ["env", "react"],
  "plugins": [
    "syntax-dynamic-import",
    "styled-jsx/babel"
  ]
}