Webpack混合了默认导入和命名导入

Question

在更新一些部门（react-bootstrap）时，我遇到了反应错误

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

在其他设置（故事书，创建react应用，codesandbox等）中编译相同的代码不会显示该问题。

就像我们导入的组件（react-bootstrap/Dropdown一样，导入另一个导致问题的组件（react-overlays/Dropdown）。

我将错误跟踪到没有输出的这一行： /* harmony import */ var react_overlays_Dropdown__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_overlays_Dropdown__WEBPACK_IMPORTED_MODULE_4__);

相反，无效代码使用..._MODULE_4__['default']语法，该语法失败并引发错误。

Answer 1

经过数小时的搜索，我发现了问题所在……

更改此

module.exports = {
    resolve: {
        modules: [path.join(__dirname, 'node_modules')]
    }
};

对此

module.exports = {
    resolve: {
        modules: ['node_modules']
    }
};

解决了问题。