How to securely import version from package.json while respecting Error: Should not import the named export 'version'?

Question

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?

Sibylle

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. – Defect

Answer 1

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

Surprising

For React, it needs to be REACT_APP_VERSION (has to start with REACT_APP). – Sibylle

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 – Garey

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. – Sounder

@Garey 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 – Sounder