Native generates invalid references to react-native-svg imports

[giladgray]

🐛 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 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 import
        children: (0, _jsxRuntime.jsxs)(LinearGradient, {     // BAD import -- this symbol doesn't exist in global scope. should be _reactNativeSvg.LinearGradient
          id: "a",
          x1: "50%",
          x2: "50%",
          y1: "0%",
          y2: "100%",
          children: [(0, _jsxRuntime.jsx)(Stop, { // another BAD import
            offset: "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?

svgr/packages/babel-plugin-transform-svg-component/src/variables.ts

Lines 132 to 136 in 0ae0413

	if (opts.native) {
	getOrCreateImport(ctx, 'react-native-svg').specifiers.push(
	t.importDefaultSpecifier(t.identifier('Svg')),
	)
	}

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 14.2
 - CPU: (10) arm64 Apple M1 Max
 - Memory: 1.70 GB / 32.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
 - Yarn: 1.22.19 - ~/.nvm/versions/node/v18.18.0/bin/yarn
 - npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
 - pnpm: 8.12.1 - ~/.nvm/versions/node/v18.18.0/bin/pnpm
 - bun: 1.0.0 - ~/.bun/bin/bun