TypeScript not recognizing JSX with Bun on Linux

Problem:

Getting IDE errors like Property 'div' does not exist on type 'JSX.IntrinsicElements'. when using Bun with React while on Linux Ubuntu with default tsconfig (where "jsx" : "react-jsx" ).

Building the app with bun run build which translates to tsc -b && vite build will throw errors like below.

19:22:08 3728  test-bun  bun run build $ tsc -b && vite build src/App.tsx:11:7 - error TS2339: Property 'div' does not exist on type 'JSX.IntrinsicElements'. 11 <div> ~~~~~ src/App.tsx:12:9 - error TS2339: Property 'a' does not exist on type 'JSX.IntrinsicElements'. 12 <a href="https://vite.dev" target="_blank"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:13:11 - error TS2339: Property 'img' does not exist on type 'JSX.IntrinsicElements'. 13 <img src={viteLogo} className="logo" alt="Vite logo" /> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:14:9 - error TS2339: Property 'a' does not exist on type 'JSX.IntrinsicElements'. 14 </a> ~~~~ src/App.tsx:15:9 - error TS2339: Property 'a' does not exist on type 'JSX.IntrinsicElements'. 15 <a href="https://react.dev" target="_blank"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:16:11 - error TS2339: Property 'img' does not exist on type 'JSX.IntrinsicElements'. 16 <img src={reactLogo} className="logo react" alt="React logo" /> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:17:9 - error TS2339: Property 'a' does not exist on type 'JSX.IntrinsicElements'. 17 </a> ~~~~ src/App.tsx:18:7 - error TS2339: Property 'div' does not exist on type 'JSX.IntrinsicElements'. 18 </div> ~~~~~~ src/App.tsx:19:7 - error TS2339: Property 'h1' does not exist on type 'JSX.IntrinsicElements'. 19 <h1>Vite + React</h1> ~~~~ src/App.tsx:19:23 - error TS2339: Property 'h1' does not exist on type 'JSX.IntrinsicElements'. 19 <h1>Vite + React</h1> ~~~~~ src/App.tsx:20:7 - error TS2339: Property 'div' does not exist on type 'JSX.IntrinsicElements'. 20 <div className="card"> ~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:21:9 - error TS2339: Property 'button' does not exist on type 'JSX.IntrinsicElements'. 21 <button onClick={() => setCount((count) => count + 1)}> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:23:9 - error TS2339: Property 'button' does not exist on type 'JSX.IntrinsicElements'. 23 </button> ~~~~~~~~~ src/App.tsx:24:9 - error TS2339: Property 'p' does not exist on type 'JSX.IntrinsicElements'. 24 <p> ~~~ src/App.tsx:25:16 - error TS2339: Property 'code' does not exist on type 'JSX.IntrinsicElements'. 25 Edit <code>src/App.tsx</code> and save to test HMR ~~~~~~ src/App.tsx:25:33 - error TS2339: Property 'code' does not exist on type 'JSX.IntrinsicElements'. 25 Edit <code>src/App.tsx</code> and save to test HMR ~~~~~~~ src/App.tsx:26:9 - error TS2339: Property 'p' does not exist on type 'JSX.IntrinsicElements'. 26 </p> ~~~~ src/App.tsx:27:7 - error TS2339: Property 'div' does not exist on type 'JSX.IntrinsicElements'. 27 </div> ~~~~~~ src/App.tsx:28:7 - error TS2339: Property 'p' does not exist on type 'JSX.IntrinsicElements'. 28 <p className="read-the-docs"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:30:7 - error TS2339: Property 'p' does not exist on type 'JSX.IntrinsicElements'. 30 </p> ~~~~ src/main.tsx:7:3 - error TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactNode'. 7 <StrictMode> ~~~~~~~~~~~~ 8 <App /> ~~~~~~~~~~~ 9 </StrictMode>, ~~~~~~~~~~~~~~~ src/main.tsx:7:4 - error TS2786: 'StrictMode' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'. 7 <StrictMode> ~~~~~~~~~~ Found 22 errors.

Minimum Reproducible Code:

The min reproducible code is the base boilerplate code that you get when you run bun create vite . The only different is that I am running on Linux Ubuntu.

Here is the default tsconfig.json file that comes with bun create vite .

{ "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2022", "useDefineForClassFields": true, "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "types": ["vite/client"], "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "verbatimModuleSyntax": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "erasableSyntaxOnly": true, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, "include": ["src"] }

What I've tried:

I changed the value of jsx in the tsconfig.app.json file to "preserve" . This seems to get rid of the linter errors and my app can be built but I am curious why I need to do this when using Bun on Linux?

Using npm to create the Vite + TypeScript + React app does not cause any issues on my Linux Ubuntu machine.

Using bun to create the Vite + TypeScript + React app does not cause any issues on my MacOS machine.

So my question really, how come the typescript compiler and the typescript LSP does not seem to recognize JSX syntax with the default tsconfig conguration?