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

Question

I have an ejected create-react-app project. I am getting this error after updating it to webpack 5. It was working fine with webpack v4.41.5

node v10.23.0 OS: MacOS Catalina 10.15.7

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

I am using the following webpack config:

{ 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

Change the following

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

to something like

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

And then change your access from something like

  version,

or

  version: version,

to

version: packageInfo.version,

Answer 2

You should also add "allowSyntheticDefaultImports": true, to the compileroptions in the tsconfig.json

Answer 3

I think you should only change the following import:

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

with the following import:

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