storybook: Broken with react-native@0.57 due to packager (local-cli) API change

If you don’t want to include StorybookUI in your main app and want to continue to use the old standalone behavior, change the npm script to:

"storybook": "storybook start -p 7007 --skip-packager | react-native start --projectRoot storybook",

This worked for me https://github.com/facebook/react-native/issues/20876

Based on @jacquesdev comment, I followed this recommandation.

I got rid of the error by adding those two dependencies:

• “@babel/core”: “7.1.0”
• “babel-core”: “7.0.0-bridge.0”

However storybooks’ packager is still not starting despite http://localhost:7007/ can be accessed.

I’m having this issue too. Is the

error: unknown option `--projectRoots'

part what’s causing this?

Hello everyone, Regarding this issue use --skip-packager command when starting the storybook server.

Then use

import { getStorybookUI } from '@storybook/react-native';

const StorybookUIRoot = getStorybookUI();

And somewhere in your app (a separate screen, admin panel, anything) render the StorybookUIRoot

class YourScreen extends Component {
  render() {
    return (
      <View>
        <StorybookUIRoot />
      </View>
    );
  }
}

This should help. We want to remove the packager completely (since it is bringing a lot of unnecessary issues), but I am away for some time. We cannot just change the options since that would break older RN versions users. So to make it fair we will remove the packager completely 😃

Sorry that something is not working, we will update the docs explaining the issue.

I saw your comment @robwalkerco, just wanted to write a message so people would know that we know about this issue.

@chawax Thank you! Looks like react-native@0.57.2 uses metro@0.47.0 and this was fixed in metro@0.48.0: https://github.com/facebook/metro/commit/e595178fc859263cc2d88de08650d99c52bcc0d9. I was able to fix by adding a Yarn resolution to my package.json for now:

"resolutions": {
  "metro": "0.48.0"
}

I had this problem and I solved it by making this change in node_modules/metro/src/reactNativeTransformer.js

const hmrConfig = makeHMRConfig(options, filename);
    const hmrConfig = makeHMRConfig(
      options,
      path.resolve(options.projectRoot, filename),
 );

If it works, you can use patch-package to create a patch and apply it on every npm install

I had read this solution but I can’t remember where !

@cball I am in the same situation as you. I can get things to build correctly with v4.0.0-alpha.21 but the packager doesn’t appear to run and so the simulator just gives me a No bundle URL present red screen

I’ve done what @petrbela suggested to run storybook standalone and updated babel-core to 7.0.0-bridge.0.

The server starts fine now but when I try to run $ react-native run-ios I get a module resolution error for react-transform-hmr because it is trying to look for it within ./storybook/node_modules/react-transform-hmr but it exists further up the tree. I don’t suppose anyone knows how to fix this? 🙈 I realise I’m hijacking this thread a bit but my googling hasn’t helped.

I found my problem. I had forgotten to change react-dom dependency to 16.5.0, the same release as the one required by React Native 0.57.2 !

@K-Eo If you run storybook with the --skip-packager option, you can continue to use the normal react-native packager that you app uses, and then import StorybookUI from '../storybook/storybook' add <StorybookUI /> as a Component in your app to view it.

I was able to get it working that way, so hopefully it will work ok for you too… (Also, see https://github.com/storybooks/storybook/pull/4196)

I have the same issue with a fresh react-native app. As @griable said on changing babel-core to 7.0.0-bridge.0 fixes metro module error and I can run the server but the Storybook UI doesn’t show any component.

same issue !