TypeError: jsxDEV is not a function

[wojtekmaj]

Shortest repro for me was just:

index.test.tsx

<div />;

I don't see anything suspicious in my configs. My vitest.config.ts:

import { defineConfig } from 'vitest/config';
import reactNative from 'vitest-react-native';
import react from '@vitejs/plugin-react';

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

My tsconfig.json:

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

Setting compilerOptions.jsx to react, react-jsx, react-jsxdev doesn't seem to do the trick.

Removing react plugin from vitest.config.ts and adding import React from react'; appears to work, but is not an option.

Any ideas? 🤔

[wojtekmaj]

This isn't ideal, but:

import { defineConfig } from 'vitest/config';
import reactNative from 'vitest-react-native';
import react from '@vitejs/plugin-react';

export default defineConfig({
- plugins: [reactNative(), react()],
+ plugins: [reactNative(), react({ jsxRuntime: 'classic' })],
  resolve: {
    alias: [{ find: 'recoil', replacement: 'recoil/native/index.js' }],
  },
});

did the trick!

[Tucker-Eric]

Came across this in a different context and found this discussion. If this is the same issue then it was as easy as setting NODE_ENV=test for the fix. It didn't need to be test, it just can't be set to production when vite's mode is not set to production