React Native Storybook doesn't work with iOS/Android Hermes Engine in React Native v0.64.0 #152

oleksandr-dziuban · 2021-03-16T12:04:50Z

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

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

wenzelua · 2021-03-16T12:06:11Z

same here

balovbohdan · 2021-03-16T16:04:29Z

Faced the same issue.

dannyhw · 2021-03-20T19:24:25Z

Hey guys thanks for reporting these issues, I haven't had a chance to test this yet. I wasn't aware of any incompatibly with hermes, I'll look into it.

Are you able to provide a repository that reproduces the issue?

dannyhw · 2021-03-20T19:39:48Z

If anyone is able to offer their time to help on this issue that would be really great, it might take some time for me alone to test everything with 0.64. This is all done in my free time outside of work hours so please be patient with me 🙏 .

I've just made a fresh react native project for testing this out and I'll be doing some debugging tonight.

dannyhw · 2021-03-20T20:34:16Z

@oleksandr-dziuban @SlaUA @balovbohdan I just tried this on my machine and I had no issues getting it working without making any changes.

Could you please share a repository where you are able to produce this error?

dannyhw · 2021-03-20T22:07:03Z

I've found a bit of an issue when using the code generated by cli alongside existing projects, I'm not sure if it's related however I think I will need to update the generator in the cli.

If it is relatedThere are some changes you could make that might resolve your issue however I need to see some of your code to be sure.

oleksandr-dziuban · 2021-03-21T18:07:33Z

I've found a bit of an issue when using the code generated by cli alongside existing projects, I'm not sure if it's related however I think I will need to update the generator in the cli.

If it is relatedThere are some changes you could make that might resolve your issue however I need to see some of your code to be sure.

Hello @dannyhw Sorry, can't share a repo, as this e-commerce project is under NDA. Which issues did you find and what we can do to help you to test it?
Thanks

dannyhw · 2021-03-21T18:27:47Z

@oleksandr-dziuban its not necessary to share the project itself but if you could try to recreate the issue in a fresh project and then share that with me it would be really useful.

Otherwise you could share just the parts of the code that include the storybook configuration and the place where you use the component returned from getStorybookUI. Of course feel free to take out any code specific to your project and modify it so that it doesn't breach the nda.

dannyhw · 2021-03-22T18:54:57Z

Just want to re-iterate that in order to fix any issues I really need someone to show me an example of this not working so that I can help the best way possible. Doesn't need to be the issue creator or any real world code, just any example or steps to reproduce. I've not found any issues with hermes or 0.64 personally when I try it so I need to understand better where this issue is coming from.

dannyhw · 2021-03-22T18:58:20Z

@oleksandr-dziuban in your issue description you have given some steps but its not clear to me exactly the steps you followed.

"Setup basic React Native Storybook app according to Docs" - which docs are you refering to? the readme?
"Use React Native v0.64 app template" - which template are you using? typescript or normal? expo or not expo?

apostopher · 2021-03-24T13:46:33Z

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

dannyhw · 2021-03-24T20:40:47Z

@apostopher thanks a lot for providing this, it will definitely help a lot 👍.

oleksandr-dziuban · 2021-03-25T21:37:17Z

@oleksandr-dziuban in your issue description you have given some steps but its not clear to me exactly the steps you followed.

"Setup basic React Native Storybook app according to Docs" - which docs are you refering to? the readme?
"Use React Native v0.64 app template" - which template are you using? typescript or normal? expo or not expo?

Readme, yes, simple project without typescript and without expo

oleksandr-dziuban · 2021-03-25T21:38:23Z

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

For me it reproduced without storybook server and on device ui enabled

dannyhw · 2021-03-26T15:55:40Z

@oleksandr-dziuban if you could provide an example of this then that would help alot, so far I haven't been able to reproduce anything without the storybook server

dannyhw · 2021-03-26T16:53:11Z

@apostopher I was able to see the issue when running your example. It seems the issue is caused by trying to connect with the server, perhaps hermes doesn't support web sockets? Anyway I'm looking into it.

dannyhw · 2021-03-26T17:16:24Z

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

apostopher · 2021-03-27T00:55:59Z

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

oleksandr-dziuban · 2021-03-30T15:23:55Z

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

dannyhw · 2021-03-30T16:00:09Z

@oleksandr-dziuban In short yes I would love to fix that case, at the moment I'm just not sure how.

If its related to corejs it would be difficult to resolve. The storybook client api is using babel transforms to support older versions of javascript and I think even the typescript compiler will transform using corejs. Even if I were to provide the react-native code without transforms there isn't a way that I can get the client-api without those babel transformations.

If I can figure out what specifically causes the issue I'll be able to say more clearly though.

oleksandr-dziuban · 2021-03-31T14:38:29Z

@oleksandr-dziuban In short yes I would love to fix that case, at the moment I'm just not sure how.

If its related to corejs it would be difficult to resolve. The storybook client api is using babel transforms to support older versions of javascript and I think even the typescript compiler will transform using corejs. Even if I were to provide the react-native code without transforms there isn't a way that I can get the client-api without those babel transformations.

If I can figure out what specifically causes the issue I'll be able to say more clearly though.

Thanks

henrymoulton · 2021-05-24T10:08:33Z

@dannyhw thanks for the workaround.

Is this something that might be resolved in V6?

dannyhw · 2021-05-24T11:17:56Z

@henrymoulton I hope so, however I'll have to do some debugging since I've not identified the cause yet.

henrymoulton · 2021-05-25T09:53:35Z

Going to try and dig, I've got a version I just setup where Android works with a fresh setup

https://github.com/henrymoulton/storybook-hermes

Will branch off main and try enabling Hermes on iOS see if that causes a crash.

henrymoulton · 2021-05-25T10:01:38Z

Yep that works...

https://github.com/henrymoulton/storybook-hermes/tree/ios-hermes-enabled

@apostopher I noticed that your repro uses TypeScript whereas mine uses vanilla JS... other than that couldn't spot differences

henrymoulton · 2021-05-25T17:28:05Z

Lock diff: https://gist.github.com/henrymoulton/9edca423242ce5a03198296741f13452

dannyhw · 2021-05-25T18:16:55Z

@henrymoulton I noticed a difference in the lock diff that that one has react native 0.64.1 and the other 0.64. Is it possible that there was a fix in 64.1?

edit: I checked the release notes and 64.1 just includes the fix for xcode 12.5

dannyhw · 2021-09-13T18:33:22Z

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.

hannojg · 2022-06-26T18:38:41Z

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

dannyhw · 2022-06-27T19:15:23Z

@hannojg hey, I haven't come across this issue in a while and I'm not totally sure why it happens. I think it has something to do with the way that we import stories. Does this happen on a fresh project also?

JSONRice · 2022-10-06T19:46:48Z

@dannyhw great suggestion on that inlineRequires: false That ended up working for me after I spent a day on this. The documentation could really be consolidated and cleaned up. Wish I had more time to assist but I'm heads down on some tight deadlines. Keep up the good work! Risa's tutorial helped out but is now partially outdated.

henrymoulton · 2023-03-02T09:55:18Z

@dannyhw noticed this issue closed, we don't want to set inlineRequires: false as that reduces some performance optimisation that's possible in RN, is there a workaround? https://reactnative.dev/docs/ram-bundles-inline-requires

Is there a fix in v5/6

dannyhw · 2023-03-02T09:58:01Z

@henrymoulton Not sure why this happens exactly but I never run into this issue on v6 so I guess using the release candidate version maybe 😅

dannyhw · 2023-03-02T09:59:22Z

Also as far as I understand ram bundles don't work on hermes so I'm not sure that would be very widely used

henrymoulton · 2023-05-02T12:02:13Z

Even without the RAM format, inline requires can lead to startup time improvements, because the code within VeryExpensive.js will only execute once it is required for the first time.

@dannyhw my understanding is that you can still use inline requires without RAM format and the docs encourage it.

dannyhw · 2023-05-02T12:04:18Z

@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

CavidM · 2023-06-02T20:25:40Z

Now app starts but can't run with redux dispatch method. I'm using redux toolkit slices. Commenting actions which is exported from slice solves the issue.

dannyhw · 2023-06-02T21:11:55Z

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

sekoyo · 2023-06-06T15:13:57Z

I upgraded from 6 to 6.5 (semver would suggest this is a non-breaking update) and added resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'], but first I had to add @storybook/core-common to fix an exception about it missing, and now I have Unable to resolve module react-dom from .../node_modules/@storybook/preview-web/dist/modern/renderDocs.js: react-dom could not be found within the project or in these directories:

Seems like it started to think I'm using the DOM. Anyone have some upgrade tip for going to 6.5? I need inlineRequires: true to load local files in react-native-webview

dannyhw · 2023-06-06T15:21:40Z

@dominictobias unfortunately you need to install react-dom since its used by a storybook dependency.

You can put inlinesRequires:true as long as you have sbmodern in your resolverMainfields.

sekoyo · 2023-06-06T15:27:50Z

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

younthu · 2023-09-27T00:49:31Z

works with following config in metro.config.js:

module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true, }, }), }, resolver: { resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'], // https://github.com/storybookjs/react-native/issues/152#issuecomment-1578970298 }, };

dannyhw added bug Something isn't working needs reproduction labels Mar 20, 2021

dannyhw added has workaround and removed needs reproduction labels Apr 11, 2021

dannyhw closed this as completed Sep 13, 2021

enesozturk mentioned this issue Dec 18, 2021

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

Closed

sandipndev mentioned this issue Dec 13, 2023

fix: storybook GaloyMoney/blink-mobile#2921

Merged

React Native Storybook doesn't work with iOS/Android Hermes Engine in React Native v0.64.0 #152

React Native Storybook doesn't work with iOS/Android Hermes Engine in React Native v0.64.0 #152

Comments

oleksandr-dziuban commented Mar 16, 2021

wenzelua commented Mar 16, 2021

balovbohdan commented Mar 16, 2021

dannyhw commented Mar 20, 2021

dannyhw commented Mar 20, 2021 • edited Loading

dannyhw commented Mar 20, 2021

dannyhw commented Mar 20, 2021

oleksandr-dziuban commented Mar 21, 2021

dannyhw commented Mar 21, 2021 • edited Loading

dannyhw commented Mar 22, 2021 • edited Loading

dannyhw commented Mar 22, 2021

apostopher commented Mar 24, 2021 • edited Loading

dannyhw commented Mar 24, 2021

oleksandr-dziuban commented Mar 25, 2021

oleksandr-dziuban commented Mar 25, 2021

dannyhw commented Mar 26, 2021 • edited Loading

dannyhw commented Mar 26, 2021

dannyhw commented Mar 26, 2021

apostopher commented Mar 27, 2021

oleksandr-dziuban commented Mar 30, 2021 • edited Loading

dannyhw commented Mar 30, 2021

oleksandr-dziuban commented Mar 31, 2021

henrymoulton commented May 24, 2021

dannyhw commented May 24, 2021

henrymoulton commented May 25, 2021 • edited Loading

henrymoulton commented May 25, 2021 • edited Loading

henrymoulton commented May 25, 2021

dannyhw commented May 25, 2021 • edited Loading

dannyhw commented Sep 13, 2021

hannojg commented Jun 26, 2022 • edited Loading

dannyhw commented Jun 27, 2022

JSONRice commented Oct 6, 2022

henrymoulton commented Mar 2, 2023 • edited Loading

dannyhw commented Mar 2, 2023

dannyhw commented Mar 2, 2023

henrymoulton commented May 2, 2023

dannyhw commented May 2, 2023 • edited Loading

CavidM commented Jun 2, 2023

dannyhw commented Jun 2, 2023 • edited Loading

sekoyo commented Jun 6, 2023 • edited Loading

dannyhw commented Jun 6, 2023

sekoyo commented Jun 6, 2023

younthu commented Sep 27, 2023 • edited Loading

dannyhw commented Mar 20, 2021 •

edited

Loading

dannyhw commented Mar 21, 2021 •

edited

Loading

dannyhw commented Mar 22, 2021 •

edited

Loading

apostopher commented Mar 24, 2021 •

edited

Loading

dannyhw commented Mar 26, 2021 •

edited

Loading

oleksandr-dziuban commented Mar 30, 2021 •

edited

Loading

henrymoulton commented May 25, 2021 •

edited

Loading

henrymoulton commented May 25, 2021 •

edited

Loading

dannyhw commented May 25, 2021 •

edited

Loading

hannojg commented Jun 26, 2022 •

edited

Loading

henrymoulton commented Mar 2, 2023 •

edited

Loading

dannyhw commented May 2, 2023 •

edited

Loading

dannyhw commented Jun 2, 2023 •

edited

Loading

sekoyo commented Jun 6, 2023 •

edited

Loading

younthu commented Sep 27, 2023 •

edited

Loading