[react-native + automatic jsx transform] RangeError: Maximum call stack size exceeded

[kirillzyusko]

Hi,

Before we used why-did-you-render without automatic jsx transform and it worked good. However, after adding babel-plugin-transform-react-jsx the library doesn't seem to be working. I've tried to do everything as per readme, but since the project is written in react-native I had to change some lines of code. Here is my config:

module.exports = function BabelEnvConfiguration(api) {
  api.cache(true);

  const isDev = process.env.BABEL_ENV === "development";

  const config = {
    presets: [
      // `useTransformReactJSXExperimental` is needed here in order to exclude
      // `plugin-transform-react-jsx-source` and `plugin-transform-react-jsx-self`
      // because they will be injected by `@babel/plugin-transform-react-jsx-development`
      ["module:metro-react-native-babel-preset", { useTransformReactJSXExperimental: true }],
    ],
    plugins: [
      !isDev // since we can not pass `development` as in `@babel/preset-react`, I'm using ternary operator here
        ? [
            "@babel/plugin-transform-react-jsx",
            {
              runtime: "automatic",
            },
          ]
        : [
            "@babel/plugin-transform-react-jsx-development",
            {
              runtime: "automatic",
              importSource: "@welldone-software/why-did-you-render",
            },
          ],
    ],
  };

  return config;
};

And I'm getting RangeError: Maximum call stack size exceeded error 😔 (stacktrace is below)

I'm pretty sure I'm missing something important but I can not understand what's exactly 🙂 I hope you will give a direction for further investigation, because I've tried everything that is possible and it still doesn't work.

Thank you for your help in advance!

[mduthilleul]

Can't help but I can report I have the same issue on my projet.
RN 0.66.1, React 17.0.2, also with useTransformReactJSXExperimental.

[jwoo92]

Ran into this issue using Node.js v16.13.0, React 17.0.1, RN 0.64.3.

Tried again using Node.js v14.17.5 and why-did-you-render appears to work.

[jonathanm-tkf]

I have same problem RN 0.66.3, React 17.0.2, why-did-you-render 7.0.1

[IvanIhnatsiuk]

I have the same problem RN 0.66.4, React 17.0.2, WDYR 7.0.1 and fix with downgrading node version didn't help 😞

[grgmo]

not working either with RN 0.70.05, React 18, wdyr 7.0.1, anyone able to run on RN not using expo?

[chrisnojima]

Hey,
So I believe I understand what the issue is on RN. There are a couple of issues people run into

1. Ensuring the development jsx transform is loaded correctly. This issue handles this fine as it's explicitly loading up the plugin correctly but others that use babel-preset-expo (like How to use with React Native & Expo? #235) will run into an issue that that preset itself only loads the prod bundle (see: https://github.com/expo/expo/blob/master/packages/babel-preset-expo/index.js#L44 )
2. This issue with the infinite loop has to do with how the overloaded jsx transform is exported. First it exports the original one then overrides jsxDEV with its own, then delegates to the jsxDEV which it just overrode so it just loops. You can apply this patch (i suggest npm patch-package for this) or maybe someone can make an fix in this repo

diff --git a/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js b/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js
index fabd293..0d6a323 100644
--- a/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js
+++ b/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js
@@ -5,8 +5,9 @@ var WDYR = require('@welldone-software/why-did-you-render')
 var origJsxDev = jsxDevRuntime.jsxDEV
 var wdyrStore = WDYR.wdyrStore

-module.exports = jsxDevRuntime
-module.exports.jsxDEV = function jsxDEV(){
+module.exports = {
+	...jsxDevRuntime,
+	jsxDEV: function jsxDEV(){
   var args = Array.prototype.slice.call(arguments)

   if(wdyrStore.React && wdyrStore.React.isWDYR){
@@ -35,4 +36,4 @@ module.exports.jsxDEV = function jsxDEV(){
   }

   return origJsxDev.apply(null, args)
-}
+}}

cc: @vzaidman