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 react plugin interprets <Type>(…) typecast prefixes in .ts files as TSX tags #5102

Closed
svicalifornia opened this issue Sep 27, 2021 · 1 comment · Fixed by #5198
Closed

Comments

@svicalifornia
Copy link

Describe the bug

I'm using Vite's react-ts starter template, and Vite was choking on some existing TS code. After a lot of trial-and-error, I determined that Vite was interpreting <Type> typecast prefixes as TSX tags. This behavior would be expected in a .tsx file, but the source files causing this problem all have .ts extensions.

Is there a way to disable TSX interpretation in .ts files?

Reproduction

Here's an example that will trigger the error:

code.ts:

interface A {
  optional?: string;
}

const a = {};
const b = <A>a;

export { b };

Add to main.tsx:

import './code'

Results in this error:

[plugin:vite:react-babel] .../vite-react-ts/src/code.ts: Unterminated JSX contents. (8:12)
  9 |
.../vite-react-ts/src/code.ts:8:12
6  |  const b = <A>a;
7  |  
8  |  export { b };
   |              ^
9  |

System Info

System:
    OS: macOS 11.5.2
    CPU: (8) arm64 Apple M1
    Memory: 103.17 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - /opt/homebrew/bin/node
    Yarn: 1.22.11 - /opt/homebrew/bin/yarn
    npm: 7.24.0 - /opt/homebrew/bin/npm
  Browsers:
    Firefox: 72.0.2
    Safari: 14.1.2
  npmPackages:
    vite: ^2.5.4 => 2.5.10

Used Package Manager

npm

Logs

[plugin:vite:react-babel] .../vite-react-ts/src/code.ts: Unterminated JSX contents. (8:12)
  9 |
.../vite-react-ts/src/code.ts:8:12
6  |  const b = <A>a;
7  |  
8  |  export { b };
   |              ^
9  |


### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) 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/vue-next instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
@hyrious
Copy link
Contributor

hyrious commented Sep 30, 2021

It is because @vitejs/plugin-react includes jsx in babel parserPlugins for ts files.


Although there might be use cases that use .js to write JSX, here we'd better distinguish TS and TSX properly:

if (!/\.ts/.test(id)) parserPlugins.push('jsx')

aleclarson pushed a commit that referenced this issue Oct 5, 2021
aleclarson pushed a commit to aleclarson/vite that referenced this issue Oct 11, 2021
@github-actions github-actions bot locked and limited conversation to collaborators Oct 20, 2021
aleclarson pushed a commit to aleclarson/vite that referenced this issue Nov 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants