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