You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I just upgraded to the latest versions of SVGR and react-native-svg-transformer in my project that contains both web & React Native apps. Web works just fine, but React Native is now crashing with errors of this type:
Property 'LinearGradient' doesn't exist
(replace 'LinearGradient' with several different exports from react-native-svg, depending on the SVG file used)
It looks like the generated code misses a bunch of these imports:
var_react=_interopRequireDefault(_$$_REQUIRE(_dependencyMap[1],"react"));var_reactNativeSvg=_interopRequireWildcard(_$$_REQUIRE(_dependencyMap[2],"react-native-svg"));var_MUIIcon=_$$_REQUIRE(_dependencyMap[3], ...);var_jsxRuntime=_$$_REQUIRE(_dependencyMap[4],"react/jsx-runtime");function_getRequireWildcardCache(e){ ... }function_interopRequireWildcard(e,r){ ... }var_default=exports.default=(0,_MUIIcon.withIcon)("IconComponent",function(color){return(0,_jsxRuntime.jsxs)(_reactNativeSvg.default,{xmlns: "http://www.w3.org/2000/svg",width: 335,height: 112,viewBox: "0 0 335 112",children: [(0,_jsxRuntime.jsx)(_reactNativeSvg.Defs,{// GOOD importchildren: (0,_jsxRuntime.jsxs)(LinearGradient,{// BAD import -- this symbol doesn't exist in global scope. should be _reactNativeSvg.LinearGradientid: "a",x1: "50%",x2: "50%",y1: "0%",y2: "100%",children: [(0,_jsxRuntime.jsx)(Stop,{// another BAD importoffset: "0%",stopColor: "#393D40"}),(0,_jsxRuntime.jsx)(Stop,{offset: "100%",stopColor: color})]})}),(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{// GOOD import
...
})]});
For reference, here is my template:
// @ts-check/** @type {import('@svgr/babel-plugin-transform-svg-component').Template} */module.exports=({ componentName, jsx },{ tpl })=>tpl` import React from 'react'; // much like React, this Svg symbol must be in scope at runtime import Svg from 'react-native-svg'; import { withIcon } from '...'; // accept color as argument because RN does not support currentColor export default withIcon('${componentName.replace('Svg','Icon')}', color => ${jsx});`;
Expected behavior
all react-native-svg symbols are rewritten to import from the package.
Link to repl or repo (highly encouraged)
Looks like the source code here may not support all import rewrites?
The text was updated successfully, but these errors were encountered:
giladgray
changed the title
React Native generates invalid references to imports
Native generates invalid references to react-native-svg imports
Dec 19, 2023
🐛 Bug Report
I just upgraded to the latest versions of SVGR and react-native-svg-transformer in my project that contains both web & React Native apps. Web works just fine, but React Native is now crashing with errors of this type:
Property 'LinearGradient' doesn't exist
(replace
'LinearGradient'
with several different exports fromreact-native-svg
, depending on the SVG file used)It looks like the generated code misses a bunch of these imports:
For reference, here is my template:
Expected behavior
all
react-native-svg
symbols are rewritten to import from the package.Link to repl or repo (highly encouraged)
Looks like the source code here may not support all import rewrites?
svgr/packages/babel-plugin-transform-svg-component/src/variables.ts
Lines 132 to 136 in 0ae0413
Run
npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard
Paste the results here:
The text was updated successfully, but these errors were encountered: