Unexpected token '<' Error

[scaki]

I have a preact project that I developed with typescript. I build with esbuild and add the output to an html page and I get the error in the image. What would be the reason?

My config:
esbuild .build({ entryPoints: ['./src/main.tsx'], bundle: true, minify: false, minifySyntax: true, sourcemap: false, write: true, jsx: 'transform', jsxFactory: 'h', outfile: 'dist/main.js', target: [ 'es2022', 'chrome58', 'edge16', 'firefox57', 'node12', 'safari11', ], platform: 'browser', globalName: 'lib', format: 'iife', supported: { destructuring: true }, loader: { '.svg': 'text' }, define: { PopupData: JSON.stringify(data), CampaignId: data.campaign.id }, plugins: [sassPlugin(), nodeExternalsPlugin()], })

[evanw]

I'm guessing you have "jsx": "preserve" in your tsconfig.json file. Is that correct?

[kaiyoma]

We're also running into this, except we're getting the error during webpack compilation:

ERROR in ./index.tsx 21:4
Module parse failed: Unexpected token (21:4)
File was processed with these loaders:
 * ./node_modules/.pnpm/esbuild-loader@2.19.0_webpack@4.44.2/node_modules/esbuild-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| function renderWithProvider(Component) {
|   ReactDOM.render(
>     <Provider store={store}><ErrorBoundary><PermissionsProvider><Component /></PermissionsProvider></ErrorBoundary></Provider>,
|     mainContainer
|   );

We currently run esbuild 0.14.38 and we're trying to upgrade to the latest esbuild. We have "jsx": "preserve" in our tsconfig.json.

@evanw What's the correct way forward here? I tried reading the changelog from 0.14.51 but it's not clear how to proceed. Do we use the new JSX transform in esbuild? Do we change our tsconfig? A combination of both?

[evanw]

Right now you would have to change your tsconfig.json. One could argue that esbuild's configuration should override the one in tsconfig.json here but that's not currently what happens. One could also argue the opposite, so I'm not confident whether or not this should be changed in esbuild.

[kaiyoma]

Okay yes, I reached the same conclusion on my own too. We have a monorepo of packages and I realized that most component packages are actually using "jsx": "react" but the one package with our webpack app was still using "jsx": "preserve". That code was added back in 2019 and a lot has changed since then, like the fact that we use esbuild now instead of Babel.

Long story short, I switched to "jsx": "react" and now everything is working again. 😄 Thanks for the quick reply!

[techmind-git]

I can set the tsconfig.json setting to 'react-jsx' to be able to compile nested components (using mdx-bundler for context) but I'm in a nextjs app and on startup/build nextjs changes the setting back to 'preserve'. Any suggestions on how this might works together with esbuild with current workings.

And additionally I was wondering if this proposed tsconfig changes fix this issue for the future (if a solution is currently not available with the workings of next changing the setting).

Be grateful for any hint into which direction a solution is possible :-).

[LuisAlejandro]

What do you recommend to do when using esbuild with next? next overwrites tsconfig to ensure jsx value is preserve

[evanw]

An upcoming version of esbuild may help you work around this (which is the commit that closed this issue). But you could also consider filling a bug with whatever tool you’re using that’s overwriting your config files. That sounds like a bug with that tool to me.

[AstralBaby]

An upcoming version of esbuild may help you work around this (which is the commit that closed this issue). But you could also consider filling a bug with whatever tool you’re using that’s overwriting your config files. That sounds like a bug with that tool to me.

Not a bug, Next, after vercel changed a lot its structure to match vercel's cloud, that means also changing your ts config.