'undefined is not a function' when using the new JSX transform

[kripod]

When importing an SVG, the new JSX transform doesn't work seamlessly along with React 17. The resulting component with inlined SVG data looks as follows:

var TextAroundImageEditor_IconFlip = function IconFlip(props) {
  return /*#__PURE__*/undefined("svg", TextAroundImageEditor_objectSpread(TextAroundImageEditor_objectSpread({}, props), {}, {
    children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("path", {
      fillRule: "evenodd",
      d: "M8 3L2 19H11V3H8ZM4.886 17L9 6.02934V17H4.886Z"
    }), /*#__PURE__*/Object(jsx_runtime_["jsx"])("path", {
      fillRule: "evenodd",
      d: "M16 3L22 19H13V3H16ZM19.114 17L15 6.02934V17H19.114Z"
    })]
  }));
};

TextAroundImageEditor_IconFlip.defaultProps = {
  fill: "currentColor",
  viewBox: "0 0 24 24",
  width: "24",
  height: "24",
  xmlns: "http://www.w3.org/2000/svg"
};

Instead of something similar to:

var TextAroundImageEditor_IconFlip = function IconFlip(props) {
+  return /*#__PURE__*/Object(jsx_runtime_["jsx"])("svg", TextAroundImageEditor_objectSpread(TextAroundImageEditor_objectSpread({}, props), {}, {
-  return /*#__PURE__*/undefined("svg", TextAroundImageEditor_objectSpread(TextAroundImageEditor_objectSpread({}, props), {}, {
    children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])("path", {

[kripod]

Downgrading to React 16.14 has fixed the issue for now. I'm not sure whether an issue should be filed towards Babel or React, too.

[ljharb]

I'm not sure either - but this plugin very explicitly adds an import of React if none exists, so I think this (and many other ecosystem transforms) can't likely work transparently with the new jsx transform.

[paleite]

I'm experiencing the same issue.

[0x54321]

Same problem here. There should at least be a warning somewhere that this is currently incompatible with the new jsx transform.

[ljharb]

Every jsx-related transform is incompatible with it.

[paleite]

Not really a solution for this issue, but for those of you who use Next.js v10, you can try next/image as a workaround until this package gets fixed.

[kripod]

For Next.js 10, I'm currently using the following workaround:

/* .babelrc */
{
  "presets": [
    [
      "next/babel",
      {
        // TODO: Remove when airbnb/babel-plugin-inline-react-svg#91 gets fixed
        "preset-react": { "runtime": "classic", "pragma": "__jsx" }
      }
    ]
  ],
  "plugins": [
    [
      // TODO: Remove when airbnb/babel-plugin-inline-react-svg#91 gets fixed
      // Source: https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts
      "next/dist/build/babel/plugins/jsx-pragma",
      {
        "module": "react",
        "importAs": "React",
        "pragma": "__jsx",
        "property": "createElement"
      }
    ],
    "babel-plugin-inline-react-svg"
  ]
}

Also, I've opened an issue to support simplifying the config given above:

/* .babelrc */
{
  "presets": [
    [
      "next/babel",
      { "preset-react": { "runtime": "classic" } }
    ]
  ],
  "plugins": ["babel-plugin-inline-react-svg"]
}

[longxuanho]

Please fix the bug for react v17 / NextJS.

[kripod]

Please fix the bug for react v17 / NextJS.

Please be patient and consider supporting the developers of this project. That’s an example how you could help besides contributing code.

[macalinao]

Hey fellas, I wrote a fix for this in my fork.

You can test this today using yarn add -D @simplyianm/babel-plugin-inline-react-svg.

Here's my config which uses next and emotion:

{
  "env": {
    "production": {
      "plugins": ["@emotion"]
    }
  },
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": [
    [
      "@simplyianm/babel-plugin-inline-react-svg",
      {
        "noReactAutoImport": true,
        "svgo": {
          "plugins": [
            {
              "cleanupIDs": {
                "minify": false
              }
            }
          ]
        }
      }
    ],
    "@emotion"
  ]
}

Cheers!

https://github.com/airbnb/babel-plugin-inline-react-svg/pull/94

[kripod]

@macalinao Great job, thank you! I would love to see that being merged into this project.

[longxuanho]

any update?

[ochmanski]

nothing?

[ljharb]

@ochmanski #94 isn't ready to land yet, so nope.