JSX: Build System Considerations

tip

Understanding these details is for power users. If you just want to get started quickly, clone the template repo.

Using JSX requires a build system. Since most projects use TypeScript, the easiest way to do this is via the TS compiler. To enable this, set the following compilerOptions:

"compilerOptions": {
  "jsx": "react-jsx",
  "jsxImportSource": "ai-jsx",
}

If you're using esbuild, there are similar settings.

If you're using babel, you want to configure babel-plugin-transform-react-jsx such that it uses ai-jsx instead of React.

We also recommend putting the following in your tsconfig.json:

"compilerOptions": {
  "module": "esnext",
  "moduleResolution": "nodenext",
  "esModuleInterop": true,
}

However, this may vary based on your project's other ESM settings.