SVGR no longer works on iOS release build after upgraded to RN 0.63.0

[stackia]

After upgrading to RN 0.63.0, on iOS release build, icons no longer fills with my customized color in .svgrrc.

But on iOS dev build, Android dev/release build it works well.

[kristerkari]

Thanks, I need to check and verify this one.

[stackia]

Looks like this is related to facebook/react-native#29351, facebook/react-native@a8e8502

react-native bundle will run from ios dir on RN 0.63. I added some console.log and found the transformer gets wrong relative paths when react-native bundle is launched from ios dir.

  if (filename.endsWith(".svg") || filename.endsWith(".svgx")) {
    var config = resolveConfig.sync(resolveConfigDir(filename));
+    console.log(filename, config);

Output:

✘ stackia@MacBook-2020  ~/Repositories/xxx/packages/my-rn-app/ios   feat/rn-0.63  ../node_modules/.bin/react-native bundle --entry-file ./index.js --bundle-output ./result.bundle --assets-dest ./bundle-assets --platform ios
                 Welcome to React Native!
                Learn once, write anywhere


transform[stdout]: ../design/src/components/Logo/logo-icon.svg null
transform[stdout]: ../design/src/components/Logo/logo-text.svg null

I have a monorepo structure, the real relative path of these files should be:

../../design/src/components/Logo/logo-icon.svg
../../design/src/components/Logo/logo-text.svg

If I run react-native bundle in my RN app root dir, the SVGR config resolves correctly.

As a workaround, adding cd $PROJECT_DIR/.. as said in facebook/react-native#29351 (comment) will force react-native bundle to run in app root dir instead of ios dir.

---

Can we detect whether the transformer is invoked from ios dir and automatically fixes the relative paths?

[kristerkari]

So is this a bug or a feature in RN 0.63? It seems like people are reporting that the bundling is not working for them, so I guess that this might get fixed in a patch?

[stackia]

So is this a bug or a feature in RN 0.63? It seems like people are reporting that the bundling is not working for them, so I guess that this might get fixed in a patch?

It's a feature that allows react-native cli to run from project sub-directories. Before 0.63, react-native cli could only be started from project root. Now it can be started from ios / android directory (and RN 0.63 by default will run react-native bundle from the ios directory). facebook/react-native@a8e8502

[Aung-Myint-Thein]

I am having the issue on Android after updating to RN 0.63.1 .. any work around? Thanks!

[kristerkari]

Sorry for being slow with this @stackia. From the linked commits it seems that this is caused by a small feature on iOS, but in reality it breaks all 3rd party transformer plugins for React Native.

Before making any fixes, I want make sure that I understand what the problem is and what is a correct fix for it. For now I would recommend to stick with React Native 0.62 instead of the new 0.63 until I can be sure that PR #99 is the correct way to apply the fix for all of the libraries that I have published.

[Aung-Myint-Thein]

Weird.. In some of my devices, the svg is showing up. In some of the devices, it show up sometimes. The behaviour is not very consistent. Could there be some config issue?

[bjackson]

FWIW, I have the same issue on 0.62.2 and in dev.

My react-native-svg-transformer version is 0.14.3, and my react-native-svg version is 12.1.0. Simulator is iOS 13.5.

My .svgrrc:

{
  "replaceAttrValues": {
    "#fff": "{props.fill}"
  }
}

My metro.config.js:

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer')
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg']
    }
  };
})();

EDIT: Weirdly, once I put in the logging statement that @stackia tried, the issue resolved itself. 🤷‍♂️

[kristerkari]

So, I'm currently waiting for someone from the React Native team to comment something on these open issues & PR, and I'll release a new version of the transformer with a fix if it's not getting fixed in React Native.

Issues:
facebook/react-native#29351, facebook/react-native#29356

PR:
facebook/react-native#29477

[jmunozDevsu]

any news about this?

[kristerkari]

@jmunozDevsu It looks like this got fixed in React Native, but there hasn't been a new version yet: facebook/react-native#29477

[kristerkari]

I haven't had time to try out yet, but this issue should be fixed in the latest 0.63.3 patch version:
https://github.com/facebook/react-native/releases/tag/v0.63.3

[kristerkari]

Closing since this has been fixed in React Native version 0.63.3. Please update to that patch version.

[facuescobar]

I just upgraded to "react-native": "0.72.3", and I have the same problem.

declarations.d.ts

declare module '*.svg' {
  import React from 'react';
  import {SvgProps} from 'react-native-svg';
  const content: React.FC<SvgProps>;
  export default content;
}

metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg', 'cjs'],
      resolveRequest: (context, moduleName, platform) => {
        if (moduleName.startsWith('graphql-request')) {
          return {
            filePath: `${__dirname}/node_modules/graphql-request/build/esm/index.js`,
            type: 'sourceFile',
          };
        }

        return context.resolveRequest(context, moduleName, platform);
      },
    },
  };
})();

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package.json

dependencies
   "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-svg": "^13.10.0",
    
devDependencies
    "react-native-svg-transformer": "^1.1.0",

[ugar0ff]

@facuescobar did you find a solution?