Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mgcrea opened this issue Sep 13, 2018 · 30 comments
Closed

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

mgcrea opened this issue Sep 13, 2018 · 30 comments

Comments

@mgcrea
Copy link
Contributor

mgcrea commented Sep 13, 2018

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

@dslounge
Copy link

dslounge commented Sep 13, 2018

I'm having this issue too. Is the

error: unknown option `--projectRoots'

part what's causing this?

@resting
Copy link

resting commented Sep 14, 2018

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

@jacquesdev
Copy link

This worked for me facebook/react-native#20876

@cball
Copy link

cball commented Sep 14, 2018

@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
Copy link

@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
Copy link

gatspy commented Sep 19, 2018

same issue !

@griable
Copy link

griable commented Sep 20, 2018

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
Copy link

@griable +1

1 similar comment
@matheuscouto
Copy link

@griable +1

@blitzcom
Copy link

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
Copy link

@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
Copy link
Member

Gongreg commented Sep 24, 2018

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
Copy link

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

@sinewave440hz
Copy link

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
Copy link

@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
Copy link

sinewave440hz commented Sep 28, 2018

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
Copy link

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
Copy link
Member

Gongreg commented Oct 1, 2018

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

@chawax
Copy link

chawax commented Oct 7, 2018

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
Copy link

chawax commented Oct 7, 2018

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
Copy link

lasersox commented Oct 9, 2018

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
Copy link

jjenzz commented Oct 10, 2018

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
Copy link

chawax commented Oct 10, 2018

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
Copy link

jjenzz commented Oct 10, 2018

@chawax Thank you! Looks like react-native@0.57.2 uses metro@0.47.0 and this was fixed in metro@0.48.0: 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
Copy link
Member

Gongreg commented Oct 15, 2018

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

@esbenvb
Copy link

esbenvb commented Oct 22, 2018

@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

image

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

@Gongreg
Copy link
Member

Gongreg commented Oct 29, 2018

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

@Gongreg Gongreg closed this as completed Oct 29, 2018
@issue-sh issue-sh bot removed the high priority label Oct 29, 2018
@princiya
Copy link

@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
Copy link
Member

Gongreg commented Oct 31, 2018

Thanks @princiya, fixed.

@hayanisaid
Copy link

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]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests