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

WebpackWebpack 5

Webpack Problem Overview

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

OS: MacOS Catalina 10.15.7
node: v10.23.0

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

Webpack Solutions

Solution 1 - Webpack

As noted in the comments, it is not recommended to expose your package.json file like this.

Change the following

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

to something like

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

And then change your access from something like

version,

or

version: version,

to

version: packageInfo.version,

Solution 2 - Webpack

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

Solution 3 - Webpack

I solved my issue with the following:

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

Solution 4 - Webpack

With latest version of create react app, following syntax works:

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

Solution 5 - Webpack

How about const appVersion = require('./package.json').version; ?

Using this we are not actually shipping the whole package.json but just bringing in the version from it.

Solution 6 - Webpack

Just for further reference this does not happen with just the package.json I had the same problem with packages from the @atlaskit after an update to webpack v5 and found good explanation and fix 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.

To work around use in webpack config:

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

Solution 7 - Webpack

I think you should only change the following import:

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

with the following import:

import version from '../../package.json';
Categories
Recommended Webpack Solutions

Previous Solution:

Android Emulator Render Issue - After macOS Big Sur Update

AndroidAndroid StudioAndroid EmulatorMacos Big-Sur

Next Solution:

springboot Upgrade from 2.3.5.RELEASE to 2.4.1- ClassNotFoundException: org.springframework.boot.context.properties.ConfigurationBeanFactoryMetadata

Spring BootKotlinGradleSpring Cloud

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMuhammad KamalView Question on Stackoverflow
Solution 1 - WebpackSplaktarView Answer on Stackoverflow
Solution 2 - WebpackEdwin WitloxView Answer on Stackoverflow
Solution 3 - WebpackHadi MasoumiView Answer on Stackoverflow
Solution 4 - WebpackYuvraj PatilView Answer on Stackoverflow
Solution 5 - WebpackNihar H RupareliyaView Answer on Stackoverflow
Solution 6 - WebpackFlummiboyView Answer on Stackoverflow
Solution 7 - WebpackMariya MView Answer on Stackoverflow