[@vitejs/plugin-vue-jsx] importing vue sfc with jsx does not work if custom queries added

[dotoleeoak]

Describe the bug

In Nuxt 3, custom queries are added to id when importing files under pages directory, such as /pages/index.vue?vue&type=script&lang.jsx&macro=true (in this case, macro=true) In this case, vue jsx plugin does not acknowledge the context and throws an error.

More info: https://github.com/nuxt/nuxt.js/issues/13435 Probably related to PR vitejs/vite#7121

Reproduction

https://stackblitz.com/edit/vitejs-vite-uo2vwz

System Info

System:
  OS: Linux 5.16 Ubuntu 20.04.4 LTS (Focal Fossa)
  CPU: (16) x64 AMD EPYC 7B13
  Memory: 33.38 GB / 62.80 GB
  Container: Yes
  Shell: 5.0.17 - /bin/bash
Binaries:
  Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
  Yarn: 3.2.1 - ~/.nvm/versions/node/v16.15.0/bin/yarn
  npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm

Used Package Manager

yarn

Logs

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.


 WARN   [SSR] Error transforming /pagess/index.vue?vue&type=script&setup=true&lang.jsx&macro=true: 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.

   at formatError (node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38663:46)
   at TransformContext.error (node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38659:19)
   at TransformContext.transform (node_modules/vite/dist/node/chunks/dep-59dc6e00.js:56777:22)
   at async Object.transform (node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30)
   at async doTransform (node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29)

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

IIUC extension needs to be at the end of id. So /pages/index.vue?vue&type=script&lang.jsx&macro=true needs to be /pages/index.vue?vue&type=script&macro=true&lang.jsx.

refs: https://github.com/vitejs/vite/pull/6912#issuecomment-1039355130

[danielroe]

We can likely work around this in Nuxt - but would you welcome a PR to change the behaviour in Vite so that it isn't dependent on query order?

[sapphi-red]

Probably no. Even if vue-jsx plugin accepted it, plugins which assume .jsx to be at the end (or at the end after removing query) will exist and they will not work. But I'm not certain about this.

[bluwy]

I'd second working around it in Nuxt at the meantime. There's a solution of using meta.vite.lang to specify the extension like:

https://github.com/vitejs/vite/blob/dc0022529610f159d5e635087307ac109746d830/packages/plugin-vue/src/main.ts#L229-L233

But this isn't commonly used yet, and it would break the ecosystem otherwise. I agree though that a behaviour like this isn't great at a glance, but I'd imagine a migration over to meta.vite.lang and then dropping checking extensions in Vite 4 would be the ideal path forward.

(I haven't considered other consequence of dropping the extensions check yet)