I'm working on an app where I've updated the frontend to use vue cli v5 from v4 and am getting a runtime error: Uncaught ReferenceError: process is not defined. Process.version is referenced in the jsonwebtoken library I'm using. See below:

Uncaught ReferenceError: process is not defined error

jsonwebtoken reference

I had a few pollyfill module related errors during compilation which I fixed below due to vue cli v5 using webpack 5:

fallback: {
    crypto: require.resolve('crypto-browserify'),
    buffer: require.resolve('buffer'),
    util: require.resolve('util'),
    stream: require.resolve('stream-browserify')
  }

In my webpack config file I've tried adding/setting the process.env variable:

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': ''
    }),
    new Dotenv({ systemvars: true })
  ],

Has anyone run into a similar issue upgrading to vue cli v5? Thanks!

CodePudding user response：

Try that:

const webpack = require('webpack');

const {defineConfig} = require('@vue/cli-service');

module.exports = defineConfig({
    transpileDependencies: true,

    configureWebpack: {
        //process: {env: {}},
        plugins: [
            // fix "process is not defined" error:
            // (do "npm install process" before running the build)
            new webpack.ProvidePlugin({
              process: 'process/browser',
            }),
        ],
        resolve: {
            fallback: {
                http: require.resolve("stream-http"),
                https: require.resolve("https-browserify"),
                crypto: require.resolve("crypto-browserify"),
                stream: require.resolve("stream-browserify"),
                os: require.resolve("os-browserify/browser"),
                url: require.resolve("url"),
                assert: require.resolve("assert"),
            },
        },
    }
});