airbnb / airbnb/babel-plugin-inline-react-svg
'undefined is not a function' when using the new JSX transform
- 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