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

Vite build fails when library has React code in a ".ts" file #13

Closed
7 tasks done
milang opened this issue Aug 13, 2022 · 2 comments
Closed
7 tasks done

Vite build fails when library has React code in a ".ts" file #13

milang opened this issue Aug 13, 2022 · 2 comments

Comments

@milang
Copy link

milang commented Aug 13, 2022

Describe the bug

Vite build for our application started failing after upgrading @vitejs/plugin-react from 2.0.0 to 2.0.1.

I was able to reproduce this error in the repository https://github.com/milang/vite-issues, branch plugin-react-201. It contains acme-app generated using create-vite@3.0.2, and a simple acme-lib that represents our internal library that is causing the build to fail. Reproduction steps:

git clone https://github.com/milang/vite-issues.git
cd vite-issues
git checkout plugin-react-v201
pnpm install
pnpm run -C packages/acme-app build
# => fails with
# [vite:react-babel] C:\Users\milang\dev\vite-issues\packages\acme-lib\src\styled.ts: Support for the experimental syntax 'flow' isn't currently enabled (3:8):
# ...

Actual behaviour: Build fails
Expected behaviour: Build succeeds

vite-build-failure

Note 1

A follow-up branch plugin-react-v200 reverts @vitejs/plugin-react back to 2.0.0. Switching to this branch makes the build succeed:

# (same directory as above)
git checkout plugin-react-v200 # switch to branch with @vitejs/plugin-react@2.0.0
pnpm install
pnpm run -C packages/acme-app build
# => build succeeds

Note 2

As I was experimenting with the reproduction steps, I noticed that I can simply rename styled.ts to styled.tsx (changing the file extension), after which the build succeed. While this is a simple "fix", behaviour of version 2.0.0 was IMO much better because it worked without a rename (and rename might not be possible when dealing with a 3rd party library).

# (same directory as above)
git checkout plugin-react-v201 # switch back to branch with @vitejs/plugin-react@2.0.1
pnpm install
mv packages/acme-lib/src/styled.ts packages/acme-lib/src/styled.tsx # change extension of the problematic file
pnpm run -C packages/acme-app build
# => build succeeds

vite-build-success-after-rename

Reproduction

https://github.com/milang/vite-issues/tree/plugin-react-v201

System Info

System:
  OS: Windows 10 10.0.19044
  CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Memory: 22.11 GB / 31.94 GB
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  pnpm: 7.9.0
Browsers:
  (Not relevant)

Used Package Manager

pnpm

Logs

No response

Validations

@milang milang changed the title Vite build fails when library has React code in ".ts" file Vite build fails when library has React code in a ".ts" file Aug 13, 2022
@patak-dev patak-dev transferred this issue from vitejs/vite Dec 3, 2022
@caghand
Copy link

caghand commented Dec 3, 2022

This was also reported here: vitejs/vite#6202 (comment)
As discussed there, the next version of plugin-react won't have this problem anymore.

@sapphi-red
Copy link
Member

Closing as I confirmed the reproduction now works with plugin-react 3.0.0.
I guess this is because restoreJSX was removed by vitejs/vite#9590.

@github-actions github-actions bot locked and limited conversation to collaborators Jan 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants