Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vite): support JSX in .jsx files without React import #7888

Merged
merged 5 commits into from
Nov 3, 2023

Conversation

hi-ogawa
Copy link
Contributor

@hi-ogawa hi-ogawa commented Nov 3, 2023

Closes: #7885

It seems explicitly setting vite's esbuild option is necessarily to make jsx transpilation work for .jsx file.
This change also aligns with what vite-plugin-react does here


(The rest of the comment is some extra note from my investigation. It might not be accurate...)

My guess was that JSX transpilation for server module (i.e. transform done via ssrLoadModule) is done by vite's esbuild, which reads local tsconfig.json to configure certain transform options.
These are relevant docs:

But, for some reason, this might not the case for .jsx file transpilation.
I also tested with updating tsconfig.json to include **/*.jsx but this doesn't seem to have any effect.

reveal tsconfig.json
{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx", "**/*.jsx"],
  "compilerOptions": {
    "checkJs": true,
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

  • Docs
  • Tests

Testing Strategy:

Copy link

changeset-bot bot commented Nov 3, 2023

🦋 Changeset detected

Latest commit: 7aae9b1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@remix-run/dev Patch
create-remix Patch
remix Patch
@remix-run/architect Patch
@remix-run/cloudflare Patch
@remix-run/cloudflare-pages Patch
@remix-run/cloudflare-workers Patch
@remix-run/css-bundle Patch
@remix-run/deno Patch
@remix-run/eslint-config Patch
@remix-run/express Patch
@remix-run/node Patch
@remix-run/react Patch
@remix-run/serve Patch
@remix-run/server-runtime Patch
@remix-run/testing Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@remix-cla-bot
Copy link
Contributor

remix-cla-bot bot commented Nov 3, 2023

Hi @hi-ogawa,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

@remix-cla-bot
Copy link
Contributor

remix-cla-bot bot commented Nov 3, 2023

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

@markdalgleish
Copy link
Member

Thanks for the PR!

Digging into this myself, it looks like JSX was already supported in .jsx files, you just needed to explicitly import React for it to work. This is of course different from how esbuild is configured in the existing Remix compiler.

To match the Remix compiler, I've also updated your PR to set the jsxDev flag.

@markdalgleish markdalgleish changed the title fix(vite): set esbuild.jsx = "automatic" vite option to support non-ts jsx file on ssr fix(vite): support JSX in .jsx files without React import Nov 3, 2023
@hi-ogawa
Copy link
Contributor Author

hi-ogawa commented Nov 3, 2023

Thanks for the review!

Digging into this myself, it looks like JSX was already supported in .jsx files, you just needed to explicitly import React for it to work.

Right, I couldn't verify this exactly, but my guess is that esbuild is choosing jsx = "transform" mode for .jsx file, in which case, JSX is transpiled as React.createElement and source files have to include import React ... explicitly.
On the other hand, jsx = "automatic" will transpile JSX into jsx(...) and transpiler is responsible for injecting import { jsx } from "react/jsx-runtime" automatically.
Esbuild's jsx mode inference based on tsconfig.json's jsx mode might be only applied for .tsx files, and thus explicit esbuild's jsx = "automatic" is required to cover .jsx files as well. https://esbuild.github.io/api/#jsx-import-source

@markdalgleish markdalgleish merged commit 3874120 into remix-run:dev Nov 3, 2023
9 checks passed
@hi-ogawa hi-ogawa deleted the fix-vite-no-ts-jsx branch November 3, 2023 05:49
Copy link
Contributor

🤖 Hello there,

We just published version 2.3.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Copy link
Contributor

🤖 Hello there,

We just published version 2.3.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants