Skip to content

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

@milang

Description

@milang

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions