10

After updating to Webpack 5, I'm getting this error:

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

Super-simple code example:

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

export const appVersion = version;

This question gives a solution of import * as packageInfo from '../../package.json'; version: packageInfo.version,, but this imports all of package.json, which, as some of the comments on the answer note, could be considered a security risk.

All I need is the version number; if I have to import the entire package.json and potentially expose that to my users, it would be better to introduce code duplication and just create and maintain two separate variables:

  1. the version in package.json
  2. the version in my js app

However, I am guessing there is a secure way to import package.json without getting Webpack 5 to complain and I just don't know about it. Is there such a way?

Patrick Kenny
  • 4,515
  • 7
  • 47
  • 76
  • I had the same concern and checked the output (I am using Angular 12, not plain Webpack 5 but I don't think it matters) and the bundle only contains the `version` property, everything else from the package.json has been removed by the tree shaking. – Mistic Jan 28 '22 at 14:19

1 Answers1

8

Solving this without importing and exposing package.json to the app

  • Fetching variables from .env file by getting from npm secure variables ($npm_package_version) instead of importing whole package.json file as object list.

.env

VUE_APP_VERSION=$npm_package_version

app.vue

 data() {
    return {
      projectVersion: process.env.VUE_APP_VERSION
}
  • Fetching data from env and display in frontend as computed variable

Note: change in server configuration required server restart or fresh deployment

  • Step 1 - npm version minor/major/patch -> Updates automatically in packages.json

       (Please follow semantic versioning & use commands individually.)

  • Step 2- Deploy and version refreshed automatically

Pallav Chanana
  • 617
  • 5
  • 10
  • 3
    For React, it needs to be `REACT_APP_VERSION` (has to start with `REACT_APP`). – Patrick Kenny Dec 14 '21 at 12:27
  • 1
    I like this solution, in terms of security, but there is one big drawback ```APP_VERSION=$npm_package_version``` This requires that I always have this in an .env file, and its STRONGLY recommended not to commit your .env file to the repository. Now since the line in the .env is nice in the way that it requires no input, every consumer has to create this file. Is there any way around this? I'm not talking about production with build pipelines here, I'm talking about development – Yonder Feb 23 '22 at 09:50
  • 1
    Afaiu this answer does not detail how to expose `$npm_package_version` to the `.env` file and actually load it to `process.env`. One could use `dotenv` and `dotenv-expand`. – khelkun Mar 03 '22 at 18:44
  • @Yonder since dotenv accept a path option to specify a different file to load distinct from '.env' like '.env.app.version', you can load any file you which and commit it to your repo. Also `dotenv.config()` can be called any time you wish so you can load your '.env' and '.env.app.version' to `process.env` – khelkun Mar 03 '22 at 18:53