react/jsx-runtime breaks dev builds

[katanazero86]

Describe the bug

I am sharing a link to my project repository.
https://github.com/katanazero86/react-clone/tree/master/packages/react-clone

If you get clone and run npm run dev after npm i, it works normally.

However, after touching tsconfig to build the project, an error occurs.

/packages/components/tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "composite": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

/packages/react-clone/package.json

{
  "name": "@zero86/react-clone",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b -v && vite build",
    "serve": "npx serve -l 3000 -s dist",
    "preview": "vite preview"
  },
  "dependencies": {
    "apexcharts": "^3.35.0",
    "clsx": "^1.1.1",
    "react": "^18.1.0",
    "react-apexcharts": "^1.4.0",
    "react-dom": "^18.1.0",
    "react-query": "^3.38.0",
    "react-router-dom": "^6.3.0",
    "recoil": "^0.7.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.31",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.3",
    "@vitejs/plugin-react": "^1.3.2",
    "sass": "^1.50.1",
    "typescript": "^4.6.4",
    "vite": "^2.9.8"
  }
}

After modifying for the build as above, proceed with the build and run it, it works normally.

But.. after running it with npm run dev
jsx-runtime.js:6 Uncaught ReferenceError: module is not defined at jsx-runtime.js:6:3

'use strict';

if ("development" === 'production') {
  module.exports = require('./cjs/react-jsx-runtime.production.min.js');
} else {
  module.exports = require('./cjs/react-jsx-runtime.development.js'); // hear
}

An error occurs.

The project consists of an npm workspace.
I referenced this issue (#6215), but it didn't solve the error.

Reproduction

https://github.com/katanazero86/react-clone/tree/master/packages/react-clone

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 AMD Ryzen 5 2600X Six-Core Processor
    Memory: 8.10 GB / 15.92 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[tbusillo]

FYI, was able to reproduce what you described. It worked on first run doing npm run dev, then after running npm run build it would not load with npm run dev any longer.

However, adding in react/jsx-runtime to the optimizeDeps in the vite.config.js made it work again, which is one of the solutions described in #6215.

Below should fix it for you:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['react/jsx-runtime'],
  },
});

[katanazero86]

FYI, was able to reproduce what you described. It worked on first run doing npm run dev, then after running npm run build it would not load with npm run dev any longer.

However, adding in react/jsx-runtime to the optimizeDeps in the vite.config.js made it work again, which is one of the solutions described in #6215.

Below should fix it for you:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['react/jsx-runtime'],
  },
});

---

I added your answer to vite config and tried again.

/packages/components/vite.config.ts

/packages/react-clone/vite.config.ts

Put the same contents in the above two files, build
I tried running npm run dev .

It didn't work yesterday, but today it worked!

I feel like I had to change all vite.config.ts the same.

thank you.

[katanazero86]

Success!