Issue importing JSX file from dependency in node_modules

[bhallstein]

Describe the bug

Trying to import a dependency from node_modules that has a jsx file. Vite complains that the file does not have the "jsx" extension, though it in fact does.

Tried adding to vite config, does not fix:

optimizeDeps: {
  include: ['jsx-dep']
},

Currently using @vitejs/plugin-react-swc for transpilation.

Reproduction

https://github.com/bhallstein/vite-jsx-in-node-modules-issue

Steps to reproduce

Clone repo
npm install
git checkout . -- re-adds the jsx-dep dep inside node_modules
npx vite

This displays error message saying the imported rep needs the jsx extension — but the file already has this extension.

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Memory: 43.81 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 19.4.0 - /opt/homebrew/bin/node
    npm: 9.2.0 - /opt/homebrew/bin/npm
  Browsers:
    Firefox: 109.0.1
    Safari: 16.3
  npmPackages:
    @vitejs/plugin-react-swc: ^3.2.0 => 3.2.0 
    vite: ^4.1.4 => 4.1.4

Used Package Manager

npm

Logs

18:54:46 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/ben/Desktop/vite-jsx-test/node_modules/jsx-dep/index.jsx:5:11
  3  |      <div>
  4  |        Hello
  5  |      </div>
     |            ^
  6  |    )
  7  |  }
      at formatError (file:///Users/ben/Desktop/vite-jsx-test/node_modules/vite/dist/node/chunks/dep-ca21228b.js:41418:46)
      at TransformContext.error (file:///Users/ben/Desktop/vite-jsx-test/node_modules/vite/dist/node/chunks/dep-ca21228b.js:41414:19)
      at TransformContext.transform (file:///Users/ben/Desktop/vite-jsx-test/node_modules/vite/dist/node/chunks/dep-ca21228b.js:39641:22)
      at async Object.transform (file:///Users/ben/Desktop/vite-jsx-test/node_modules/vite/dist/node/chunks/dep-ca21228b.js:41685:30)
      at async loadAndTransform (file:///Users/ben/Desktop/vite-jsx-test/node_modules/vite/dist/node/chunks/dep-ca21228b.js:39479:29)
  vite:time 32.10ms /node_modules/jsx-dep/index.jsx +32ms
  vite:load 33.04ms [fs] /node_modules/vite/dist/client/env.mjs +32ms
  vite:import-analysis 0.02ms [no imports] node_modules/vite/dist/client/env.mjs +35ms
  vite:transform 0.54ms /node_modules/vite/dist/client/env.mjs +35ms
  vite:time 1.47ms /node_modules/vite/dist/client/env.mjs +2ms
  vite:deps ✨ static imports crawl ended +1s

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.

[bhallstein]

Realised it could be helpful to describe the original case as well as the repro.

We have a monorepo, and I was trying to follow the guidance at https://vitejs.dev/guide/dep-pre-bundling.html:

In a monorepo setup, a dependency may be a linked package from the same repo. Vite automatically detects dependencies that are not resolved from node_modules and treats the linked dep as source code. It will not attempt to bundle the linked dep, and will analyze the linked dep's dependency list instead.

In our case I added the dep using npm i -S ../path-to-dep, which creates a symlink inside node_modules as expected.

Vite does appear to treat the linked dep as source code as described, but it seems to encounter an issue with this when the dep has jsx files.

From the phrase "Vite automatically detects dependencies that are not resolved from node_modules and treats the linked dep as source code" I'm inferring that the intention is to support linked deps as if they were source code, in which case it seems like erroring on jsx is unintended behaviour. And though I've looked through the docs and not found an obvious vite config opt that could solve this, but very happy to be pointed to one if it exists.

Edit:

For our use case, its seems a possible workaround for this issue is to alias the dep in vite.config.js instead of linking it:

alias: {
  'my-dep': path_to_dep,
},

Noting this as although it doesn't address this issue directly it allows for the same result in this one case.

[mostafa-raafat]

Hey @bhallstein I have the same issue when I trying to import a node_module react-zoom-pan-pinch not sure why I'm getting this error and how to solve it?

[sapphi-red]

vite-plugin-react-swc doesn't support JSX files in node_modules (vitejs/vite-plugin-react-swc#53).

Tried adding to vite config, does not fix:

optimizeDeps: {
  include: ['jsx-dep']
},

Currently Vite only supports JS/TS files for dep optimizer. You could use optimizeDeps.extension: ['.jsx'] but this is still experimental.

[bhallstein]

Thanks for the reply @sapphi-red.