kristerkari/react-native-svg-transformer

metro-react-native-babel-transformer needs to be replaced in RN 0.73

vonSchweeee opened this issue · 14 comments

vonSchweeee commented

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-svg-transformer@1.1.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-svg-transformer/index.js b/node_modules/react-native-svg-transformer/index.js
index e07ebb6..4bee8c4 100644
--- a/node_modules/react-native-svg-transformer/index.js
+++ b/node_modules/react-native-svg-transformer/index.js
@@ -1,6 +1,6 @@
 const { resolveConfig, transform } = require("@svgr/core");
 const resolveConfigDir = require("path-dirname");
-const upstreamTransformer = require("metro-react-native-babel-transformer");
+const upstreamTransformer = require("@react-native/metro-babel-transformer");
 
 const defaultSVGRConfig = {
   native: true,

This issue body was partially generated by patch-package.

AndyS007 commented

I encountered the same problem

saoudnazir commented

Same issue

djaffer commented

same issue

chriszs commented

Dupe of #317

kristerkari commented

I'm releasing a new version with a fix soon :)

efstathiosntonas commented

@kristerkari this change creates issues for bare react-native projects using expo-modules-core. Been hunting this bug for 2 days 😓

It was causing:

  1. Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. and Warning: React has detected a change in the order of Hooks called by XXXX every time I added a hook in my code, upon fast-refresh it throwed this.
  2. Upon metro run it throwed this: transform[stderr]: Missing transform.routerRoot option in Metro bundling request, falling back to app as routes directory.
  3. Metro was going crazy, unresponsive, 30secs to fast-refresh, not picking up changes at all.

It drove me crazy to spot the issue and I went through a huge package.json git history. The eslint rule react-hooks/rules-of-hooks did not throw any errors, I do not call components as functions so I had to dig into package.json history and check all package version updates one by one.

As a temp fix I made these changes:

const upstreamTransformer = (() => {
  try {
    - return require("@expo/metro-config/babel-transformer");
    +  return require("@react-native/metro-babel-transformer");
  } catch (error) {
    try {
      return require("@react-native/metro-babel-transformer");
    } catch (error) {
      return require("metro-react-native-babel-transformer");
    }
  }
})();

edit: Don't know if expo@50.preview.7 is the issue, the metro transformer maybe is not aligned with bare react-native one or if it will stay like this forever so a change is required in this package.

  • 👍1
kristerkari commented

@efstathiosntonas Thanks for reporting! Would it be possible for you to create some kind of reproducible demo of the problem, like a new React Native project with only the required dependencies to trigger the errror?

I think that so far people have been using pure React Native or pure Expo projects, but not mixing them.

  • 👍1
efstathiosntonas commented

@kristerkari sure, let me give it a go.

kristerkari commented

@efstathiosntonas Hi again, I have been trying to think how to solve the problem that you have, and what I'm trying to figure out is how to detect if the project is a normal React Native project or an Expo project.

In your case it's a normal RN project, but it is using Expo, so it's a bit tricky to know. Not sure if there is a good way without adding some kind of option to the library to switch between Expo and React Native.