[bug] process is not defined error in Vue app

[itsacoyote]

Link to minimal reproducible example

https://stackblitz.com/edit/sb1-khypems9?file=src%2Fviews%2FHome.vue

Summary

When running a Vue project using Vite, an error pops up "Uncaught ReferenceError: process is not defined" in reference to a line of code

// node_modules/@reown/appkit-core/dist/esm/src/utils/ConstantsUtil.js
var SECURE_SITE = process.env["NEXT_PUBLIC_SECURE_SITE_ORIGIN"] || "https://secure.walletconnect.org";

This breaks the app unless you add define: { 'process.env': process.env }, in vite.config.ts, which probably shouldn't be the solution to this. It took me a while to figure out this problem, others shouldn't experience this frustration.

Also, the Vue wagmi stackblitz fork link from the appkit-web-examples is broken during npm install. I had to make my own stackblitz example.

List of related npm package versions

"@reown/appkit": "^1.6.9",
"@reown/appkit-adapter-wagmi": "^1.6.9",
"@tanstack/vue-query": "^5.67.2",
"@wagmi/vue": "^0.1.12",
"pinia": "^2.1.7",
"viem": "^2.23.9",
"vue": "^3.4.38",
"vue-router": "^4.2.5"

Node.js Version

v18.20.3

Package Manager

npm@10.2.3

[linear]

APKT-2458 [bug] process is not defined error in Vue app

[atvor]

I faced an issue where a library tried to access process.env variables in a Vite app, but Vite doesn't automatically provide process.env in client-side code.

To resolve this, I used the vite-plugin-env-compatible polyfill, which makes process.env accessible in Vite projects.

npm install vite-plugin-env-compatible --save-dev

and add to vite.config.js

import EnvCompatible from 'vite-plugin-env-compatible';

export default {
  plugins: [EnvCompatible()],
};

[Sam-Newman]

Thanks for raising this we will pick it up!