process is not defined in content script
chan-dev opened this issue · comments
Describe the bug
The build is successful, everything works fine except for the content script.
However, it shows an error Uncaught ReferenceError: process is not defined
on development mode running pnpm run dev
.
Here's the stack trace on the page of the built extension.
Reproduction
Build the newly cloned repo and check the content script
System Info
System:
OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Memory: 3.52 GB / 7.66 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
Browsers:
Brave Browser: 106.1.44.112
Chrome: 106.0.5249.119
Firefox: 105.0
Used Package Manager
pnpm
Validations
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- The provided reproduction is a minimal reproducible of the bug.
Install @rollup/plugin-replace, then modify vite.config.content.ts
:
export default defineConfig({
...
plugins: [
...sharedConfig.plugins || [],
replace({
values: {
'process.env.NODE_ENV': `"${env.NODE_ENV || 'production'}"`,
},
}),
],
})
@TP-O thanks. This solved my issue.
One minor modification is that I have to wrap the value in JSON.stringify
.
@ivyraine It seems to work fine on my end. Although i'm just testing on the dev build using pnpm run dev
Here's exactly what i put on my vite.config.content.ts
plugins: [
...sharedConfig.plugins || [],
replace({
values: {
'process.env.NODE_ENV': JSON.stringify(`${process.env.NODE_ENV || 'production'}`),
},
}),
],
Were there any errors on your end? Maybe it has something to do with the webext-bridge
plugin.
https://github.com/zikaari/webext-bridge
@TP-O Just realized that you no longer need to install a separate plugin, but rather simply define it under the sharedConfig
in vite.config.ts
file.
define: {
'__DEV__': isDev,
'process.platform': null,
'process.version': null,
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
},
Have you tried this one?
@chan-dev Yes, it works :D
Hi there 👋
I have tried both methods, but running yarn run dev
and loading the extension into Chrome still returns a Uncaught ReferenceError: process is not defined
.
For the record, I'm using the mv3
branch and the issue comes when I try to display a stored variable into background/index.ts
:
// background/index.ts
import { storageDemo } from '~/logic/storage'
console.log('Current - Storage ::: ', storageDemo);
Will result in
Uncaught ReferenceError: process is not defined
at node_modules/vue/index.js (index.js:3:1)
at __require (index.mjs:11:50)
at index.mjs:1:15
when I try to display a stored variable into background/index.ts:
background/index.ts
is bundled by tsup, so you should add the config in tsup.config.ts
:
// tsup.config.ts
export default defineConfig(() => ({
define: {
__DEV__: JSON.stringify(isDev),
'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
},
}))