ReferenceError: React is not defined when using JS in Vite

[brookslybrand]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Start a new vite-based remix app

npx create-remix@nightly --template remix-run/remix/templates/unstable-vite

Add a route with a .jsx extension and navigate to it

See your browser blow up

Expected Behavior

Router renders

Actual Behavior

Route does not render unless you manually install @vittejs/plugin-react and update the config to be

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [remix(), react()],
});

I'm pretty confident we don't want to users to manually have to import the react plugin. At a minimum, js/jsx should definitely work out of the box

[hi-ogawa]

I'm attempting to fix this issue in #7888
I think the workaround could work directly from local vite config by:

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
  //
  // WORKAROUND
  //
  esbuild: {
    jsx: "automatic"
  }
});

[markdalgleish]

Fixed by #7888.