Question

严格来说，我遇到了一个与Webpack的代码拆分有关的奇怪问题 - 通过System.import导入模块。问题是某个System.import总是在第一次尝试时中断，但是在第二次尝试时以及之后它正常工作。

展会中有四位演员：app.js，mock.js，request_1.js和contact_support.js。

1 app.js - 在加载时：导入mock.js，在点击按钮时动态导入contact-support.js

import mock from 'mock'; // removing this solves problem with contact-support.js, but why?
(...)
$('document').ready(function () {
            $('body').on('click', '[data-target="#contactSupport"]', function () {
                System.import('contact-support')
                    .then(module => {
                        console.log('contact-support loaded');
                    });
            });
});

的 2 mock.js - 正确加载，动态导入request_1.js

(...)
System.import('request_1').then(response => {
    return fnOK(response.default());
});

第3。 request_1.js - 正确加载

的 4。 contact-support.js - 未在app.js的第一个System.import 中加载，然后正常加载

<小时/> 在初始加载时，一切似乎都正常加载，但当我点击触发app.js中应该加载contact-support.js的System.import的按钮时，会发生这种情况：

首先点击app.js（应动态加载contact-support.js） - 休息：

TypeError：无法读取未定义的属性“call”


`modules [moduleId] .call（module.exports，module，module.exports， webpack_require ）

第二次点击app.js - 工作：

已加载联系支持

如果我从import mock from 'mock'删除app.js，那么contact-support.js总是正确加载，因此看起来Webpack在识别应该加载哪个块时遇到问题。

使用来自mock.js（由app.js导入）的当前配置文件块也会分配给原始app.js，因此它们可能会与分配给{的其他块发生冲突{1}}，例如app.js。为了防止这种情况，我已经从使用数字切换到块文件名中的块哈希，但这并没有解决问题。

编辑：我已设法尽可能以simple example重现该问题。

导入模块中的System.import会破坏其他System.import

0 个答案: