问题
When I use System.import() more than once in separate modules one of them doesn't work on first try (Webpack's require function returns modules[moduleId] is undefined), but at second and at subsequent attempts it loads normally.
Folder structure
[webpack-test]
----[modules]
--------foo.js
--------bar.js
--------dateHelper.js
----[node_modules]
----0.app.dist.js
----0.charts.dist.js
----1.app.dist.js
----3.app.dist.js
----app.dist.js
----app.js
----charts.dist.js
----charts.js
----index.html
----package.json
----webpack.config.js
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./app.dist.js"></script>
<script src="./charts.dist.js"></script>
</head>
<body>
</body>
</html>
package.json
{
"name": "webpack-test",
"version": "1.0.0",
"devDependencies": {
"path": "^0.12.7",
"webpack": "^2.2.0-rc.3"
}
}
webpack.config.js
var path = require('path');
module.exports = function () {
return [
// APP:
{
resolve: {
modules: [
path.resolve('./modules/')
]
},
entry: './app.js',
output: {
filename: 'app.dist.js',
}
},
// CHARTS:
{
resolve: {
modules: [
path.resolve('./modules/')
]
},
entry: './charts.js',
output: {
filename: 'charts.dist.js',
}
}
];
};
app.js
export default (function () {
setInterval(function () {
System.import('foo').then(foo => { // breaks at first attempt
console.log('foo imported');
});
System.import('bar').then(bar => {
console.log('bar imported');
});
}, 3000);
})();
foo.js
export default (function foo() {
console.log('foo');
})();
bar.js
export default (function bar() {
console.log('bar');
})();
dateHelper.js
export default (function dateHelper() {
console.log('dateHelper');
})();
charts.js
export default (function charts() {
System.import('dateHelper').then(dateHelper => {
console.log('dateHelper imported');
})
})();
Console output:
0.charts.dist.js:8 dateHelper
charts.dist.js:152 dateHelper imported
app.dist.js:48 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at __webpack_require__ (app.dist.js:48)
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
1.app.dist.js:8 bar
app.dist.js:156 bar imported
app.dist.js:153 foo imported
app.dist.js:156 bar imported
The output should be:
0.charts.dist.js:8 dateHelper
charts.dist.js:152 dateHelper imported
0.app.dist.js:8 foo
app.dist.js:153 foo imported
1.app.dist.js:8 bar
app.dist.js:156 bar imported
app.dist.js:153 foo imported
app.dist.js:156 bar imported
来源：https://stackoverflow.com/questions/41487906/system-import-fails-at-first-attempt-modulesmoduleid-is-undefined