Support React's new JSX transform

[SevenOutman]

Feature request

React 17 came with a new JSX transform feature which allow user to omit import React from 'react' from components. This feature has also been added back into v16, v15 and v0.14 then.

I moved from ts-loader to esbuild-loader for its performance. But when I want to use the new JSX transform I notice that esbuild has not supported yet while TypeScript 4.1 already supports it.

Why?

evanw suggested a plugin approach, and I believe this loader is a good place for doing it.

Alternatives

No response

Additional context

No response

[privatenumber]

Evan means esbuild plugins, not just any plugin.

esbuild-loader uses esbuild's transform API, which doesn't support esbuild plugins.

If you want to omit the React import, you can use Webpack's Provide Plugin.

Closing since this feature request belongs in esbuild rather than esbuild-loader.

[nerdyman]

For any people who want to copy and paste the solution:

plugins: [
  new webpack.ProvidePlugin({
    React: 'react',
  }),
],

https://github.com/privatenumber/esbuild-loader-examples/blob/52ca91b8cb2080de5fc63cc6e9371abfefe1f823/examples/react/webpack.config.js#L39

[alexandernst]

esbuild implemented automatic JSX transform in 0.14.51 https://github.com/evanw/esbuild/blob/master/CHANGELOG.md#01451

Maybe reopen this?

[privatenumber]

Why does it need to be reopened if it's been implemented?

[alexandernst]

I assumed that esbuild-loader must implement something in order to pass that new option to esbuild. Maybe this is not the case and the current implementation can already be used. If this is the case, how can I pass that option?

[alexandernst]

Nevermind, I found it. For anyone that might get here from google search, this is the config:

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "esbuild-loader",
      options: {
        loader: 'jsx',
        target: 'es2015',
        jsx: 'automatic',  // <--- this is the new option 
      }
    },
  ]
},

Using this new option renders this unnecessary:

plugins: [
  new webpack.ProvidePlugin({  // <-- can be removed
    React: 'react',            // <-- can be removed
  }),                          // <-- can be removed
],

@privatenumber Maybe this section of the docs should be updated in order to reflect this.

[privatenumber]

PR welcome on this example:
https://github.com/privatenumber/esbuild-loader-examples/blob/52ca91b8cb2080de5fc63cc6e9371abfefe1f823/examples/react/webpack.config.js#L39-L41

[alexandernst]

privatenumber/esbuild-loader-examples#6

[mwalkerr]

I'm on version 2.19.0 which is the latest at the time of writing this, but attempting to use jsx: 'automatic' results in:

Module build failed (from ./node_modules/.pnpm/esbuild-loader@2.19.0_webpack@5.73.0/node_modules/esbuild-loader/dist/index.js):
Error: Invalid value "automatic" in "--jsx=automatic"

Trying to use jsxImportSource similarly fails:

node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:241:12: ERROR: Invalid option in transform() call: "jsxImportSource"

[privatenumber]

Make sure you're using the latest esbuild via https://github.com/privatenumber/esbuild-loader/#bring-your-own-esbuild-advanced

[mwalkerr]

Thank you @privatenumber, that worked. Apologies for missing what was already in the docs!

[privatenumber]

Can you elaborate? The latest comment in the thread you referenced says --jsx=automatic works now.

[privatenumber]

What are you referring to as the old & new JSX transforms?

[privatenumber]

I just wanted to ensure we're on the same page regarding the old and new JSX transforms, as you seem quite confident about esbuild not supporting a feature that many others claim it does.

Using the same input from the React blog, you can verify esbuild outputs the new transform.

If you still have concerns or encounter issues with this feature, I would recommend discussing them directly on the relevant GitHub issue: evanw/esbuild#334.

[privatenumber]

If it doesn't work you can file a bug with a demonstration that it's not working.

Locking this thread as the original issue has been resolved, and the rest are all debugging help. If you need help, post in Discussions instead.