97

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

7

12 Answers 12

149

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,

As noted in the comments, there may be cases where you do not want to expose your entire package.json file in the client code.

9
  • 12
    But doesn't this pose a security risk and expose the entire package.json to the client?
    – amaster
    Jun 28, 2021 at 16:38
  • 9
    @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.
    – Jey DWork
    Sep 16, 2021 at 16:35
  • 9
    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. Oct 13, 2021 at 14:17
  • 17
    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) Feb 15, 2022 at 17:25
  • 6
    Update the import statement as import packageInfo from '../../package.json'; @Breakpoint25 May 31, 2022 at 7:32
39

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

4
  • 1
    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 Jan 22, 2022 at 12:09
  • 3
    @NuryagdyMustapayev this worked for me: import * as packageInfo from '../../package.json'; and rename the variable instead of accesing version directly someName = packageInfo
    – Musma
    Jan 27, 2022 at 20:06
  • maybe you also have to add "resolveJsonModule": true, "esModuleInterop": true to your tsconfig.json to be able to apply default import for json
    – Andrei
    Apr 21, 2022 at 21:35
  • may be worth to take a look at stackoverflow.com/questions/49996456/…
    – Andrei
    Apr 21, 2022 at 22:03
30

I solved my issue with the following:

    import packageInfo from './package.json';
    
    
    version = packageInfo.version;
3
  • 1
    This syntax is the correct syntax to use
    – jarodsmk
    Apr 14, 2022 at 5:24
  • 6
    This together with "resolveJsonModule": true, "allowSyntheticDefaultImports": true
    – Pieterjan
    Jun 3, 2022 at 13:48
  • Why does this doesn't expose something in comparison to { key } import?
    – BenjaminK
    Jul 15, 2022 at 10:09
15

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.

2
  • 2
    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. Jan 22, 2022 at 12:03
  • 1
    Best answer, 1 line of code.
    – pxwise
    Jul 18, 2022 at 17:56
9

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

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

For Angular 12 +, Follow this steps:

Step 1: We need to use the require node function in our environment files, so we have to add node types to the compiler options. Open tsconfig.app.json and tsconfig.spec.json files (usually they are located under the ‘src’ folder), add “node” under compilerOptions -> types

...
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": [
      "jasmine",
      "node"
    ]
  }
...

Note: Be sure to have included ‘@type/node’ as a dependency in your ‘package.json’ file.

Step 2: Now open environment.ts (‘src\environments\environment.ts’) and create a property for holding the application version in environment variable as follows ( in our case this will be appVersion) :

export const environment = {
  appVersion: require('../../package.json').version + '-dev',
  production: false
};

Be aware, the path to package.json must be calculated from the environment file’s location.

The require(‘../../package.json’).version will load the version number from the package.json file and + ‘-dev’ will add the ‘-dev’ suffix to it. The suffix isn’t a must, but this way you can identify witch environment file is used for running your application

Following the same approach we have to edit the production environment file as well. In the end the environment.prod.ts will look like this:

export const environment = {
    appVersion: require('../../package.json').version,
    production: true
};

Step 3: Add version number to a component and show it in the application. For example:

import {Component} from '@angular/core';
import {environment} from '../environments/environment';

@Component({
    selector: 'app-root',
    template: `<h1>{{title}}</h1>
    <h3>v{{currentApplicationVersion}}</h3>`
})
export class AppComponent {
    title = 'Demo application for version numbering';
    currentApplicationVersion = environment.appVersion;
}
0
3

This is how I have solved the issue (the rest of the answers didn't work for me). Solution found from here https://www.angularfix.com/2021/10/error-should-not-import-named-export.html

Step 1

add the following to your ts.config file

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

(add them at the end of your "compileroptions" block)

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

Step 2

Import the file you want using the following syntax. Of course change the name of the file to your file name.

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

Step 3

You can now access your variables via this syntax

data.variable_name

This is basically what my file looks like, it compiles successfully

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

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

I had the same error then I realize that the issue was because I used

import {logo} from '../assets/logo.png';

Instead of

import logo from '../assets/logo.png';

The curly braces are only used for import when export is named. For a default export (a file which isn't being exported from another) we do not use { } when we import

0

This is too late but I am adding it because it will help some others. first you have to import the file like import bglogo from "../data/data.json" then create a variable const logo=bglogo.logo; the use it as logo

0

i had the same error and i fixed it by deleting the curly braces {} when importing Logo.png photo ..

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    May 2 at 11:53
0

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/,
],
1
  • Ok as a temporary solution, but not good in long term because Webpack threatens to remove the named export support.
    – Finesse
    Dec 26, 2022 at 15:30
-2

I think you should only change the following import:

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

with the following import:

import version from '../../package.json';
1
  • 11
    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; Sep 14, 2021 at 11:15

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.