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

mgcrea · 2018-09-13T17:30:16Z

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:

facebook/react-native@c5ce762#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

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

dslounge · 2018-09-13T21:25:13Z

I'm having this issue too. Is the

error: unknown option `--projectRoots'

part what's causing this?

resting · 2018-09-14T09:56:30Z

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

jacquesdev · 2018-09-14T13:01:31Z

This worked for me facebook/react-native#20876

cball · 2018-09-14T14:35:23Z

@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 · 2018-09-14T23:50:06Z

@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 · 2018-09-19T16:26:22Z

same issue !

griable · 2018-09-20T13:57:12Z

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 · 2018-09-20T19:11:40Z

@griable +1

matheuscouto · 2018-09-21T01:34:19Z

@griable +1

blitzcom · 2018-09-22T21:11:57Z

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 · 2018-09-24T10:52:24Z

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

Gongreg · 2018-09-24T17:42:33Z

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 · 2018-09-25T02:30:18Z

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

sinewave440hz · 2018-09-28T09:20:12Z

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 · 2018-09-28T09:32:01Z

@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 · 2018-09-28T09:36:39Z

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 · 2018-09-30T21:29:15Z

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 · 2018-10-01T09:41:13Z

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

chawax · 2018-10-07T12:43:40Z

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 · 2018-10-07T15:27:27Z

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 · 2018-10-09T21:20:24Z

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 · 2018-10-10T15:58:13Z

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 · 2018-10-10T16:22:17Z

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 · 2018-10-10T17:02:48Z

@chawax Thank you! Looks like [email protected] uses [email protected] and this was fixed in [email protected]: facebook/metro@e595178. I was able to fix by adding a Yarn resolution to my package.json for now:

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

Gongreg · 2018-10-15T19:46:28Z

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

esbenvb · 2018-10-22T14:15:26Z

@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.
facebook/react-native@v0.57.0...v0.57.3#diff-33a4be2928925650375f54b552cb956f

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

Gongreg · 2018-10-29T12:11:04Z

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 · 2018-10-31T16:43:27Z

@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 · 2018-10-31T17:35:31Z

Thanks @princiya, fixed.

hayanisaid · 2019-02-21T01:53:44Z

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//issues/3897]

raynor85 mentioned this issue Sep 14, 2018

error: 'Plugin 0 provided an invalid property of "default"' when using with React Native + TypeScript #3897

Closed

oblador mentioned this issue Sep 18, 2018

Bump react-native-vanilla example to 0.57 #4196

Closed

sinewave440hz mentioned this issue Sep 29, 2018

What are the updated steps for Storybook and seamless typescript integration for 0.57+ ? #4253

Closed

Gongreg mentioned this issue Oct 2, 2018

Removing the packager from storybook. #4261

Merged

Gongreg added bug BREAKING CHANGE high priority react-native labels Oct 7, 2018

onmyway133 mentioned this issue Oct 9, 2018

RN: storybook unknown option `--projectRoots' onmyway133/notes#411

Open

shaundon mentioned this issue Oct 15, 2018

[BPK-1754] Upgrade React Native to 0.57.3 Skyscanner/backpack#1114

Closed

Gongreg closed this as completed Oct 29, 2018

issue-sh bot removed the high priority label Oct 29, 2018

jeremy-deutsch mentioned this issue Dec 6, 2018

What do you dislike about React Native? react-native-community/discussions-and-proposals#64

Closed

robinheinze mentioned this issue Jan 4, 2019

Upgrade react native infinitered/ChainReactApp2019#56

Merged

cpojer mentioned this issue Feb 26, 2019

Reply from Facebook about "What do you dislike about React Native?" react-native-community/discussions-and-proposals#104

Closed

oktalk mentioned this issue Apr 5, 2019

Failed to load bundle Storybook infinitered/ignite-andross#259

Open

conradkirschner mentioned this issue Apr 18, 2019

Storybook not working out of the boy infinitered/ignite#1407

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mgcrea commented Sep 13, 2018

dslounge commented Sep 13, 2018 •

edited

Loading

resting commented Sep 14, 2018

jacquesdev commented Sep 14, 2018

cball commented Sep 14, 2018

kdawgwilk commented Sep 14, 2018

gatspy commented Sep 19, 2018

griable commented Sep 20, 2018 •

edited

Loading

Amurmurmur commented Sep 20, 2018

matheuscouto commented Sep 21, 2018

blitzcom commented Sep 22, 2018

robwalkerco commented Sep 24, 2018

Gongreg commented Sep 24, 2018 •

edited

Loading

blitzcom commented Sep 25, 2018

sinewave440hz commented Sep 28, 2018

robwalkerco commented Sep 28, 2018

sinewave440hz commented Sep 28, 2018 •

edited

Loading

petrbela commented Sep 30, 2018

Gongreg commented Oct 1, 2018

chawax commented Oct 7, 2018 •

edited

Loading

chawax commented Oct 7, 2018

lasersox commented Oct 9, 2018 •

edited

Loading

jjenzz commented Oct 10, 2018 •

edited

Loading

chawax commented Oct 10, 2018 •

edited

Loading

jjenzz commented Oct 10, 2018 •

edited

Loading

Gongreg commented Oct 15, 2018

esbenvb commented Oct 22, 2018 •

edited

Loading

Gongreg commented Oct 29, 2018 •

edited

Loading

princiya commented Oct 31, 2018

Gongreg commented Oct 31, 2018

hayanisaid commented Feb 21, 2019

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

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

Comments

mgcrea commented Sep 13, 2018

Bug or support request summary

Steps to reproduce

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

Affected platforms

dslounge commented Sep 13, 2018 • edited Loading

resting commented Sep 14, 2018

jacquesdev commented Sep 14, 2018

cball commented Sep 14, 2018

kdawgwilk commented Sep 14, 2018

gatspy commented Sep 19, 2018

griable commented Sep 20, 2018 • edited Loading

Amurmurmur commented Sep 20, 2018

matheuscouto commented Sep 21, 2018

blitzcom commented Sep 22, 2018

robwalkerco commented Sep 24, 2018

Gongreg commented Sep 24, 2018 • edited Loading

blitzcom commented Sep 25, 2018

sinewave440hz commented Sep 28, 2018

robwalkerco commented Sep 28, 2018

sinewave440hz commented Sep 28, 2018 • edited Loading

petrbela commented Sep 30, 2018

Gongreg commented Oct 1, 2018

chawax commented Oct 7, 2018 • edited Loading

chawax commented Oct 7, 2018

lasersox commented Oct 9, 2018 • edited Loading

jjenzz commented Oct 10, 2018 • edited Loading

chawax commented Oct 10, 2018 • edited Loading

jjenzz commented Oct 10, 2018 • edited Loading

Gongreg commented Oct 15, 2018

esbenvb commented Oct 22, 2018 • edited Loading

Gongreg commented Oct 29, 2018 • edited Loading

princiya commented Oct 31, 2018

Gongreg commented Oct 31, 2018

hayanisaid commented Feb 21, 2019

dslounge commented Sep 13, 2018 •

edited

Loading

griable commented Sep 20, 2018 •

edited

Loading

Gongreg commented Sep 24, 2018 •

edited

Loading

sinewave440hz commented Sep 28, 2018 •

edited

Loading

chawax commented Oct 7, 2018 •

edited

Loading

lasersox commented Oct 9, 2018 •

edited

Loading

jjenzz commented Oct 10, 2018 •

edited

Loading

chawax commented Oct 10, 2018 •

edited

Loading

jjenzz commented Oct 10, 2018 •

edited

Loading

esbenvb commented Oct 22, 2018 •

edited

Loading

Gongreg commented Oct 29, 2018 •

edited

Loading