When I attempt to utilize import() with webpack in one of our components, instead of getting the module, I receive an object like this:
{
__webpackChunkName: "_nteract_notebook_app_component_6bdbaebb993d75f174e800c88ff17fc7"
}
Here's an example of the code:
import("@nteract/notebook-app-component").then(App => {
// Use App here!
// ...
// Unfortunately, we're not able to use it properly due to the strange webpack object returned
})
This behavior is quite different from how lodash loads and provides the actual module.
import("lodash").then(_ => {
// Full implementation of lodash is available here!
})
Upon examining the generated chunk file, I noticed that it does contain JavaScript code. One peculiar thing to note is that some modules contain /*! no static exports found */ even though they have code within them. Here are the first 10 lines of the chunk file:
$ 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";
Following that section, there is a large portion of code that has been evaluated using eval, which represents the actual module.