Failed to resolve module specifier "react/jsx-runtime"

[Digital39999]

Describe the bug

I am aware that this is older issue and I just can't resolve it, I sow this comment and I would really appreciate explanation on how to because i don't use that module at all anywhere..

This is expected behavior, because you external some library, you should load it by yourself.
Originally posted by @underfin in #3876 (comment)

Reproduction

https://stackblitz.com/~/github.com/Digital39999/remix-vite-test

Steps to reproduce

Run pnpm install, pnpm build and pnpm start.
Then check active ports and open the website, make sure to open it in a new tab.
When you are on the page, right click and inspect, and check the console. Error from title should appear (on every refresh).

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (4) x64 Intel(R) N100
    Memory: 7.49 GB / 11.43 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    npm: 10.5.1 - ~/.nvm/versions/node/v20.12.1/bin/npm
    pnpm: 8.15.6 - ~/.nvm/versions/node/v20.12.1/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.2.6 => 5.2.6

Used Package Manager

pnpm

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 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.

[hi-ogawa]

It looks like you're using Remix but I don't think they mention using it together with externalizeDeps plugin.
I'm not sure why you need externalizeDeps, but if you want that, then probably it's better to ask Remix team/community about how to do that.

[sapphi-red]

The error is happening because React is externalized for the client bundle. Browsers doesn't know where react/jsx-runtime should be resolved to.

If that is what you intend, you'll need to map react/jsx-runtime by import maps or by a plugin that rewrites the import specifier to be a URL to CDN or somewhere only for the client bundle. I'm not sure if remix provides a way to apply some plugins only to the client bundle though.

If you just want to externalize React for the SSR bundle, removing vite-plugin-externalize-deps seems to work.

[Digital39999]

Thanks for help, I never thought that such thing could cause whole website to break, removing vite-plugin-externalize-deps from vite config did the job since seems like i don't need anything external, but now that left me a little confused as @sapphi-red says the opposite? And also I was confused because i never actually used react/jsx-runtime so I didn't know where and how to import.

[hi-ogawa]

I never thought that such thing could cause whole website to break

As far as I know, vite-plugin-externalize-deps is not most intuitive thing to for normal users just bundling an app. It's like telling Vite to keep import "react" in your source code instead of bundling the dependencies.

vite-plugin-externalize-deps could be convenient for developing a library where you don't want to bundle the whole react into your component library.

I don't think Remix team has ever mentioned vite-plugin-externalize-deps, so I just wonder where you got this idea from.

And also I was confused because i never actually used react/jsx-runtime so I didn't know where and how to import.

You don't normally import react/jsx-runtime by yourself, but transpilers inject them to transpile jsx, something like this. You can also find it in your build/client/assets/...js.

// input
<div />

// output
import { jsx } from "react/jsx-runtime";
jsx("div");

[Digital39999]

Yeah I wanted to use vite-plugin-externalize-deps for @excalidraw/excalidraw package which was client side and it firstly didn't work but lazer on it did with externalize, and as i updated it stopped. But now removing vite-plugin-externalize-deps fixed it.