Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kripod opened this issue Oct 22, 2020 · 14 comments · May be fixed by #94
Open

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

kripod opened this issue Oct 22, 2020 · 14 comments · May be fixed by #94

Comments

@kripod
Copy link

kripod commented Oct 22, 2020

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
Copy link
Author

kripod commented Oct 22, 2020

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
Copy link
Collaborator

ljharb commented Oct 22, 2020

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
Copy link

paleite commented Nov 2, 2020

I'm experiencing the same issue.

@0x54321
Copy link

0x54321 commented Nov 4, 2020

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

@ljharb
Copy link
Collaborator

ljharb commented Nov 4, 2020

Every jsx-related transform is incompatible with it.

@paleite
Copy link

paleite commented Nov 6, 2020

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
Copy link
Author

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

@longxuanho
Copy link

Please fix the bug for react v17 / NextJS.

@kripod
Copy link
Author

kripod commented Nov 24, 2020

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
Copy link

macalinao commented 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!

#94

@macalinao macalinao linked a pull request Dec 1, 2020 that will close this issue
@kripod
Copy link
Author

kripod commented Dec 1, 2020

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

@longxuanho
Copy link

longxuanho commented Dec 20, 2020

any update?

@ochmanski
Copy link

nothing?

@ljharb
Copy link
Collaborator

ljharb commented Jan 25, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants