Importing react/jsx-runtime breaks dev builds

[vlad-zhukov]

Describe the bug

When importing react/jsx-runtime, dev build breaks with the following client error:

Uncaught ReferenceError: module is not defined
    at jsx-runtime.js:6

In my more complex setup I am consuming a local prebuilt library and get a more weird error message

Uncaught ReferenceError: module is not defined
    at null:6

I've found out that setting optimizeDeps.include: ['react/jsx-runtime'] fixes this issue and in fact 'react/jsx-dev-runtime' works because @vitejs/plugin-react adds it by default. Does it make sense to also include 'react/jsx-runtime' there?

Reproduction

StackBlitz

System Info

System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 69.96 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.volta/tools/image/node/16.13.0/bin/node
    Yarn: 1.18.0 - ~/.volta/tools/image/yarn/1.18.0/bin/yarn
    npm: 8.1.0 - ~/.volta/tools/image/node/16.13.0/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 96.0.4664.110
    Edge: 96.0.1054.62
    Firefox: 95.0
    Safari: 15.1
  npmPackages:
    @vitejs/plugin-react: ~1.1.3 => 1.1.3 
    vite: ~2.7.4 => 2.7.4

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/vue-next 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.

[gluck]

I think the issue is more likely with the vite react plugin, which resolves react/jsx-runtime to react/jsx-runtime (and not a valid path, so it won't be optimized).

E.g. importing react/jsx-runtime.js works fine (properly optimized through import scanning).

[mouse-007]

thank you

[wqcstrong]

I think the issue is more likely with the vite react plugin, which resolves react/jsx-runtime to react/jsx-runtime (and not a valid path, so it won't be optimized).

E.g. importing react/jsx-runtime.js works fine (properly optimized through import scanning).

Saved my life! Thanks~

BTW, there may not be issue, the reason is in the comment

[wqcstrong]

I think the issue is more likely with the vite react plugin, which resolves react/jsx-runtime to react/jsx-runtime (and not a valid path, so it won't be optimized).

E.g. importing react/jsx-runtime.js works fine (properly optimized through import scanning).

Saved my life! Thanks~

BTW, there may not be issue, the reason is in the comment

[aleclarson]

Why are you importing react/jsx-runtime directly?

[wqcstrong]

@aleclarson In my case, click the issue to see, I import it to wrap its jsxDEV method to implement i18n on the developing phase.

[robcaldecott]

The PR for this looks straightforward enough. Be good to get this merged.

[vaske]

I tried this solution since my dependency used it and still vite fail with following message:

(this will be run only when your dependencies or config have changed)
error when starting dev server:
Error: ENOTDIR: not a directory, open '/node_modules/react/index.js/jsx-runtime'
    at Object.openSync (fs.js:498:3)
    at Object.readFileSync (fs.js:394:35)
    at optimizeDeps (/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:63104:42)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async runOptimize (/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66904:48)
    at async Server.httpServer.listen (/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66920:21)
error Command failed with exit code 1.

conf

    optimizeDeps: {
      include: ['react/jsx-runtime'],
    }

without this I have same error as it originally reported:

> node_modules/@mui/material/CssBaseline/CssBaseline.js:9:28: error: Could not read from file: /node_modules/react/index.js/jsx-runtime
    9 │ import { jsx as _jsx } from "react/jsx-runtime";
      ╵                             ~~~~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
node_modules/@mui/material/CssBaseline/CssBaseline.js:9:28: error: Could not read from file: /node_modules/react/index.js/jsx-runtime

do I miss something?

[arm1n]

For me this proposed solution works as a temporary hotfix:

resolve: {
  alias: {
    'react/jsx-runtime': 'react/jsx-runtime.js',
  },
},

Will your PR covers this issue @aleclarson? Thank you!

[sorenhoyer]

optimizeDeps.include: ['react/jsx-runtime'] works like a charm. Thanks for sharing :-)

[ecarrera]

Change the configuration of your @vitejs/plugin-react instance to the classic mode of the jsxRuntime

vite.config.js

import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'classic',
    }),
  ]
});

Reference

Opting out of the automatic JSX runtime

By default, the plugin uses the automatic JSX runtime. However, if you encounter any issues, you may opt out using the jsxRuntime option.

react({
jsxRuntime: 'classic'
})

[pomber]

For React 18 aliasing react/jsx-runtime doesn't work anymore, but the optimizedDeps solution does.

Here's the vite config for React 18 and MDX v2 that worked for me:

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

export default defineConfig(async () => {
  const mdx = await import("@mdx-js/rollup")
  return {
    optimizeDeps: {
      include: ["react/jsx-runtime"],
    },
    plugins: [react(), mdx.default({ remarkPlugins: [] })],
  }
})

[o-az]

Thank you @pomber. This worked for me, inspired by your answer.

/// <reference types="vite/client" />

import reactPlugin from '@vitejs/plugin-react'
import type { UserConfig } from 'vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
const config = async (): Promise<UserConfig> => {
  const { default: mdx } = await import('@mdx-js/rollup')

  return {
    plugins: [reactPlugin(), mdx({ remarkPlugins: [] })],
    optimizeDeps: {
      include: ['react/jsx-runtime'],
    },
    build: { minify: true },
  }
}

export default defineConfig(config)

[sapphi-red]

I was able to reproduce it. It worked after upgrading plugin-react to 3.0.0-alpha.2.
Closing as it is fixed.