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(react): generate valid Vite + JSX setup for React #27130

Merged
merged 1 commit into from
Jul 26, 2024
Merged

Conversation

jaysoo
Copy link
Member

@jaysoo jaysoo commented Jul 25, 2024

The current @nx/react:app generator does not take the --js option into account. There are two problems:

  1. index.html includes main.tsx not main.jsx.
  2. .js files with JSX are invalid in Vite, and must be named .jsx.

This PR adds a new option to the toJS devkit util to preserve .jsx rather than renaming them to .js. The vast majority of non-Vite React projects will use .js and not .jsx (e.g. Next.js, Expo, Remix, etc.) so we just want to apply this change to Vite only for now.

In the future we could enhance React generators to support --jsx, for example.

Current Behavior

Expected Behavior

Related Issue(s)

Fixes #20810

Copy link

vercel bot commented Jul 25, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
nx-dev ✅ Ready (Inspect) Visit Preview Jul 25, 2024 9:03pm

@jaysoo jaysoo marked this pull request as ready for review July 25, 2024 19:51
@jaysoo jaysoo requested review from a team as code owners July 25, 2024 19:51
@jaysoo jaysoo requested review from FrozenPandaz and mandarini July 25, 2024 19:51
@jaysoo jaysoo merged commit 45c458e into master Jul 26, 2024
6 checks passed
@jaysoo jaysoo deleted the fix/20810 branch July 26, 2024 12:30
FrozenPandaz pushed a commit that referenced this pull request Jul 30, 2024
The current `@nx/react:app` generator does not take the `--js` option
into account. There are two problems:

1. `index.html` includes `main.tsx` not `main.jsx`.
2. `.js` files with JSX are invalid in Vite, and must be named `.jsx`.

This PR adds a new option to the `toJS` devkit util to preserve `.jsx`
rather than renaming them to `.js`. The vast majority of non-Vite React
projects will use `.js` and not `.jsx` (e.g. Next.js, Expo, Remix, etc.)
so we just want to apply this change to Vite only for now.

In the future we could enhance React generators to support `--jsx`, for
example.

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #20810

(cherry picked from commit 45c458e)
Copy link

github-actions bot commented Aug 1, 2024

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
2 participants