Uncaught ReferenceError: process is not defined after upgrading from vue cli v4 to v5

Question

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!

Answer 1

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"),
            },
        },
    }
});