react-native: storybook for React Native can't excute resolve of promise

If you are reporting a bug or requesting support, start here:

Bug or support request summary

When your start a story about react native component, you write a promise in the component and the promise’s then does’t work.

Please specify which version of Storybook and optionally any affected addons that you’re running

@storybook/react-native 5.3.18
@storybook/addons 5.3.18

Screenshots / Screencast / Code Snippets (Optional)

code of story is as as below

import React from "react";
import { storiesOf } from "@storybook/react-native";
import Article from "./Article";

storiesOf("Article", module)
  .add("mock data", () => (
    <Article
    />
  )

code of component is as as below

import React, { Component } from "react";
import { View, Text } from "react-native";
export default class Article extends Component {
  public constructor(props) {
    super(props);
    this.state= {
      content: ''
    };
  }
  componentDidMount() {
    const getContent = new Promise((resolve) => {
      setTimeout(() => {
          resolve('Hello World')
      },3000)
    })
    getContent.then(res => {
      this.setState({content: res})
    }).catch(e => {
      console.log(e)
    });
  }

  render() {
    const { content } = this.state;
    return (
      <View>
        <Text>{content}</Text>
      </View>
    );
  }
}

The function of setTimeout has been called,but getContent.then didn’t work.I test same scene in
storybook for React, the then of promise works.Did storybook for React Native do something for promise so that it can’t work?

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 10
Comments: 27 (12 by maintainers)

Links to this issue

Promises doesn't work

Most upvoted comments

Indeed, it works better. It turns out I still had issues… on iOS 😱 (I thought this was Android specific…)

To sum up:

If someone encounters the same issue, the following changes together solved it. Using the following versions:

    "@storybook/addon-actions": "5.3.21",
    "@storybook/addon-links": "5.3.21",
    "@storybook/addons": "5.3.21",
    "@storybook/react-native": "5.3.25",

Then:

in metro.config.js, I set the inlineRequires to false
I used the patch-package to remove the es.promises import in node_modules/@storybook/addons/dist/index.js

diff --git a/node_modules/@storybook/addons/dist/index.js b/node_modules/@storybook/addons/dist/index.js
index 589d611..36dd045 100644
--- a/node_modules/@storybook/addons/dist/index.js
+++ b/node_modules/@storybook/addons/dist/index.js
@@ -8,7 +8,7 @@ require("core-js/modules/es.object.to-string");
 
 require("core-js/modules/es.object.values");
 
-require("core-js/modules/es.promise");
+// require("core-js/modules/es.promise");
 
 require("core-js/modules/web.dom-collections.for-each");

Thank you @dannyhw !

pierpo on Jul 13, 2021

@pierpo in the new alpha you need to use resolverMainFields: ['sbmodern', 'main'] in your metro config to get the modern build of storybook packages. Many of the packages have this polyfill and others that cause problems, in the new alpha it’s fixed and I’ve added an example in the example project specifically to verify this bug is fixed.

To test the new alpha check this guide: https://github.com/storybookjs/react-native/blob/next-6.0/v6README.md

Not sure what alpha version you were using but this is the correct one: https://github.com/storybookjs/react-native/releases/tag/v6.0.1-alpha.0

It requires some work to migrate to the new version though and I haven’t made a migration guide just yet.

dannyhw on Jul 19, 2021

@pierpo there might be some solutions here #20

You can try making a patch with this change

If you open up node_modules/@storybook/addons/dist/index.js

and comment out line 11 //require("core-js/modules/es.promise");

dannyhw on Jul 7, 2021

Okay. Thanks for the quick response @dannyhw! Just putting it here as a temp fix till a permanent solution is achieved. We ended up using patch-package - https://www.npmjs.com/package/patch-package.

Go to node_modules/core-js, comment the es.promise.js file in the modules directory and run the patch-package command.

intergalacticspacehighway on Dec 3, 2020

@deiden26 try searching your node_modules for this require("core-js/modules/es.promise"); and remove it in every instance.

dannyhw on Jan 6, 2023

@Peeeep yes that does seem to be the case for some packages now.

However since this is now resolved in 6.0 beta and also is mostly a duplicate of #20 I think it makes sense to close this issue.

Also for 5.3 you can patch storybook/addons to remove the es promise polyfill that fixes this.

diff --git a/node_modules/@storybook/addons/dist/index.js b/node_modules/@storybook/addons/dist/index.js
index 589d611..81bc9e7 100644
--- a/node_modules/@storybook/addons/dist/index.js
+++ b/node_modules/@storybook/addons/dist/index.js
@@ -8,8 +8,6 @@ require("core-js/modules/es.object.to-string");
 
 require("core-js/modules/es.object.values");
 
-require("core-js/modules/es.promise");
-
 require("core-js/modules/web.dom-collections.for-each");
 
 Object.defineProperty(exports, "__esModule", {

dannyhw on Feb 25, 2022

For those struggling with resolverMainFields – the array needs ‘react-native’ included, too:

['sbmodern', 'react-native', 'main'] and for expo ['sbmodern', 'react-native', ...defaultConfig.resolver.resolverMainFields]

See https://github.com/storybookjs/react-native/pull/325 and https://github.com/storybookjs/react-native/commit/8d459bdbce0d13235d4a2b399119fb8bba8e4bae

Peeeep on Feb 25, 2022

Amazing. I’ll try this out.

Thank you for your commitment to this 😊

pierpo on Jul 19, 2021

@pierpo glad that you’re able to get it working 🙂

dannyhw on Jul 13, 2021

@pierpo

Is there any plan to solve this?

There won’t be a fix in 5.3 because it’s not possible without the 6.0 version of storybook dependencies. The fix is already in the 6.0 alpha that is in progress however the first alpha release has not been done yet. The initial alpha release will be done once the controls PR is completed.

Amazing @dannyhw! Thank you 😊

pierpo on Jul 6, 2021

@pierpo

Is there any plan to solve this?

There won’t be a fix in 5.3 because it’s not possible without the 6.0 version of storybook dependencies. The fix is already in the 6.0 alpha that is in progress however the first alpha release has not been done yet. The initial alpha release will be done once the controls PR is completed.

dannyhw on Jul 6, 2021