Webpack 5 错误：不应从默认导出模块导入命名导出“foo”（导入为“bar”）答案

【问题标题】：Webpack 5 Error: Should not import the named export 'foo' (imported as 'bar') from default-exporting moduleWebpack 5 错误：不应从默认导出模块导入命名导出“foo”（导入为“bar”）
【发布时间】：2021-10-08 22:58:51
【问题描述】：

升级到 Webpack 5 后，我现在遇到了这个错误：

./node-modules/@fizz/my-library/components/MyComponent/MyComponent.js:97:19-39 - 错误：不应导入命名导出“foo”（导入为“bar”）来自默认导出模块（仅默认导出很快可用）

问题出现在我无法修改的导入库中。有问题的导入是这样的：

import { foo as bar } from '../ParentComponent.css.json';

ParentComponent.css.json 看起来像这样：

{
    "foo": { 
        "a": 1,
        "b": 2,
        "c": 3
    },
    ...
}

我在 tsconfig.json 中有以下内容：

"compilerOptions": {
    "module": "commonjs",
    "moduleResolution": 'node",
    "target": "es2015",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    ...
}

关于如何解决此错误的任何想法？我试过删除 node_modules 和 package-lock.json 但没有成功。

【问题讨论】：

标签： javascript typescript webpack tsconfig

【解决方案1】：

您面临的问题与如何在 JavaScript 中构建模块有关。

您可以从文件或命名的文件中导出默认模块。区别如下：
export default myFunction vs export myFunction
显而易见的结论是，一个特定文件不能包含多个默认导出。

所以要导入这个文件，实际上你可以随意命名它，因为无论你怎么称呼它，JavaScript 都会默认导出的对象并正确引用它。

【讨论】：

我不确定我是否遵循 - 如果我无法修改导入行，我该如何解决此错误？
我的错。我没有理解这个问题。我以为你已经导入了这个文件。这是包所有者方面的一个重大错误，如果您无法修改它，那么这是一个死胡同。虽然，我认为在更新 webpack 时，您还运行了 npm install，导致包更新。也许您应该尝试更新 package-lock 中的包版本，以检查您无法编辑的包的先前版本是否包含此错误？