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

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,

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.

Answer 2

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

Answer 3

I solved my issue with the following:

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

Answer 4

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.

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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/,
],

Answer 10

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

Answer 11

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

Answer 12

I think you should only change the following import:

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

with the following import:

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