React Project With Custom JSX Factory

[n1xx1]

I'm trying to get the css prop of emotion to work correctly, so as far I understood I can use the inject option and then specify the jsxFactory and jsxFragment.

My config looks like this:

require("esbuild")
  .build({
    // ...
    jsxFactory: "__jsx",
    jsxFragment: "__Fragment",
    inject: [path.join(__dirname, "./react-shim.js")],
    // ...
  )}

And the react-shim.js is this:

const {
  jsx: __jsx,
  Fragment: __Fragment,
} = require("@emotion/react/jsx-runtime");

However the in generated code the import names get renamed:

  // scripts/react-shim.js
  var {
    jsx: __jsx2,
    Fragment: __Fragment
  } = require_emotion_react_jsx_runtime_browser_cjs();
  // ....
  var MotionCard = import_react12.memo(import_react12.forwardRef(function MotionCard2({card, onDragEnd}, ref) {
    return /* @__PURE__ */ __jsx(motion.div, {
      css: {width: "10%"},
      ref,
  // ...

Why are the names changed? How can I make it work?

Thank you and great work with the project!

[evanw]

The inject feature is just a way to automatically generate an import. When you say inject: "./react-shim.js" you are telling esbuild to generate an import that looks like this in every file:

import {/* ...all exports of react-shim.js... */} from "./react-shim.js"

However, this file doesn't have any exports, only local variables:

const {
  jsx: __jsx,
  Fragment: __Fragment,
} = require("@emotion/react/jsx-runtime");

You can't import anything from a file that doesn't have any exports. Instead you need to do something like this:

export {
  jsx as __jsx,
  Fragment as __Fragment,
} from "@emotion/react/jsx-runtime";

The names of your local variables are being changed to avoid name collisions with references to globals in another file. Unexported local variables are not supposed to be accessible outside of that file.

[hardfist]

@n1xx1 I build site with emotion using esbuild, you can reference it here, https://github.com/hardfist/neo-tools/blob/main/packages/playground/scripts/build.ts#L25

[cosmith]

Thanks @hardfist, for those looking to get emotion working with esbuild, the relevant config is this:

jsxFactory: "jsx",
inject: [path.join(__dirname, "react-shim.js")],

and in react-shim.js

import {jsx} from "@emotion/react";
export {jsx};

And thanks @evanw ! Build time went from 2 minutes to 1.9s 😅

[zaydek]

@hardfist Can I use something like your technique to transform React files so I don’t need to do import React from "react"? I think React uses a Babel transform API to do this.

[evanw]

Can I use something like your technique to transform React files so I don’t need to do import React from "react"?

This might be relevant: https://esbuild.github.io/content-types/#auto-import-for-jsx

[zaydek]

@evanw You’re the best! Thank you so much.

[hardfist]

@hardfist Can I use something like your technique to transform React files so I don’t need to do import React from "react"? I think React uses a Babel transform API to do this.

it already does

[evanw]

I'm going to close this because I believe that the original question has been answered.

[n1xx1]

Sorry about this issue. For some reason I thought I closed it when I figured it out. I don't think it's even necessary to change the documentation, it was my mistake to completely miss the fact you have to export stuff in the injected shim to make them available. Thanks!

[httpete]

Thanks @hardfist, for those looking to get emotion working with esbuild, the relevant config is this:

jsxFactory: "jsx",
inject: [path.join(__dirname, "react-shim.js")],

and in react-shim.js

import {jsx} from "@emotion/react";
export {jsx};

And thanks @evanw ! Build time went from 2 minutes to 1.9s 😅

I also had to export Fragment from react, and add jsxFragment: 'Fragment' to the esbuild options.

import { jsx } from '@emotion/react';
import { Fragment } from 'react';
export { jsx, Fragment };

[kelly-tock]

Thanks @hardfist, for those looking to get emotion working with esbuild, the relevant config is this:

jsxFactory: "jsx",
inject: [path.join(__dirname, "react-shim.js")],

and in react-shim.js

import {jsx} from "@emotion/react";
export {jsx};

And thanks @evanw ! Build time went from 2 minutes to 1.9s 😅

i'm trying to get esbuild-jest working, and will also ask on that repo as well.

with this setup still getting:

Test suite failed to run

    ReferenceError: jsx is not defined

jest config:

transform: {
    '^.+\\.(js|jsx|ts|tsx)$': [
      'esbuild-jest',
      {
        jsxFactory: 'jsx',
        jsxFragment: 'Fragment',
        inject: [path.join(__dirname, 'react-shim.js')],
      },
    ],
  },

react-shim.js

import { Fragment } from 'react';
import { jsx } from '@emotion/react';

export { jsx, Fragment };

any ideas?