Storybook: Broken with [email protected] due to packager (local-cli) API change

[mgcrea]

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

Bug or support request summary

Bug

Steps to reproduce

On a fresh project (react-native init):

$ yarn storybook
yarn run v1.9.4
$ storybook start -p 7007
=> Loading custom .babelrc from project directory.
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
Scanning 1172 folders for symlinks in /Users/olivier/Projects/joonca/joonca-components/node_modules (12ms)

React Native Storybook started on => http://localhost:7007/


  error: unknown option `--projectRoots'

webpack built 91ec773834c48e7f9dab in 2184ms
Hash: 91ec773834c48e7f9dab
Version: webpack 3.12.0
Time: 2184ms

And another error after that:

ERROR in ./storybook/addons.js
Module build failed: Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/Users/olivier/Projects/joonca/joonca-components/storybook"

Looks like this commit is the culprit:

https://github.com/facebook/react-native/commit/c5ce7626977a7650e8dce335f2ce78b94839a2a8#diff-4a892a6b8856f0253e2de7094e585ae6

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

    "@storybook/addon-actions": "^3.4.10",
    "@storybook/addon-links": "^3.4.10",
    "@storybook/addons": "^3.4.10",
    "@storybook/react-native": "^3.4.10",

Affected platforms

react-native

[dslounge]

I'm having this issue too. Is the

error: unknown option `--projectRoots'

part what's causing this?

[resting]

Getting the same error.
Works with RN v0.55.4 though.

[jacquesdev]

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

[cball]

@jacquesdev mind providing more detail on the steps you took? I was able to get a project to build correctly using storybook v4.0.0-alpha.21, .babelrc.js and explicitly requiring metro-react-native-babel-preset but Storybook didn't seem to function correctly after that.

[kdawgwilk]

@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

[gatspy]

same issue !

[griable]

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.

[Amurmurmur]

@griable +1

[matheuscouto]

@griable +1

[blitzcom]

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.

[robwalkerco]

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

[Gongreg]

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.

[blitzcom]

@robwalkerco @Gongreg --skip-packager works. I did the import as you wrote, did reverse the ports and everything is working now. Thank you.

[sinewave440hz]

Hmm I have followed these instructions (ie. I have appended the storybook script command in package.json with --skip-packager, and inserted the Storybook component in my app) and am still getting the same issue (Module build failed: Error: Couldn't find preset "module:metro-react-native-babel-preset"). Could the fact that I am using typescript be affecting this? I am using RN 0.57's seamless typescript approach so I am not using the typescript setup described in your docs. I don't see why it should affect the server though, but maybe I'm missing something there. Thanks...

[robwalkerco]

@sinewave440hz
I have metro-react-native-babel-preset as a devDependency in package.json
I also have "presets": ["module:metro-react-native-babel-preset"] in .babelrc

[sinewave440hz]

Sorry, my mistake. I re-read the thread and realised I had missed upgrading the babel packages. All up and running now, thanks. (I only seemed to need the bridge: "babel-core": "7.0.0-bridge.0").

This got me up and running as I said, but hasn't got me up and running with typescript. That should be a new, different issue, as it straddles the existing ones really.

[petrbela]

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",

[Gongreg]

@petrbela, you are completely correct, this is what we will suggest for people who want to use old behaviour.

[chawax]

Thanks @petrbela , your solution worked for me, Storybook now starts and can be used on device and simulator.

Anyway I can't make it work from the browser (which is the only solution if you use actions plugin for example). I have the following error in my browser console when opening http://localhost:7007 :

app.js?f275:131 Uncaught TypeError: Cannot set property '_currentValue' of undefined
    at popProvider (react-dom.development.js?61bb:10977)
    at replayUnitOfWork (react-dom.development.js?61bb:11214)
    at renderRoot (react-dom.development.js?61bb:11773)
    at performWorkOnRoot (react-dom.development.js?61bb:12318)
    at performWork (react-dom.development.js?61bb:12239)
    at performSyncWork (react-dom.development.js?61bb:12216)
    at requestWork (react-dom.development.js?61bb:12116)
    at scheduleWorkImpl (react-dom.development.js?61bb:11991)
    at scheduleWork (react-dom.development.js?61bb:11951)
    at scheduleRootUpdate (react-dom.development.js?61bb:12579)

And I have this warning just before :

Warning :  Unexpected Fiber popped
  | printWarning | @ | warning.js?da67:33
-- | -- | -- | --
  | warning | @ | warning.js?da67:57
  | pop | @ | react-dom.development.js?61bb:11018
  | popProvider | @ | react-dom.development.js?61bb:10972
  | replayUnitOfWork | @ | react-dom.development.js?61bb:11214
  | renderRoot | @ | react-dom.development.js?61bb:11773
  | performWorkOnRoot | @ | react-dom.development.js?61bb:12318
  | performWork | @ | react-dom.development.js?61bb:12239
  | performSyncWork | @ | react-dom.development.js?61bb:12216
  | requestWork | @ | react-dom.development.js?61bb:12116
  | scheduleWorkImpl | @ | react-dom.development.js?61bb:11991
  | scheduleWork | @ | react-dom.development.js?61bb:11951
  | scheduleRootUpdate | @ | react-dom.development.js?61bb:12579
  | updateContainerAtExpirationTime | @ | react-dom.development.js?61bb:12607
  | updateContainer | @ | react-dom.development.js?61bb:12626
  | ReactRoot.render | @ | react-dom.development.js?61bb:15926
  | (anonymous) | @ | react-dom.development.js?61bb:16345
  | unbatchedUpdates | @ | react-dom.development.js?61bb:12426
  | legacyRenderSubtreeIntoContainer | @ | react-dom.development.js?61bb:16341
  | render | @ | react-dom.development.js?61bb:16409
  | _default | @ | routes.js?c5db:60
  | init | @ | app.js?f275:119
  | _default | @ | index.js?7559:72
  | (anonymous) | @ | index.js?bb35:14
  | ./node_modules/@storybook/react-native/dist/manager/index.js | @ | manager.bundle.js:1691
  | __webpack_require__ | @ | manager.bundle.js:725
  | fn | @ | manager.bundle.js:102
  | 0 | @ | manager.bundle.js:7533
  | __webpack_require__ | @ | manager.bundle.js:725
  | (anonymous) | @ | manager.bundle.js:792
  | (anonymous) | @

Anyone has an idea what causes this error ?

[chawax]

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 !

[lasersox]

I have followed the instructions here and resolved the metro bundler error, as well as upgraded babel and storybook packages.

Stuck on

ERROR in ./storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/lasersox/Projects/pyggybank-app/src/app/storybook/addons.js: .comments is not a valid Plugin property
    at Object.keys.forEach.key (/Users/lasersox/Projects/pyggybank-app/src/app/node_modules/@babel/core/lib/config/validation/plugins.js:52:56)
    at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/lasersox/Projects/pyggybank-app/src/app/node_modules/@babel/core/lib/config/validation/plugins.js:50:20)
    at instantiatePlugin (/Users/lasersox/Projects/pyggybank-app/src/app/node_modules/@babel/core/lib/config/full.js:209:21)
    at cachedFunction (/Users/lasersox/Projects/pyggybank-app/src/app/node_modules/@babel/core/lib/config/caching.js:33:19)
    at loadPluginDescriptor (/Users/lasersox/Projects/pyggybank-app/src/app/node_modules/@babel/core/lib/config/full.js:200:10)
    at config.plugins.reduce (/Users/lasersox/Projects/pyggybank-app/src/app/node_modules/@babel/core/lib/config/full.js:69:20)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (/Users/lasersox/Projects/pyggybank-app/src/app/node_modules/@babel/core/lib/config/full.js:67:38)
    at loadFullConfig (/Users/lasersox/Projects/pyggybank-app/src/app/node_modules/@babel/core/lib/config/full.js:66:21)
 @ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js manager[0]

Anybody else see this error?

[jjenzz]

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.

[chawax]

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 !

[jjenzz]

@chawax Thank you! Looks like [email protected] uses [email protected] and this was fixed in [email protected]: 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"
}

[Gongreg]

@ndelangen, What do we do with this task? Do we close it after 4.0?

[esbenvb]

@petrbela your trick does not work with a version 0.57.0 of RN.

By looking at the source, it seems like the --projectRoot option is documented and validated but the usage of the provided value is not implemented. In 0.57.3 it works.
https://github.com/facebook/react-native/compare/v0.57.0...v0.57.3#diff-33a4be2928925650375f54b552cb956f

Maybe that should be mentioned in your comment with the workaround :)

[Gongreg]

v4.0 is being released today. With it the packager is removed from storybook.

You can read more about v4 here :)
https://medium.com/storybookjs/whats-new-in-storybook-4-0-react-native-741c7f481bbb

[princiya]

@Gongreg the above link is broken. could you please update to the right one https://medium.com/storybookjs/whats-new-in-storybook-4-0-react-native-741c7f481bbb. Thank you.

[Gongreg]

Thanks @princiya, fixed.

[hayanisaid]

I tried all the solutions above this is the only solution that solved my problem :

 "  @babel/core": "^7.0.0-beta",
    "babel-core": "^7.0.0-beta",
    "babel-runtime": "^7.0.0-beta",

Reference (here)[https://github.com/storybooks/storybook/issues/3897]