2

Compiling TypeScript files for a React app with esbuild. It is successfully compiling, but in the browser an error is shown in the console:

Uncaught SyntaxError: Unexpected token '<' after the return

 // components/editor/Toolbar/ToolbarDropdown.tsx
  var import_core = __require("@material-ui/core");
  var ToolbarDropdown = ({ title, value, onChange, children }) => {
    return <import_core.FormControl> // error
      <import_core.InputLabel>{title}</import_core.InputLabel>
      <import_core.Select native value={value} onChange={(e) => onChange(e.target.value)}>{children}</import_core.Select>
    </import_core.FormControl>;
  };

esbuild config:

const esbuild = require('esbuild')
const { sassPlugin } = require("esbuild-sass-plugin");
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const inlineImage = require("esbuild-plugin-inline-image");
const { nodeExternalsPlugin } = require('esbuild-node-externals')

esbuild.build({
  entryPoints: ['./pages/index.tsx'],
  outdir: './esbuild',
  bundle: true,
  loader: { ".js": "tsx" },
  plugins: [nodeExternalsPlugin(),
  inlineImage(),
  sassPlugin({
    async transform(source) {
      const { css } = await postcss([autoprefixer]).process(source, { from: undefined });
      return css;
    },
  })],
}).catch(() => process.exit(1))
ghiscoding
  • 12,308
  • 6
  • 69
  • 112
Nahid Salekin
  • 106
  • 5

1 Answers1

2

Faced the same problem. According to this Github issue you need to edit your tsconfig.json, changing the line

"jsx": "preserve"

to

"jsx": "react"

This may happen when you just migrated your app from webpack/CRA.

Albrow
  • 86
  • 5