Not working with Typescript TSX file

[64BitAsura]

[PepsRyuu]

Hi @64BitDev, can you provide a reproduction? There's no check in the code for extensions, so could be something else happening here.

[v1rtl]

@PepsRyuu

SyntaxError: Unexpected token (7:11)
        return <h1>hello</h1>;
               ^
    at Parser.pp$4.raise (/home/v1rtl/Coding/rainbowkit/example/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:3229:15)

with this:

import React, { Suspense } from 'react'
import { render } from 'react-dom'

const App = () => {
  return <h1>hello</h1>
}

render(
  <Suspense fallback={null}>
    <App />
  </Suspense>,
  document.getElementById('app')
)

import ts from '@rollup/plugin-typescript'
import refresh from 'rollup-plugin-react-refresh/index'

export default {
  input: 'src/index.tsx',
  output: {
    dir: 'dist',
    format: 'esm',
    entryFileNames: '[name].[hash].js',
    assetFileNames: '[name].[hash][extname]'
  },
  plugins: [ts({ include: ['./src/**/*.{ts,tsx}'] }), refresh()]
}

[PepsRyuu]

That's a TypeScript misconfiguration. By default it doesn't support JSX. This is because there's lots of ways JSX can be compiled. https://www.typescriptlang.org/docs/handbook/jsx.html

So to get that example to work, you would need to add the following option:

ts({ include [...], jsx: 'react' })

[v1rtl]

@PepsRyuu getting this now :thinking:

Error: ENOENT: no such file or directory, open '/home/v1rtl/Coding/X/example/src/react.js'
    at compileModule (/home/v1rtl/Coding/X/example/node_modules/.pnpm/[email protected]/node_modules/nollup/lib/impl/NollupCompiler.js:211:19)
    at async compileInputTarget (/home/v1rtl/Coding/X/example/node_modules/.pnpm/[email protected]/node_modules/nollup/lib/impl/NollupCompiler.js:243:5)
    at async Object.compile (/home/v1rtl/Coding/X/example/node_modules/.pnpm/[email protected]/node_modules/nollup/lib/impl/NollupCompiler.js:345:31)
    at async generateImpl (/home/v1rtl/Coding/X/example/node_modules/.pnpm/[email protected]/node_modules/nollup/lib/index.js:14:21)

I added jsx: react to rollup ts plugin and also have this tsconfig:

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "esnext",
    "declaration": true,
    "preserveSymlinks": true,
    "outDir": "dist",
    "isolatedModules": true,
    "esModuleInterop": true,
    "downlevelIteration": true,
    "noImplicitAny": false,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "skipLibCheck": true,
    "moduleResolution": "Node",
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "declarationDir": "dist",
    "jsx": "react"
  }
}

[PepsRyuu]

That just means it can't figure out what react means, it's unrelated to TypeScript. This is normal behaviour. By default Rollup/Nollup have no idea what these type of bare imports mean, and only recognise relative imports. You need to add a plugin such as @rollup/plugin-node-resolve which tells Rollup/Nollup to resolve these imports using the NodeJS algorithm (ie. inside node_modules. This might seem a bit strange, but a core philosophy of Rollup is that it does the bare minimum as a tool, and lets you as the developer add the extra features, which gives you more flexible to tailor things how you want.

https://www.npmjs.com/package/@rollup/plugin-node-resolve

import node_resolve from '@rollup/plugin-node-resolve';

export default {
    plugins: [
        ...
        node_resolve()
    ]
}

[v1rtl]

@PepsRyuu ohh thanks it worked! sorry for questions unrelated to the issue