.tsx support broken since v0.9.0

[jrson83]

Environment

• node: v18.12.1
• unbuild: v0.9.0
• os: windows 11

Reproduction

https://github.com/jrson83/unbuild-broken-tsx

unbuild-broken-tsx

• main branch - unbuild 0.9.0 is broken when using .tsx
• unbuild@0.8.11 branch - unbuild 0.8.11 is working when using .tsx
• unbuild@0.9.0-fix branch - unbuild 0.9.0 is working when using .tsx

Usage

Install and run build on broken 0.9.0 example:

git clone https://github.com/jrson83/unbuild-broken-tsx.git
cd unbuild-broken-tsx
npm install
npm run build

Install and run build on working 0.8.11 example:

git clone -b unbuild@0.8.11 https://github.com/jrson83/unbuild-broken-tsx.git
cd unbuild-broken-tsx
npm install
npm run build

Install and run build on fixed 0.9.0 example:

git clone -b unbuild@0.9.0-fix https://github.com/jrson83/unbuild-broken-tsx.git
cd unbuild-broken-tsx
npm install
npm run build

Describe the bug

When running build on a .tsx file, unbuild throws an error SyntaxError: Unexpected token.

Additional context

compare/v0.8.11...v0.9.0

Update on possible fix

npm i -D @rollup/plugin-typescript tslib

Update build.config.ts:

import { defineBuildConfig } from 'unbuild'
import tsPlugin from '@rollup/plugin-typescript'

export default defineBuildConfig({
  entries: ['src/index'],
  externals: ['react', 'react-dom'],
  clean: true,
  declaration: true,
  rollup: {
    emitCJS: true,
    inlineDependencies: true,
    resolve: {
      extensions: ['.ts', '.tsx'],
    },
  },
  hooks: {
    'rollup:options': (ctx, options) => {
      if (!Array.isArray(options.plugins)) {
        options.plugins = options.plugins ? [options.plugins] : []
      }
      options.plugins.push(tsPlugin())
    },
  },
})

Logs

❯ npm run build

> unbuild-broken-tsx@0.0.0 build
> unbuild

i Building unbuild-broken-tsx                                                                                                                                             02:28:10
Error building C:/unbuild-broken-tsx: SyntaxError: Unexpected token (4:27) in C:\unbuild-broken-tsx\src\index.tsx
SyntaxError: Unexpected token (4:27) in C:\unbuild-broken-tsx\src\index.tsx
    at pp$4.raise (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:20213:13)
    at pp$9.unexpected (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:17514:8)
    at pp$5.parseExprAtom (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:19597:10)
    at pp$5.parseExprSubscripts (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:19389:19)
    at pp$5.parseMaybeUnary (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:19355:17)
    at pp$5.parseExprOps (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:19282:19)
    at pp$5.parseMaybeConditional (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:19265:19)
    at pp$5.parseMaybeAssign (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:19232:19)
    at pp$8.parseVar (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:18057:24)
    at pp$8.parseVarStatement (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:17921:8)
    at pp$8.parseStatement (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:17669:17)
    at Parser.parseExport (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:24092:33)
    at pp$8.parseStatement (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:17690:74)
    at pp$8.parseTopLevel (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:17571:21)
    at Parser.parse (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:17343:15)
    at Function.parse (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:17393:35)
    at Graph.contextParse (file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:23773:38)
    at tryParse (file:///C:/unbuild-broken-tsx/node_modules/@rollup/plugin-commonjs/dist/es/index.js:17:12)
    at analyzeTopLevelStatements (file:///C:/unbuild-broken-tsx/node_modules/@rollup/plugin-commonjs/dist/es/index.js:36:15)
    at Object.transformAndCheckExports (file:///C:/unbuild-broken-tsx/node_modules/@rollup/plugin-commonjs/dist/es/index.js:2033:68)
    at Object.transform (file:///C:/unbuild-broken-tsx/node_modules/@rollup/plugin-commonjs/dist/es/index.js:2229:41)
    at file:///C:/unbuild-broken-tsx/node_modules/rollup/dist/es/shared/rollup.js:23563:40 {
  pos: 119,
  loc: {
    column: 27,
    file: 'C:\\unbuild-broken-tsx\\src\\index.tsx',
    line: 4
  },
  raisedAt: 120,
  frame: "2: import { createRoot } from 'react-dom/client'\n" +
    '3: \n' +
    '4: export const createStory = <P extends object>(\n' +
    '                              ^\n' +
    '5:   Component: ComponentType<P>,\n' +
    '6:   props: P',
  id: 'C:\\unbuild-broken-tsx\\src\\index.tsx',
  hook: 'resolveId',
  code: 'PLUGIN_ERROR',
  plugin: 'commonjs--resolver',
  watchFiles: [ 'C:\\unbuild-broken-tsx\\src\\index.tsx' ]
}

[zoeyzhao19]

@jrson83 , the unbuild version you used is exactly v0.9.4. unbuild use inline implementation of esbuild since v0.9.2. Try to add esbuild: { loaders: { '.tsx': 'tsx' } } in your rollup options (in your config file build.config.ts )

[jrson83]

@zoeyzhao19 Itested this with unbuild@1.0.2 and it worked flawless. Thank you.
It would be very usefull if this would be added to the docs!

[pi0]

I think we can also directly add tsx loader to defaults in inline plugin :)

[jrson83]

I think we can also directly add tsx loader to defaults in inline plugin :)

That would be great. Or at least add a hint to the docs. I searched through issues, changelogs, PR's and also googled how to make unbuild work with .tsx, but havn't found another solution then using @rollup/plugin-typescript.

[zoeyzhao19]

I submitted a PR that add jsx/tsx loader to defaults in inline plugin to fix this issue: #198