错误：不应导入命名的导出“版本”（导入为“版本”）

Question

我有一个弹出的 create-react-app 项目。将其更新到 webpack 5 后，我收到此错误。它在 webpack v4.41.5 上运行良好

node v10.23.0 操作系统：MacOS Catalina 10.15.7

错误：不应从默认导出模块导入命名的导出“版本”（导入为“版本”）（仅默认导出很快可用）

我正在使用以下 webpack 配置：

{ mode: 'production',
  bail: true,
  devtool: 'source-map',
  entry:
   [ '/Users/Homeoffice/Documents/toolbox-frontend-clone2/src/index.js' ],
  output:
   { path: '/Users/Homeoffice/Documents/toolbox-frontend-clone2/build',
     pathinfo: false,
     filename: 'static/js/[name].[contenthash:8].js',
     chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
     publicPath: '/',
     devtoolModuleFilenameTemplate: [Function],
     globalObject: 'this' },
  optimization:
   { minimize: false,
     minimizer: [ [TerserPlugin], [OptimizeCssAssetsWebpackPlugin] ],
     splitChunks: { chunks: 'all', name: false },
     runtimeChunk: { name: [Function: name] } },
  resolve:
   { modules:
      [ 'node_modules',
        '/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules' ],
     extensions:
      [ '.web.mjs', '.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx' ],
     alias: { 'react-native': 'react-native-web' },
     plugins: [ [Object], [ModuleScopePlugin] ] },
  resolveLoader: { plugins: [ [Object] ] },
  module: { strictExportPresence: true, rules: [ [Object] ] },
  plugins:
   [ HtmlWebpackPlugin { userOptions: [Object], version: 5 },
     InlineChunkHtmlPlugin { htmlWebpackPlugin: [Function], tests: [Array] },
     InterpolateHtmlPlugin { htmlWebpackPlugin: [Function], replacements: [Object] },
     ModuleNotFoundPlugin {
       appPath: '/Users/Homeoffice/Documents/toolbox-frontend-clone2',
       yarnLockFile: undefined,
       useYarnCommand: [Function: bound useYarnCommand],
       getRelativePath: [Function: bound getRelativePath],
       prettierError: [Function: bound prettierError] },
     DefinePlugin { definitions: [Object] },
     MiniCssExtractPlugin { options: [Object], runtimeOptions: [Object] },
     ManifestPlugin { opts: [Object] },
     IgnorePlugin {
       options: /^\.\/locale$/,
       checkIgnore: [Function: bound checkIgnore] },
     GenerateSW { config: [Object] },
     [Function] ],
  node: false,
  performance: false }

Answer 1

更改以下内容

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

像

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

然后从类似的东西更改您的访问权限

  version,

或者

  version: version,

到

version: packageInfo.version,

Answer 2

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

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

Answer 3

您还应该添加 "allowSyntheticDefaultImports": true, 到 tsconfig.json 中的 compileroptions

Answer 4

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

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

Answer 5

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

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

Answer 6

这就是我解决问题的方法（其余答案对我不起作用）。从这里找到的解决方案https://www.angularfix.com/2021/10/error-should-not-import-named-export.html

步骤1

将以下内容添加到您的ts.config文件中

"resolveJsonModule": true,
"esModuleInterop": true,

（将它们添加到“compileroptions”块的末尾）

  "compilerOptions": {
    // 
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },

第2步

使用以下语法导入所需的文件。当然将文件名更改为您的文件名。

import {default as data} from '../../package.json';

步骤3

您现在可以通过此语法访问变量

data.variable_name

这基本上就是我的文件的样子，它编译成功

import {default as authInfo} from '../../auth_config.json';

export const environment = {
  // 
  domain: authInfo.domain,
  clientId: authInfo.clientId
};