React Native Storyshots - RangeError: Maximum call stack size exceeded #302

nigelsim · 2019-05-28T22:46:41Z

Describe the bug
When running storyshots the following error occurs. Running the storybook within the app on the device works as expected:

 FAIL  ./storyshots.test.ts
  ● Test suite failed to run

    RangeError: Maximum call stack size exceeded
        at Function.get [Symbol.species] (<anonymous>)
        at Array.slice (<anonymous>)

      at Resolver.resolveStubModuleName (node_modules/jest-resolve/build/index.js:375:49)
      at Symbol (node_modules/core-js/modules/es.symbol.description.js:25:75)
      at Symbol (node_modules/core-js/modules/es.symbol.description.js:25:106)
      at Symbol (node_modules/core-js/modules/es.symbol.description.js:25:106)
      at Symbol (node_modules/core-js/modules/es.symbol.description.js:25:106)

To Reproduce
Steps to reproduce the behavior:

Setup React Native Story book and test
Add @storybook/addon-storyshots
Setup storyshots.test.ts as per README
Run yarn test

Expected behavior
Snapshots to be generated

Code snippets
storybook/index.ts

import { getStorybookUI, configure } from '@storybook/react-native';
import { loadStories } from './storyLoader';


configure(() => {
  loadStories()
}, module);

configure(loadStories, module);
// Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

export default StorybookUIRoot;

storyshots.test.ts

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

button.stories.ts

import { Button } from './Button';
import { storiesOf } from '@storybook/react-native';

storiesOf('Button', module)
    .add('Default', () => (<Button title='My Button' color='#fafafa' onPress={null}></Button>
    ));

System:

OS: Linux
Device: NA
Browser: NA
Framework: React Native 0.57.8
Addons: @storybook/addon-storyshots
Version: 5.1.0-rc.2

The text was updated successfully, but these errors were encountered:

jamsch · 2019-06-07T01:02:55Z

We use Storybook at our business and are having the same exception after upgrading to 5.1.3

We are using it as a component inside our live app which is conditionally bundled based on environment variables. Our minimal repro is the following:

// StorybookComponent.js
import { getStorybookUI } from "@storybook/react-native";
const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
export default StorybookUIRoot;

This, however does work

// StorybookComponent.js
import { View } from "react-native";
export default View;

The stack trace isn't so helpful either.

nigelsim · 2019-06-12T05:45:44Z

This is still an issue with React Native 0.59.9 and Storybook 5.1.3

stale · 2019-07-03T06:56:06Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale · 2019-08-02T07:07:38Z

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

insidewhy · 2019-09-25T08:26:28Z

Getting the same thing here, did you guys give up on storyshot or did you find a fix?

kyle-ssg · 2019-11-29T13:21:49Z

I find that this is an issue when passing an element as a prop, otherwise, it works fine.

 const icon = <Text>Hi</Text>;
            return (
                <ListItem icon={icon}>
                    <View>
                        <Text style={Styles.listItemTitle}>
                            Button
                        </Text>
                        <Text style={Styles.listItemText}>
                            Text
                        </Text>
                    </View>
                    <ION style={Styles.listIcon} name="ios-arrow-forward"/>
                </ListItem>
            )

ENT108 · 2021-09-23T09:59:02Z

It's still an issue :/

enesozturk · 2021-12-01T15:11:17Z

It is still an issue with:

{ 
    "expo": "~43.0.2",
    "react-native": "0.64.3",
    "@storybook/addon-actions": "^5.3",
    "@storybook/addon-knobs": "^5.3",
    "@storybook/addon-links": "^5.3",
    "@storybook/addon-ondevice-actions": "^5.3.23",
    "@storybook/addon-ondevice-knobs": "^5.3.25",
    "@storybook/react-native": "^5.3.25",
    "@storybook/react-native-server": "^5.3.23",
}

dannyhw · 2021-12-01T17:27:49Z

I've never really worked with storyshots if someone could explain more about this issue or open a PR that would be really helpful.

enesozturk · 2021-12-18T19:07:57Z

@dannyhw, still having the issue with upgraded packages:

  "expo": "^44.0.0",
  "@storybook/addon-actions": "^6.4.9",
  "@storybook/addon-knobs": "^6.4.0",
  "@storybook/addon-links": "^6.4.9",
  "@storybook/addon-ondevice-actions": "^5.3.23",
  "@storybook/addon-ondevice-knobs": "^5.3.25",
  "@storybook/react-native": "^5.3.25",
  "@storybook/react-native-server": "^5.3.23",

I render my storybook inside the app with a specific route.

 <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={MainStack}
    />
    <Stack.Screen
      name="Storybook"
      component={StorybookComp}
    />
</Stack.Navigator>

App is working as expected. When I navigate to the Storybook route. I got this message. (But I can continue using by dismiss this message)

If I directly render Storybook in App.js (in Expo, this is the root file) like this:

import React from "react";
import StorybookUIRoot from "./storybook";

export default StorybookUIRoot;

🟢 It is ok.

🔴 But when I want to import both my app and Storybook, it gives the error.

Here I thought:

Maybe the Storybook conflicts with any package I use, but I could not find it. If I do not import my app, it is ok.
Vice versa: when I use the Storybook inside navigation but do not call it, the error does not show up. When navigate to Storybook, Storybook renders and error shows up

function App() {
  const { storybook } = Constants.manifest.extra;
  const [fontsLoaded] = useFonts({
    Poppins_400Regular,
    Poppins_600SemiBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return <>{Boolean(storybook) ? <LinksScreen /> : <MainNavigator />}</>;
}

export default App;

I can give these details. Appreciate your help. Still trying to solve this issue.

dannyhw · 2021-12-18T19:14:14Z

You shouldn't mix 5.3 with 6.x either use V6 or 5.3 but not both.

enesozturk · 2021-12-18T20:10:18Z

addon-knobs page is deprecated and addon-controls start with 6.x.x - https://www.npmjs.com/package/@storybook/addon-knobs

How to continue here? Downgraded the others to 5.x.x latest.

Edit: Downgraded all the packages like below. Still giving error.

"@storybook/addon-actions": "5.3.13",
"@storybook/addon-knobs": "5.3",
"@storybook/addon-links": "5.3.7",
"@storybook/addon-ondevice-actions": "^5.3.23",
"@storybook/addon-ondevice-knobs": "5.3.25",
"@storybook/react-native": "^5.3.25",
"@storybook/react-native-server": "^5.3.23",

enesozturk · 2021-12-18T20:29:50Z

This solved the issue for me. But not sure any other thing will be affected by setting inlineRequire: false. What do you think?

For my Expo app, in metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      // ...my configs
      // added this function 👇🏽
      getTransformOptions: async () => ({
        transform: {
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      // my configs
    },
  };
})();

dannyhw · 2021-12-18T21:02:36Z

Inline requires is just an optimization disabling it shouldn't be a problem.

ayushjain6 · 2022-07-14T10:23:00Z

@dannyhw I have tried with inlineRequires: false in react-native-cli application which is causing other issues in the project

SamakaCD · 2022-07-28T14:58:12Z

Setting inlineRequires to false or true didn't help me. However, it's possible to avoid the issue by loading a module with the Storybook lazily like this:

<NavigationContainer>
  ...
    <Stack.Screen name={Routes.Storybook}>
      {() => {
        const { Storybook } = require('./screens/Storybook')
        return <Storybook />
      }}
    </Stack.Screen>
  ...
</NavigationContainer>

MarkKewley · 2022-12-27T18:05:07Z

Why is this issue closed? It's still occurring for me on Android only devices using the latest expo/storybook. Crazy that there hasn't been a ton of progress in 3.5 years... yea yea I suppose I could dig in but I'm pretty lazy right now.

The work around that worked for me though was from @SamakaCD so thank you. I had to do a slight modification for my purposes (since my ./storybook is just exporting a default React tsx component)

const StorybookUI = require('./storybook').default;
return <StorybookUI />;

dannyhw · 2022-12-27T19:43:04Z

Its closed because many solutions have been posted here that don't seem related to any storybook code. Also lots has changed in the v6 beta so its very likely this issue wouldn't occur anymore. Happy to reopen if its shown to be a persistent issue in the beta.

MarkKewley · 2022-12-27T23:30:19Z

Yea I'm on 5.3 (just added storybook to my app yesterday) and after doing so I was encountering this issue with Android only devices.

When I removed all the boilerplate setup code for Storybook in the storybook/index.tsx the issue dissapeared.

What was also strange is that all my SecureStore functions were basically empty which I think was causing all the unhandled exceptions which resulted in the max call stack.

Refactoring to lazy-load the storybook related code iff I was running in storybook mode (dotenv variable to toggle it on/off) resolved the issue.

E.g.

export default function App() {
  ... extra code for splash screen/colorscheme/etc...
  
  if (STORYBOOK_ENABLED === 'true') {
    const StorybookUI = require('./storybook').default;
    return <StorybookUI />
  }

  // main app code
  return (
    ...
  );
}

I'll have to give v6 a shot at some point to see if the issue disappears.

gavrix · 2023-04-12T20:41:11Z

If anyone finds this ticket first. This issue appears with storybook v6 as well. This solution fixed it for us (Hermes + inlineRequires: true)

dannyhw · 2023-04-13T07:05:32Z

Inline requires changes shouldn't be needed if you have this in your metro config

  resolver: {
    resolverMainFields: [
      "sbmodern",
      ...defaultConfig.resolver.resolverMainFields,
    ],
  }

pfcodes · 2023-08-28T06:50:44Z

Inline requires changes shouldn't be needed if you have this in your metro config
  resolver: {
    resolverMainFields: [
      "sbmodern",
      ...defaultConfig.resolver.resolverMainFields,
    ],
  }

Only started to experience this after upgrading to expo 49. this fixed it for me. thanks.

stale bot closed this as completed Aug 2, 2019

shilman transferred this issue from storybookjs/storybook Dec 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Native Storyshots - RangeError: Maximum call stack size exceeded #302

React Native Storyshots - RangeError: Maximum call stack size exceeded #302

nigelsim commented May 28, 2019

jamsch commented Jun 7, 2019 •

edited

Loading

nigelsim commented Jun 12, 2019

stale bot commented Jul 3, 2019

stale bot commented Aug 2, 2019

insidewhy commented Sep 25, 2019

kyle-ssg commented Nov 29, 2019 •

edited

Loading

ENT108 commented Sep 23, 2021

enesozturk commented Dec 1, 2021

dannyhw commented Dec 1, 2021

enesozturk commented Dec 18, 2021 •

edited

Loading

dannyhw commented Dec 18, 2021

enesozturk commented Dec 18, 2021 •

edited

Loading

enesozturk commented Dec 18, 2021

dannyhw commented Dec 18, 2021

ayushjain6 commented Jul 14, 2022

SamakaCD commented Jul 28, 2022 •

edited

Loading

MarkKewley commented Dec 27, 2022

dannyhw commented Dec 27, 2022

MarkKewley commented Dec 27, 2022 •

edited

Loading

gavrix commented Apr 12, 2023 •

edited

Loading

dannyhw commented Apr 13, 2023 •

edited

Loading

pfcodes commented Aug 28, 2023

React Native Storyshots - RangeError: Maximum call stack size exceeded #302

React Native Storyshots - RangeError: Maximum call stack size exceeded #302

Comments

nigelsim commented May 28, 2019

jamsch commented Jun 7, 2019 • edited Loading

nigelsim commented Jun 12, 2019

stale bot commented Jul 3, 2019

stale bot commented Aug 2, 2019

insidewhy commented Sep 25, 2019

kyle-ssg commented Nov 29, 2019 • edited Loading

ENT108 commented Sep 23, 2021

enesozturk commented Dec 1, 2021

dannyhw commented Dec 1, 2021

enesozturk commented Dec 18, 2021 • edited Loading

dannyhw commented Dec 18, 2021

enesozturk commented Dec 18, 2021 • edited Loading

enesozturk commented Dec 18, 2021

dannyhw commented Dec 18, 2021

ayushjain6 commented Jul 14, 2022

SamakaCD commented Jul 28, 2022 • edited Loading

MarkKewley commented Dec 27, 2022

dannyhw commented Dec 27, 2022

MarkKewley commented Dec 27, 2022 • edited Loading

gavrix commented Apr 12, 2023 • edited Loading

dannyhw commented Apr 13, 2023 • edited Loading

pfcodes commented Aug 28, 2023

jamsch commented Jun 7, 2019 •

edited

Loading

kyle-ssg commented Nov 29, 2019 •

edited

Loading

enesozturk commented Dec 18, 2021 •

edited

Loading

enesozturk commented Dec 18, 2021 •

edited

Loading

SamakaCD commented Jul 28, 2022 •

edited

Loading

MarkKewley commented Dec 27, 2022 •

edited

Loading

gavrix commented Apr 12, 2023 •

edited

Loading

dannyhw commented Apr 13, 2023 •

edited

Loading