react-native: Storybook does not work with Expo
Describe the bug
When trying to install Storybook with the most recent release of Expo, the process fails at installing dependencies with the error No matching version found for @storybook/react-native@^5.0.6.
To Reproduce Steps to reproduce the behavior:
- Create new project with
expo init ProjectName - cd into the directory
- Run
getstorybook - See error
Expected behavior Storybook would install properly and I would be a happy boy.
System:
- OS: Windows 10
- Node Version: 11.4.0
- NPM Version: 6.4.1
- Framework: React Native (Expo)
Log dump
245 verbose stack @storybook/react-native: No matching version found for @storybook/react-native@^5.0.6
245 verbose stack at pickManifest (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\npm-pick-manifest\index.js:65:11)
245 verbose stack at fetchPackument.then.packument (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\pacote\lib\fetchers\registry\manifest.js:52:18)
245 verbose stack at tryCatcher (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
245 verbose stack at Promise._settlePromiseFromHandler (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\promise.js:512:31)
245 verbose stack at Promise._settlePromise (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\promise.js:569:18)
245 verbose stack at Promise._settlePromise0 (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
245 verbose stack at Promise._settlePromises (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
245 verbose stack at Async._drainQueue (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\async.js:133:16)
245 verbose stack at Async._drainQueues (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\async.js:143:10)
245 verbose stack at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
245 verbose stack at processImmediate (timers.js:632:19)
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 2
- Comments: 34 (9 by maintainers)
Windows 10 node 12.18.0 Storybook 5.3.19 expo 38.0.8 In browser Google Chrome 84.0.4147.8 or Firefox 78.0.2 there is “forever stories loading” on the left panel
Any ideas how to fix it? btw its works fine in android emulator when i run command “expo start --android”
Having the same issue!
This happened to me, turned out to be a configuration issue. Following this helped me get it setup: https://github.com/expo/examples/tree/master/with-storybook
Closing this issue. If you have any issues feel free to open a separate issue!
@alechp if you could notify here does the adb reverse command solve your issue.
@igorgidea I have same issue. Please anyone resolve it. 😭
in my case the think is that main file is different with expo and story book.
The left loading panel forever is because by default story book loads a part of de index.js in --web but the folders with examples of stories are only --ios and --android. So is tricky but you can make a “switch” and define what loader wants.
Example:
I made a switch navigator in my app.
const switchNavigator = createSwitchNavigator( { UserLogged: DrawerLogged, UserNoLogged: DrawerNavigator, AuthLoadingScreen: AuthLoadingScreen, StoryBook: StoryBookLoader }, { initialRouteName: 'StoryBook', } );`import React from ‘react’; import StorybookUIRoot from ‘…/…/…/storybook’;
const StoryBookLoader = ({ }) => <StorybookUIRoot /> export default StoryBookLoader;`
So when i want to work with StoryBook, i follow these steps: expo start <platform> read qr with my phone or emulator change initialRoute of my switch navigator to “StoryBook” And that’s then all default config and docs in StoryBook docs.
Hope worth for someone 😃
Hey, if android doesn’t work remember to run
adb reverse tcp:7007 tcp:7007. Does that help @alechp?@shilman this issue is really big and talking about 10 different issues, most of them are solved. Not sure what is left to fix here.
Consider using expo 33 with
expo start --web, it works for me.@shilman got alpha 40 running. Current errors being thrown:
In Expo
Added context
UPDATE: If I add
emotion-themingas a peer dependency (with yarn), now there’s a new missing dependency:I can keep adding missing modules, but obviously this isn’t right.
UPDATE 2: Got it working. Had issues when adding
emotion-themingand@emotion/coreas peer deps. Added them as dev deps and it seems to have resolved whatever linking issues I was running into before. Still not ideal to have to add; might be worth it to upgrade the migration guide to include these steps in the meantime (during thebabel-loaderinstall step).UPDATE 3: On the topic of migration guide, you might want to add that the simulator (I’m doing all of my testing on iOS sim, haven’t tried Android emu) needs to be running otherwise Storybook stories will not load.
@alechp @shilman Thank you both. That migration guide for 5.1 lgtm, I’ll have to check it out when I get home though.
Cheers
First part of this issue is duplicate to https://github.com/storybooks/storybook/issues/5893
Second part may need some investigation cc @benoitdion