process is not defined in content script

[chan-dev]

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

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[TP-O]

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'}"`,
      },
    }),
  ],
})

[chan-dev]

@TP-O thanks. This solved my issue. One minor modification is that I have to wrap the value in JSON.stringify.

[bytewife]

I also have this issue; content scripts are not executed.

@chan-dev were you able to get content scripts to respond to messages using onMessage with @TP-O 's solution?

[chan-dev]

@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

[chan-dev]

@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?

[TP-O]

@chan-dev Yes, it works :D

[jice-lavocat]

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

[tmkx]

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'),
  },
}))