configuring esbuild with react (replacing create-react-app)

Question

I have a bunch of files with the extension js instead of jsx. (This is a react project).

I setup my package.json for build with such script:

"build": "esbuild src/App.js --bundle --minify --sourcemap --outfile=public/bundle.js",

Upon running it, I have tons of errors all complaining about js syntax such as:

const App = () => {
 return (
  <>
   // some code
  </>
 )
}

where:

> src/App.js:16:2: error: Unexpected "<"
    16 │     <>
       ╵     ^

This is a similar error for many files that have basic div's as return: <div> // content </div> stating that the < in the begging of the div is unexpected. I assume this is because it's not viewing these files as jsx. Is there some sort of flags I can set that will solve this? Changing every single file to a jsx is going to be a mission.

Answer 1

It looks like there is a statement in the esbuild docs: (bottom of the linked block)

esbuild app.js --bundle --loader:.js=jsx

the --loader:.js=jsx statement will use the jsx loader on js files

So your script may look something like:

"build": "esbuild src/App.js --bundle --minify --sourcemap --outfile=public/bundle.js --loader:.js=jsx",

The docs state you can also do this within a config script and not the CLI:

require('esbuild').buildSync({
  entryPoints: ['app.js'],
  bundle: true,
  loader: { '.js': 'jsx' },
  outfile: 'out.js',
})