Invalid define value

[jaskp]

Summary

Adding define entries to vite configs breaks compilation with the following error:

[vite:define] Transform failed with 1 error:
error: Invalid define value (must be an entity name or valid JSON syntax): {"foo": bar}
file: /@react-refresh
    at failureErrorWithLog (/Users/admin/git/webextvitetest/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/admin/git/webextvitetest/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:755:50
    at responseCallbacks.<computed> (/Users/admin/git/webextvitetest/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:622:9)
    at handleIncomingPacket (/Users/admin/git/webextvitetest/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:677:12)
    at Socket.readFromStdout (/Users/admin/git/webextvitetest/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:600:7)
    at Socket.emit (node:events:518:28)
    at addChunk (node:internal/streams/readable:559:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
    at Readable.push (node:internal/streams/readable:390:5)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter],
  code: 'PLUGIN_ERROR',
  plugin: 'vite:define',
  hook: 'transform',
  id: '/@react-refresh',
  watchFiles: [ '/Users/admin/git/webextvitetest/src/popup.html' ]
}

Reproduction

Use the react-ts template and add a define entry to the vite config, for example:

export default defineConfig({
  plugins: [
    react(),
    webExtension({
      manifest: generateManifest,
    }),
  ],
  define: {foo: 'bar'} // <--- here
});

Environment

  System:
    OS: macOS 15.0
    CPU: (8) arm64 Apple M1
    Memory: 134.77 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 9.11.0 - ~/Library/pnpm/pnpm
    Watchman: 2024.04.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 129.0.6668.71
    Safari: 18.0
  npmPackages:
    vite: ^5.0.0 => 5.4.8
    vite-plugin-web-extension: ^4.0.0 => 4.2.0

[aklinker1]

Vite has made changes to how it handles define, did you try this?

  define: {foo: '"bar"'}

[jaskp]

Certain values do avoid the error, but unfortunately I need define: {global: 'globalThis'}, i.e. replacing an identifier with another identifier, not a string literal.