Skip to content

Vite react plugin interprets <Type>(…) typecast prefixes in .ts files as TSX tags #5102

Closed
@svicalifornia

Description

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.

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions