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

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).

Solution 1

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

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

Solution 3

I solved my issue with the following:

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

Solution 4

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

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

Solution 5

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.

View more solutions

Comments

[james emanon]

Did you find a solution?

[Muhammad Kamal]

yes. The error was because of the following line in the code. const packageJson = require('../package.json').

[Pallav Chanana]

Solution here stackoverflow.com/questions/70298948/…

[Wesley]

Here's another option stackoverflow.com/questions/41123631/…

[Muhammad Kamal]

@karel I am writing this comment in response to your edit. The webpack config is not useful to the question. The only thing that matters is the upgrade to webpack 5 form webpack 4.

[karel]

I removed the webpack config.

[amaster]

But doesn't this pose a security risk and expose the entire package.json to the client?

[Splaktar]

That question seems unrelated to the question above. My answer simply addresses the question, not whether it is a good practice or secure in all contexts. If you have private/secret contents in your package.json and don't want them to ever be available in your JS code, then don't do this. How to do this in a more secure way should be covered in a separate question.

[Danial Delkhosh]

import * as packageInfo from '../../package.json'; version: packageInfo.version,

[Muhammad Kamal]

Welcome to StackOverflow. What you are suggesting can be confusing because the imported object will contain the complete json object from the package.json file and not just the version. I think a better alternative would be: import packagejson from '../../package.json'; const {version} = packageJson;

[Jey DWork]

@Splaktar even without secrets in the package.json I find this extremely unsecure. Most devs and maintainers, even with experience, will not treat the package.json as something in the public domain. And with an implementation like that 'hidden' in the codebase really painful shots in the foot lie ahead. Especially so since this error now comes up for Angular 12 which is client-side technology. So a clearly visible HEADS-UP would be fitting imho.

[Alexey Grinko]

Agree with @JeyDWork, this solution should be flagged as potential security risk. If your package.json doesn't contain confidential data now, who will guarantee that other developers won't put it there years later, without knowing that it is exposed to production? And even without any secrets, normally, a business doesn't want to expose information about its dependencies and devDependencies from the package.json to everybody - it makes it easier to find vulnerabilities and penetrate the application.

[Patrick Kenny]

Follow-up question on how to do this securely here: stackoverflow.com/questions/70298948/…

[Nuryagdy Mustapayev]

I imported JSON files in the unit testing codes in my Angular project. I started getting this error after upgrading the Angular version to v12. In my test code, I already was importing in the correct way as described in the accepted answer, but I was getting this error. Changing to require is solved for me. thanks.

[Nuryagdy Mustapayev]

tried on Angular v12 (after upgrading from v9). Did not work in my case. tried to add both to tsconfig.json and tsconfig.app.json

[Musma]

@NuryagdyMustapayev this worked for me: import * as packageInfo from '../../package.json'; and rename the variable instead of accesing version directly someName = packageInfo

[Breakpoint25]

This does not fix the issue, you will now get this Warning instead. Should not import the named export 'version' (imported as 'packageJson') from default-exporting module (only default export is available soon)

[jarodsmk]

This syntax is the correct syntax to use

[Andrei]

maybe you also have to add "resolveJsonModule": true, "esModuleInterop": true to your tsconfig.json to be able to apply default import for json

[Andrei]

may be worth to take a look at stackoverflow.com/questions/49996456/…

[Antajo Paulson]

Update the import statement as import packageInfo from '../../package.json'; @Breakpoint25

[Pieterjan]

This together with "resolveJsonModule": true, "allowSyntheticDefaultImports": true