react-native: React Native Storybook doesn't work with iOS/Android Hermes Engine in React Native v0.64.0

Describe the bug When I run react-native storybook with React Native v0.64.0 and Hermes enabled for iOS/Android platform it throws en error:

RangeError: Maximum call stack size exceeded, js engine: hermes
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

If Hermes JS Engine disabled everything works fine for iOS/Android platforms.

To Reproduce Steps to reproduce the behavior:

Setup basic React Native Storybook app according to Docs
Use React Native v0.64 app template
Enable iOS Hermes JS engine according to React Native docs
Enable Android Hermes JS engine according to React Native docs
Assemple iOS and Android app
App will be compiled succesfully, but when app starts, JS error thrown.

Expected behavior App is running storybook correctly

Screenshots App throws an error and cannot be bootstrapped.

System:

 System:
    OS: macOS 11.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.15.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
    Edge: 89.0.774.54
    Firefox: 84.0.2
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-knobs: 5.3.21 => 5.3.21 
    @storybook/addon-ondevice-knobs: 5.3.25 => 5.3.25 
    @storybook/cli: 5.3.21 => 5.3.21 
    @storybook/react-native: 5.3.25 => 5.3.25

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 40
Comments: 42 (21 by maintainers)

Most upvoted comments

@oleksandr-dziuban @apostopher I found something interesting when I was investigating and I was able to make the error go away. From what I can tell the issue is that “JSON” was coming up as undefined, through some googling I found that hermes might have an issue with “inlineRequires”. When I change metro config to have inlineRequires: false the issue seems to go away.

+31

dannyhw on Mar 26, 2021

@dannyhw Thanks a lot for thsi research! it works perfectly with inlineRequires: false. Are you planning to fix inlineRequires: true case ?

oleksandr-dziuban on Mar 30, 2021

We believe that this is fixed in the v6 alpha and using inlineRequires:false is a workaround for 5.3. For those reason I’ll close this issue. Please let us know if you continue to have this issue in the v6 alpha.

dannyhw on Sep 13, 2021

@dannyhw thanks mate! i tested it with inlineRequires: false and it builds perfectly. i’ll try to make it work with inlineRequires. I read about it and it seems its an issue with core-jsandinlineRequires`. But that is not related to this issue.

Thanks a lot for investigating. i can confirm that it works for me now.

apostopher on Mar 27, 2021

@henrymoulton yeah but i was talking about not using ram bundles with hermes.

Anyway inline requires works you just need to add sbmodern to your metro resolvers config

module.exports = {
  /* existing config */
  resolver: {
    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
  },
};

This only works on v6.5 though

dannyhw on May 2, 2023

@dannyhw here is the repo to reproduce the errors below: Storybook with hermes please see the commit messages for the steps i followed.

Note that I could reproduce this error only when using the storybook server and on device UI is disabled.

apostopher on Mar 24, 2021

@CavidM sorry but I don’t see how that would be related to this, if you can explain the link between redux slices and storybook I’m happy to try and debug.

Ah great it works now thanks!

sekoyo on Jun 6, 2023

@dannyhw Hey, i just tested the latest alpha version. I still have to set inlineRequires: false, or otherwise get the named exception thrown. Can you reproduce on your end? Otherwise i will provide a reproduction!

(react native version 0.68.2)

hannojg on Jun 26, 2022