"jsxImportSource": "@builder.io/mitosis" doesn't work with latest vite & @vitejs/plugin-react

[Murderlon]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://stackblitz.com/edit/stackblitz-starters-t21f7m4c?file=test%2Ftest-apps%2Freact%2Fpackage.json

Expected Behaviour

When running npm create @builder.io/mitosis@latest with the default setup and not changing anything besides upgrading test-apps/react Vite and React to latest versions, it should still work.

Actual Behaviour

[plugin:vite:import-analysis] Missing "./jsx-dev-runtime" specifier in "@builder.io/mitosis" package
/home/projects/stackblitz-starters-t21f7m4c/test/library/packages/react/src/todo-app/todo-app.tsx:22:4
1  |  import { Fragment, jsxDEV } from "@builder.io/mitosis/jsx-dev-runtime";
   |                                    ^
2  |  import RefreshRuntime from "/@react-refresh";
3  |  const inWebWorker = typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope;

Additional Information

Likely the same happens for other frameworks when upgrading to Vite 6.

How to reproduce

1. Go to StackBlitz reproduction
2. cd test && npm i && npm -w @test/library run build
3. npm -w @test/server-react run dev
4. See error

[Murderlon]

Temporary workaround is jsxRuntime: 'classic' in the consumer app. This means you have to import React from 'react' everywhere manually or Vite crashes.

Still, it's not okay to demand this change for the entire consumer app just to use a mitosis generated library.

I don't understand yet why @builder.io/mitosis is involved at all since we are just importing a "pure" React package? 🤔

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: react({jsxRuntime: 'classic'})
});

[Murderlon]

Removing "jsxImportSource": "@builder.io/mitosis" from tsconfig.json fixes the problem. Maybe it's not needed or it should be updated to add the expected jsx-dev-runtime as well (see solid for example)

[Murderlon]

Best fix actually is putting a tsconfig.json in library/packages/react/ that has "jsx": "react"

https://www.typescriptlang.org/docs/handbook/jsx.html#basic-usage