airbnb / airbnb/babel-plugin-inline-react-svg

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

Open
#91 14 comments 14 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
474
Forks
90
PR merge metrics
No merged PRs in 30d

Description

When importing an SVG, the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) doesn't work seamlessly along with React 17. The resulting component with inlined SVG data looks as follows:

```jsx
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:

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

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the issue by importing an SVG while using React 17's new JSX transform, then inspect the plugin's SVG transformation path and compare the generated component with the expected jsx runtime call shown here. Done means the generated SVG component no longer calls undefined and matches the expected output pattern.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, react
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.