Version 4 breaks jsx with preserve tsconfig setting

[ConnorJamesLow]

Describe the bug

Prior to version 4 (tested on 3.2.5), I could use a custom jsx factory function with the "jsx": "preserve" tsconfig option. Now, it seems like it fails to compile correctly. If this change was intentional, please point to the change log for this.

Reproduction

https://github.com/ConnorJamesLow/texsaur/tree/feature/custom-component-demo/examples/vite-custom-element/site

Steps to reproduce

• Create a new Vanilla TypeScript with npm create vite@latest.
• Install or create a custom jsx factory function
• Update your vite.config.js:

import { defineConfig } from 'vite'

export default defineConfig({
    esbuild: {
        jsxFactory: 'jsx',
        jsxFragment: 'jsx.Fragment',
    }
})

• Update your tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "skipLibCheck": true,
    "jsx": "preserve",
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "jsx.Fragment"
  },
  "include": ["src"]
}

• Create a .tsx file importing your factory and call it on your page, e.g.:

// src/page.tsx
import jsx from 'texsaur';

export default (
    <main>
        <h1>Hello there</h1>
    </main>
);


// src/main.ts
import page form './page';

document.body.appendChild(page);

• Run npm run dev (i.e. vite)
• Find error in browser (reproduced on versions 4.0.4 and 4.1.4):

Prior as late as [email protected], the result of page.tsx looks like:

System Info

System:
    OS: macOS 12.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 285.17 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.2.0 - ~/.nvm/versions/node/v18.2.0/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v18.2.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Firefox: 110.0
    Safari: 16.3
  npmPackages:
    vite: ^4.1.4 => 4.1.4

Used Package Manager

npm

Logs

N/A - vite doesn't report any errors in the terminal. Console only displays the above Uncaught SyntaxError: Unexpected token '<' (at page.tsx:1:16) error.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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 vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Yes, this change is intentional.
In 3.x, Vite didn't respect JSX related options in tsconfig.json.
But Vite does respect other options in tsconfig.json and now Vite respect those (#11049).

In this case, { "jsx": "preserve", "jsxFactory": "jsx", "jsxFragmentFactory": "jsx.Fragment" } + { jsxFactory: 'jsx', jsxFragment: 'jsx.Fragment' } resolves to { jsxFactory: 'jsx', jsxFragment: 'jsx.Fragment', tsconfigRaw: { "jsx": "preserve" } } (esbuild repl).

The changelog for this one here: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#:~:text=feat(node/plugins)%3A%20esbuild%20options%20(%2311049)%20(735b98b)%2C%20closes%20%2311049