Improve auto-import for JSX (the jsxInject option)

[vimcaw]

Is your feature request related to a problem? Please describe.

According to the document of Vite, we can do an auto-import for JSX by:

// vite.config.js
export default {
  esbuild: {
    jsxInject: `import React from 'react'`
  }
}

But it just places this snippet to the header of codes by simply concatenating string:

vite/packages/vite/src/node/plugins/esbuild.ts

Line 125 in a0d922e

result.code = options.jsxInject + ';' + result.code

If some codes have already import React for something like:

import React from 'react';

export default function Button(props: React.ButtonHTMLAttributes<HTMLElement>) {
    return <div {...props} />
}

that will cause conflict and throw an error: Uncaught SyntaxError: Identifier 'React' has already been declared.

I know some codemod can migrate the React imports, but I don't want to change that codes for some reason.

Describe the solution you'd like

According to the document of ESBuild:

First, create a file called react-shim.js that re-exports everything from the react package in an export called React:

// react-shim.js
export * as React from 'react'

Then use esbuild's inject feature to inject this into each file:

esbuild app.jsx --bundle --inject:./react-shim.js --outfile=out.js

In my test, I create a file with:

import React from 'react';

export default function Test() {
    return <div>Test</div>
}

Then use esbuild's inject feature by --inject:./react-shim.js, esbuild will output:

import * as React from "react";
import React2 from "react";
export default function Test() {
  return /* @__PURE__ */ React2.createElement("div", null, "Test");
}

Although there are duplicate variables React, but at least this is compatible with the old code.

So I hope vite can provide inject config of esbuild.

Describe alternatives you've considered

Or handle duplicated import by vite itself.

Additional context

Some codemod can migrate the React importing:
https://github.com/reactjs/react-codemod#update-react-imports

[vimcaw]

The dev-server of Vite uses transform API of esbuild so it can't use the inject option (that is build API only option), so it should be handled by Vite, I made a PR to solve this: #2586

[VottusCode]

Considering the following snippet:

vite/packages/vite/src/node/plugins/esbuild.ts

Line 125 in a0d922e

result.code = options.jsxInject + ';' + result.code

Why not just make jsxInject a function that you pass result.code into? What I'm proposing is something like:

{
  esbuild: {
    jsxInject: (str: string) => !str.includes('import React') ? "import React from 'react'" : ""
  }
}

The refactoring changes would be minimal, the old way of directly passing a string can still be supported and it adds more flexibility to the configuration IMO.

[aleclarson]

Now that vite-react-jsx exists, the esbuild.jsxInject option will probably be deprecated.

[vimcaw]

@aleclarson I notice it use babel to transform jsx, how about performance?

[aleclarson]

@aleclarson I notice it use babel to transform jsx, how about performance?

I guess I should make the readme clearer. It only uses Babel when vite build is used. In serve mode, it just injects a React import into JSX/TSX modules that are missing one.

[vimcaw]

@aleclarson That's Cool! I will try it.

[codepunkt]

Whatever the way to go forward is, please don't forget preact and other jsx pragmas.

[JanTvrdik]

The following workaround seems to work for me.

// vite.config.js
export default {
  esbuild: {
    jsxFactory: '_jsx',
    jsxFragment: '_jsxFragment',
    jsxInject: `import { createElement as _jsx, Fragment as _jsxFragment } from 'react'`,
  }
}

[VottusCode]

The following workaround seems to work for me.

// vite.config.js
export default {
  esbuild: {
    jsxFactory: '_jsx',
    jsxFragment: '_jsxFragment',
    jsxInject: `import { createElement as _jsx, Fragment as _jsxFragment } from 'react'`,
  }
}

Nice seeing you here, thought you're stuck with Nette :D

Anyways, yeah, this works for me too.

[Niputi]

closing at the new react plugin improved auto import.