Enable jsxImportSource

[gagoar]

👋🏻 @evanw, thanks for your amazing project!

We were moving a group of tooling to use esbuild (from rollout + tsc) and we started having errors given that we use jsxImportSource in our tsconfig.json in order to enable the use of @emotion/react. This has allowed us to avoid adding the pragma on every file.

We got this idea from here

in the meantime, is there a workaround to make it work?

We tried to add --jsx-factory=jsxs but the module is not there.

Thanks.

[evanw]

Have you seen https://esbuild.github.io/content-types/#auto-import-for-jsx?

[gagoar]

So we tried, but we end up having issues after the compilation

we don't really know what's the module that we should provide to --inject flag. We tried every version under the @emotion/react/jsx-runtime/dist/

esbuild --bundle ./src/browser_action/index.tsx --define:process.env.NODE_ENV=\\\"production\\\" --inject:./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.cjs.js --jsx-factory=jsxs --platform=browser --target=chrome86,firefox83 --outdir=dist/browser_action/

The error we get:
Uncaught ReferenceError: jsxs is not defined

this is our tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "esModuleInterop": true,
    "importHelpers": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "lib": ["dom", "esnext"],
    "module": "ESNext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "strict": true,
    "target": "es2017"
  },
  "exclude": ["node_modules"],
  "include": ["src", "test", "src/*.json"]
}

Any suggestion you might think that would do the trick?

[evanw]

The inject feature is just a way to auto-import a variable in esbuild. It by itself has nothing to do with React. The file to inject has to be in ESM format and will probably be something you end up writing yourself.

When you inject a file with esbuild, all named ESM exports in that file become auto-importable identifiers. Every time one of those named exports is referenced in another file without being declared in that file, an import is automatically generated for that identifier from the injected file.

So if you want to auto-import foo from a file called bar.js everywhere in your project, you could inject a small shim file (which you create) that looks like export {foo} from "./bar.js" to accomplish this. Then you can use foo without having to import bar.js first. This should also apply to auto-importing jsx from the file called @emotion/react.

Note that esbuild only supports the standard JSX transform, not the one that's specific to React 17. So if you're using esbuild to transform JSX syntax to JS you'll get the standard JSX-to-JS transform. I mention this because you have "jsx": "react-jsx" in your TypeScript settings. Presumably the library you're using can be configured to use the standard JSX transform, although I'm not familiar with that library.

[Codex-]

Hmmmm having essentially a shim to inject for achieving what would typically be just specifying the jsxImportSource feels finicky, and far from ideal.

There is https://www.npmjs.com/package/esbuild-plugin-jsximportsource which helps, however it would be great to see this supported first hand, would it be something you'd be willing to accept a pull request for, Evan?