Error: Should not import the named export 'version' (imported as 'version')

Question

我有一个弹出的 create-react-app 项目。将它更新到 webpack 5 后出现此错误。它在 webpack v4.41.5

上运行良好

OS：MacOS卡特琳娜 10.15.7
节点：v10.23.0

Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon).

Answer 1

如评论中所述，不建议像这样公开您的 package.json 文件。

更改以下内容

import { version } from '../../package.json';

类似

import * as packageInfo from '../../package.json';

然后更改您的访问权限，例如

version,

或

version: version,

到

version: packageInfo.version,

Answer 2

您还应该添加 "allowSyntheticDefaultImports": true, tsconfig.json

中的编译器选项

Answer 3

我认为您应该只更改以下导入：

import { version } from '../../package.json';

使用以下导入：

import version from '../../package.json';

Answer 4

使用最新版本的 create react app，以下语法有效：

import rData from './registration-form.json';

Answer 5

怎么样 const appVersion = require('./package.json').version; ?

使用它，我们实际上并没有运送整个 package.json，而只是引入其中的版本。

Answer 6

我通过以下方式解决了我的问题：

    import packageInfo from './package.json';
    
    
    version = packageInfo.version;

Answer 7

仅供进一步参考，仅 package.json 不会发生这种情况在更新到 webpack v5 后，我在 @atlaskit 的包中遇到了同样的问题，并找到了很好的解释和修复 there:

You can import JSON files directly into Javascript files. This is supported by node and by Webpack. In older versions of Webpack you could import either the default export which represents the whole JSON blob or a named export for each top level property in the JSON file.

As of Webpack 5 the named export is deprecated which mirrors the behaviour of node.

解决在 webpack 配置中使用的问题：

ignoreWarnings: [
/only default export is available soon/,
],

Answer 8

为Angular12+, 按照以下步骤操作：

第 1 步： 我们需要在我们的环境文件中使用 require 节点函数，所以我们必须在编译器选项中添加节点类型。打开 tsconfig.app.json 和 tsconfig.spec.json 文件（通常它们位于“src”文件夹下），在 compilerOptions -> types

下添加“node”

...
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": [
      "jasmine",
      "node"
    ]
  }
...

注意：请务必将“@type/node”作为依赖项包含在“package.json”文件中。

第 2 步： 现在打开 environment.ts ('src\environments\environment.ts') 并创建一个属性用于在环境变量中保存应用程序版本，如下所示（在我们的例子中这将是 appVersion）：

export const environment = {
  appVersion: require('../../package.json').version + '-dev',
  production: false
};

请注意，package.json 的路径必须根据环境文件的位置计算。

require('../../package.json').version将从package.json文件加载版本号，+'-dev'将添加'-dev'它的后缀。后缀不是必须的，但这样您可以识别环境文件用于运行您的应用程序

按照同样的方法，我们也必须编辑生产环境文件。最后 environment.prod.ts 将如下所示：

export const environment = {
    appVersion: require('../../package.json').version,
    production: true
};

第 3 步： 将版本号添加到组件并在应用程序中显示。例如：

import {Component} from '@angular/core';
import {environment} from '../environments/environment';

@Component({
    selector: 'app-root',
    template: `<h1>{{title}}</h1>
    <h3>v{{currentApplicationVersion}}</h3>`
})
export class AppComponent {
    title = 'Demo application for version numbering';
    currentApplicationVersion = environment.appVersion;
}

Error: Should not import the named export 'version' (imported as 'version')

Error: Should not import the named export 'version' (imported as 'version')

webpack

webpack-5