Cannot find module .../jsx-runtime

[unional]

Describe the bug

I have a library that depends on another library. Both using vite to build with react@17, TypeScript, pnpm, and in ESM.

The build works fine, but vitest failed with:

Error: Cannot find module 'D:\code\justland\just-web-react\libraries\react\node_modules\react\jsx-runtime' imported from D:\code\justland\just-web-react\libraries\react\dist\just-web-react.js
Did you mean to import react/node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js?

Reproduction

Since it involves one library referencing another, it will take some effort to come up with a minimal repro.

For the time being, here is the code:

• https://github.com/justland/just-web-react
• git checkout jsx-runtime-error
• pnpm install
• pnpm build
• pnpm commands test

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 31.94 GB / 63.92 GB
  Binaries:
    Node: 14.20.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (108.0.1462.42)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

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

[unional]

I can confirm this is an vitest issue. I have two other repos that consume the said package, the one with vitest has the same issue, the other one using jest does not.

[sheremet-va]

Your files need to be processed by Vitest (they are externalised in your case). Add this to your vite.config.ts:

export default {
  test: {
    deps: {
      inline: [/@just-web/, /just-web-react/]
    },
  },
}

I was also able to fix the issue by adding .js extension to import, since jsx-runtime is not specified in react's exports field (otherwise, it's required by ESM spec). This would actually be faster than inlining dependency.

[unional]

awesome! thanks for the quick response. 🌷

[sheremet-va]

I was also able to patch react package with these exports to make this work:

{
  "exports": {
    ".": {
      "default": "./index.js"
    },
    "./jsx-runtime": {
      "default": "./jsx-runtime.js"
    },
    "./jsx-dev-runtime": {
      "default": "./jsx-dev-runtime.js"
    }
  }
}

This all is required, because if you delegate executing to Node (which is enabled for your package here), then it kicks it's own resolution mechanism instead of Vite's, and it doesn't support importing react/jsx-runtime (but does support require('react/jsx-runtime'))

This is unfortunately sad ESM<->CJS reality that we have to live in.

[unional]

Yeah, I'm using React 17 which does not have the exports fields at all.

Maybe I can file a PR to React to fix that in 17 (17.0.3)

[geekact]

Yeah, I'm using React 17 which does not have the exports fields at all.

Maybe I can file a PR to React to fix that in 17 (17.0.3)

Have a look at this issue and it'll never be fixed for react 16 and 17
facebook/react#20235