Uncaught ReferenceError: process is not defined

[cj3241]

I am getting the error message 'Uncaught ReferenceError: process is not defined' when using a React Spectrum tooltip component. The console reports that the error is thrown by localhost:5173/node_modules/.vite/deps/@adobe_react-spectrum.js?v=4947d2b2

This is the minimal code that reproduces the error. When you hover over the button, the error is thrown after a short delay (i.e. when the tooltip would normally appear).

function App() {
  return (
    <Provider theme={defaultTheme}>
      <TooltipTrigger>
        <Button variant="accent" onPress={() => alert('Hey there!')}>
            Hello React Spectrum!
        </Button>
        <Tooltip>This is a tooltip</Tooltip>
      </TooltipTrigger>
    </Provider>
  )
}

The environment is:

• react-spectrum 3.14.0
• react 19.0.0
• vite 6.3.1
• node 22.15.0

I am hoping that I have made a mistake somewhere or that there is a simple fix, but I cannot find any similar reports in any forum. Can anyone help?

[snowystinger]

Have you followed advice here? vitejs/vite#2278
I'm not sure how this wasn't a problem using React already, maybe some loader/transpiler is handling React specifically in Vite, I don't know enough about it. We're discussing if we should be doing something differently. For now, though, we're following the pattern set out by React itself.

[cj3241]

Thanks for the hint Robert
I had tried that approach and discarded it because it did not fix the problem. Re-applying it (as below) still made no difference.

My vite.config.ts file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import replace from '@rollup/plugin-replace'

export default defineConfig({
  plugins: [
    react(),
    replace({
      'process.env': 'import.meta.env'
    })
  ],
})

[snowystinger]

did it change the error message? can you provide a minimal reproduction application on codesandbox or stackblitz or just a github project?

[cj3241]

Hi Robert

There was no change in the error message.

I have uploaded the test app to Github: https://github.com/cj3241/spectrum-eval
It is basically just an out-of-the-box vite starter app, with all the default example code removed and the new app.tsx added.

Thanks again for your help with this
Chris

[snowystinger]

I'm not sure why they do it so differently and I still don't know how React manages to work with it in their source. But you don't need the replace module.

Instead, just add this to your vite.config.ts

  define: {
    'process.env': {}
  }

https://vite.dev/config/shared-options.html#define

You could change the keys in it depending on what you're doing. For instance you could use mode https://vite.dev/config/#conditional-config in here to set NODE_ENV to production or dev so that you get our new warning and error messages when you're developing but you don't need to worry about them in your production build.

[cj3241]

That's fixed it !!!!

Thank you so much for your help, Rob. It really is appreciated.