Support React's new JSX transform

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

[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]

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.