Maximum call stack size exceeded

[Mellbourn]

I'm trying to get loki running in a react-native solution (based on nx) that uses TypeScript.

My starting state is that I have a working Storybook. The http://localhost:7007 site is working and controlling the stories rendered in the ios emulator.

So, first of all, I'm doing manual configuration because loki init wants to update a JavaScript file storybook.js, but I only have TypeScript files. But as far as I can see, the important things that loki init does is to add a config to the package.json and an import 'loki/configure-react-native'; to the storybook.js, so I've inserted the latter manually into my storybook.ts file.

But after adding import 'loki/configure-react-native'; , I get an infinite call loop on startup:

It seems to be specifically the import 'loki/configure-react-native'; statement that is causing problems. If I remove it, everything works as usual.

This is our storybook.ts content
(btw, enableWebsockets was important to get the connection to the storybook website working):

import 'loki/configure-react-native';
import { AppRegistry } from 'react-native';
import { configure, getStorybookUI } from '@storybook/react-native';
import { uiOrganismsStories } from 'rn/ui/organisms';
import SplashScreen from 'react-native-splash-screen';

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

const StorybookUIRoot = getStorybookUI({
  enableWebsockets: true,
  host: 'localhost',
  port: 7007,
  isUIHidden: true,
});

SplashScreen.hide();

AppRegistry.registerComponent('Myapp', () => StorybookUIRoot);

export default StorybookUIRoot;

Here is a fragment of package.json that might be relevant:

    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/core-server": "^6.5.16",
    "@storybook/react-native": "^6.0.1-beta.12",
    "@storybook/react-native-server": "^5.3.23",
    "loki": "^0.31.0",

Other versions:
node 16.17.0
macOS Ventura 13.2.1
XCode 14.2

[oblador]

What combo of RN and SB are you using? Are you using hermes as JS engine (I've had stack size issues with that one before)?

[Mellbourn]

Thanks for the quick reply Joel!

We're using react-native 0.70.6.
We are indeed using hermes. The hermes-engine version is 0.70.6

We've managed to work around the error by changing the setting inlineRequires to false in metro.config.js:

  return withNxMetro(
    {
      transformer: {
        getTransformOptions: async () => ({
          transform: {
            experimentalImportSupport: false,
            inlineRequires: false,
          },
        }),

[oblador]

Yeah, what I found that was particularly troublesome with storybook and Hermes was the core-js polyfills. Since SB 6 for RN is really close to be stable, I think it's time that I update the example to use it (finally CSF! 😌) and see if I can reproduce the error (and hopefully fix).

[oblador]

Some early findings, I couldn't get anything basic working without applying this: storybookjs/react-native#405 (comment)