storybook: storybook on react-native does not work with hmr (hot module reload) properly

For HMR (hot module reload) to work, the root component has to be a class, as it seems.

I therefore added this to storybook/storybook.js :

const StorybookUIOrg = getStorybookUI({ port: 7007, onDeviceUI: true })

const StorybookUI = class extends Component {
  render() {
    return <StorybookUIOrg />
  }
}

AppRegistry.registerComponent('homestory', () => StorybookUI)

This used to work in the past, but with latest version, i just see the native ui menu and some warnings like:

“The prop url is marked as required in StoryView but it’s value is null”

and

“The prop url is marked as required in OnDeviceUI, but it’s value is null”

Edit: without the class above, there is no warning. But hot reload does not work. On the simulator it notifies about “hot reloading”, but nothing changes.

Edit 2: if i change to a different story after hot reload and back, the changes are applied… So what’s wrong?

I now switched back to live reload, HMR seems broken at the time beeing

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 17 (12 by maintainers)

Commits related to this issue

#2081 #2117 fix null prop type — committed to storybookjs/storybook by danielduan 7 years ago
#2081 fix hmr in react-native template — committed to storybookjs/storybook by danielduan 7 years ago
Merge pull request #2185 from storybooks/dd/rn-url-prop #2081 #2117 fix prop type in react-native — committed to storybookjs/storybook by danielduan 7 years ago
Merge pull request #2194 from storybooks/dd/rn-hmr #2081 fix hmr in react-native template — committed to storybookjs/storybook by Hypnosphi 7 years ago
#2081 add hmr to other rn app template — committed to storybookjs/storybook by danielduan 7 years ago
Merge pull request #2213 from storybooks/dd/hmr #2081 add hmr to other rn app template — committed to storybookjs/storybook by danielduan 7 years ago

Most upvoted comments

I’m on “@storybook/react-native”: “^4.0.0-alpha.25” and in order to get hot reloading working again after integrating storybook into my app I had to do the following. Note the comment about react-native hot module loader must take a class.

/**
 * storybook/index.js
 **/
import React, { Component } from "react";
import { AppRegistry } from "react-native";
import { getStorybookUI, configure } from "@storybook/react-native";

import "./rn-addons";

// import stories
configure(() => {
  require("../App/Components/Stories");
}, 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({ port: 7007, onDeviceUI: true });

// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
// https://github.com/storybooks/storybook/issues/2081
// eslint-disable-next-line react/prefer-stateless-function
class StorybookUIHMRRoot extends Component {
  render() {
    return <StorybookUIRoot />;
  }
}

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you can safely remove this line.
// AppRegistry.registerComponent("ExportPro", () => StorybookUIRoot);

export default StorybookUIHMRRoot;

jqn on Nov 8, 2018

We’ve released a brand new @storybook/react-native with a bunch of core improvements. It’s available in the latest 5.1-alpha on next and has been verified by several RN users on their existing apps. It should fix a bunch of compatibility issues, especially if you’re using the web server feature. Please give it a try and comment here if it fixes your problem. Migration instructions available here: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#react-native-server

@macrozone @odino @b3ngineer @maxhungry @tonyxiao @Bardiamist @danielduan @EskelCz @Maxim-Filimonov @axelnormand @jqn @jjm340 @iamolegga @FunkSoulNinja @miltoneiji @Gongreg

shilman on Mar 22, 2019

Sadly there was no effort done to fix hmr

Gongreg on Jul 25, 2019

@shilman 5.2-beta.7

stereodenis on Jul 25, 2019

@jqn This worked for me as well

jjm340 on Feb 14, 2019

I too am getting this error. For now I’ve added this hack to my init storybook function to at least delay the error for a bit 😃 I’ll report back if it works or not.

require('events').EventEmitter.defaultMaxListeners = 200;

I’m using a global decorator along with create react native app, typescript and storyshots. Happy to attempt a PR if anyone can suggest the best place to look

axelnormand on Mar 9, 2018

@danielduan The issue is not resolved. I updated storybook to yesterdays version (3.2.14) and verified that the storybook index file matches this template https://github.com/storybooks/storybook/pull/2194 (I already had the base component as a class instead of a stateless function).

HMR still does not work in this setup. Any change to a file will trigger a refresh in the app, but it will crash with:

console.error: "(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.", 11

Object.console.error
    hashAssetFiles:55868:11
EventEmitter.addListener
    hashAssetFiles:166001:15
 (...)

by using the debugger i see that this happens in

 _this3._events.on('setCurrentStory', function (d) {
          return _this3._selectStory(d);
        });

Edit:

I am using CRNA (with expo) and i have added decorators to stories (e.g. ThemeProvider from styled-components).

Edit2: If I dismiss the error, storybook will show the startscreen again for a moment and go back to the story with the changes. Any further change to the components will have no effect and won’t trigger HMR anymore.

Edit3: if i disable remote debugging, the memory leak error is still there, but otherwise HMR seems to work besides this bug: https://github.com/storybooks/storybook/issues/835

macrozone on Nov 2, 2017