Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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", {

Issue Analytics

State:
Created 3 years ago
Reactions:14
Comments:14

Top GitHub Comments

27reactions

kripodcommented, Nov 6, 2020

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"]
}

8reactions

macalinaocommented, Dec 1, 2020

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