Using javascript and typescript in a react project

[vutpov]

Hello, I'm trying to use create a react project that use both javascript and typescript. I got the following error:

Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. 
If you use tsconfig.json, make sure to not set jsx to preserve.

Here's a minimum reproduction: https://github.com/vutpov/test-vite-ts-js-react
Any help is really appreciated.

[s3xysteak]

I am not familiar to React, but I edit the example in Vite document to use js and ts together, and it worked. Refer to stackblitz

[s3xysteak]

In your repo:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

// src/Counter.jsx
import { useState } from 'react'
import viteLogo from '/vite.svg'
import reactLogo from './assets/react.svg'

function Counter() {
  // ...
}

// src/App.tsx
import "./App.css";
- import Counter from "./Counter.js";
+ import Counter from "./Counter.jsx";
// ...

Will fix it.

[XiSenao]

By default, esbuild is applied to ts, jsx and tsx files, You don't need to specify loaders for esbuild.