GraphiQL dev server appears to be broken

[bgentry]

Describe the bug

I was going to take care of #2650 by adding support for additional Graphiql context configs. As part of that, I cloned the repo, ran pnpm i, and started the vite server in packages/graphiql with pnpm start.

Unfortunately, it appears that this dev server is broken. The following error occurs for me when trying to load this page, with no changes to the repo on a fresh clone:

Uncaught TypeError: RefreshRuntime.injectIntoGlobalHook is not a function
    at (index):6:16

I noticed there are quite a few out-of-date dependencies here, including vite, graphql, graphiql, react, etc. I tried upgrading these to see if it would resolve the issue but it did not.

Your Example Website or App

https://github.com/dotansimha/graphql-yoga

Steps to Reproduce the Bug or Issue

1. Clone this repo
2. run pnpm i
3. cd packages/graphiql && pnpm start
4. open browser to http://localhost:4001/, see that the page encounters an error after load which prevents the UI from loading

Expected behavior

I should be able to load the GraphiQL UI when developing this repo.

Screenshots or Videos

No response

Platform

• OS: macOS
• NodeJS: v20.5.0
• @graphql-yoga/* version(s): main

Additional context

If it turns out that this flow still works for any of the maintainers, I'm happy to help debug what it is about my local setup that's causing this to fail on a fresh clone.

[EmrysMyrddin]

Hi!
Not sure why it was like this, but it seems that the problem comes from the vite config:

  define: {
    'process.env.NODE_ENV': '"production"',
  },

This enables production build, and it seems that React Fast refresh exports are not the same when running with production mode enabled...

Remove this lines and it should start as expected :-)