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?

CodePudding user response：

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