Webpack 5 Error: Should not import the named export 'foo' (imported as 'bar') from default-exporting module

Question

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

./node-modules/@fizz/my-library/components/MyComponent/MyComponent.js:97:19-39 - Error: Should not import the named export 'foo' (imported as 'bar') from default-exporting module (only default export is available soon)

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

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 但没有成功。

Answer 1

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

您可以从文件或命名模块中导出默认模块。差异看起来是这样的：
export default myFunction 对比 export myFunction
显而易见的结论是，一个特定文件不能包含多个默认导出。

因此，要导入此文件，您实际上可以随意命名它，因为无论您如何命名，JavaScript 都会采用默认导出的对象并正确引用它。

Webpack 5 Error: Should not import the named export 'foo' (imported as 'bar') from default-exporting module

Webpack 5 Error: Should not import the named export 'foo' (imported as 'bar') from default-exporting module

javascript

typescript

webpack

tsconfig