Ошибка: не следует импортировать указанную экспортную "версию" (импортированную как "версия")

У меня есть извлеченный проект приложения create-react-app. Я получаю эту ошибку после обновления до webpack 5. Он отлично работал с webpack v4.41.5.

узел v10.23.0 ОС: MacOS Catalina 10.15.7

Ошибка: не следует импортировать именованный экспорт «версия» (импортированный как «версия») из модуля экспорта по умолчанию (скоро будет доступен только экспорт по умолчанию)

Я использую следующую конфигурацию веб-пакета:

{ 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 }

person Muhammad Kamal    schedule 24.11.2020    source источник
comment
Вы нашли решение?   -  person james emanon    schedule 30.03.2021
comment
да. Ошибка возникла из-за следующей строки кода. const packageJson = require('../package.json').   -  person Muhammad Kamal    schedule 30.03.2021


Ответы (2)


Измените следующие

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

к чему-то вроде


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

А затем измените свой доступ с чего-то вроде

  version,

or

  version: version,

to

version: packageInfo.version,
person Splaktar    schedule 22.04.2021
comment
Но не представляет ли это угрозу безопасности и не раскрывает ли клиенту весь package.json? - person amaster; 28.06.2021
comment
Этот вопрос кажется не связанным с вопросом выше. Мой ответ просто отвечает на вопрос, а не на то, является ли это хорошей практикой или безопасностью во всех контекстах. Если у вас есть личное / секретное содержимое в вашем package.json и вы не хотите, чтобы оно когда-либо было доступно в вашем JS-коде, не делайте этого. Как сделать это более безопасным способом, - это отдельный вопрос. - person Splaktar; 08.07.2021
comment
stackoverflow.com/a/50822003/1707323 - person amaster; 08.07.2021

Вы также должны добавить "allowSyntheticDefaultImports": true, к параметрам компиляции в tsconfig.json

person Edwin Witlox    schedule 15.05.2021