react-native: React Native Storyshots - RangeError: Maximum call stack size exceeded

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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 22 (5 by maintainers)

Most upvoted comments

It’s still an issue 😕

+15

ENT108 on Sep 23, 2021

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

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

dannyhw on Apr 13, 2023

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
    },
  };
})();

enesozturk on Dec 18, 2021

@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.

enesozturk on Dec 18, 2021

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

dannyhw on Dec 18, 2021