Storybook does not work with Expo

[kristremblay]

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:

1. Create new project with expo init ProjectName
2. cd into the directory
3. Run getstorybook
4. 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)

[kristremblay]

Update:

I went through the guide on the site again and the best I am able to do is get storybook running in the browser. However it is not picking up any of the stories.

As for my app, since I replaced the app entry point with ./storybook it only shows text that says to visit the browser on port 7007 (which, again, shows empty storyboard)

[kristremblay]

Ok, so, I haven't tried installing it in an expo init'd project, but using crna I got it to work by doing the following:

1. run npx -p @storybook/cli@next sb init
2. Change APP_NAME to whatever the appKey is. Note This property is oddly missing from app.json so you need to add it. The instructions in storybook's index file say that you don't need to change it if you are using expo...this seems to be incorrect.

Now, using npm run storybook does not load stories, but at least it seems to work on my mobile device.

This whole thing is really frustrating.

[kristremblay]

[shilman]

First part of this issue is duplicate to storybookjs/storybook#5893

Second part may need some investigation cc @benoitdion

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[alechp]

NOTE: This doesn't address kristremblay's concern re: latest version interoperability. I'm simply sharing this for others that are stuck and just want storybook to work (without waiting for storybook/expo-cli latest-version interoperability)

Non-ideal quick fix: when installing storybook, choose v4.1.18.

Got storybook v4.1.18 working with latest version of expo init.

1. $ expo init projectName
2. $ cd projectName
3. $ npx -p @storybook/cli sb init
4. $ yarn install
5. $> choose version 4.1.18
6. $ yarn start

(Also at some point during the Storybook install you have to choose your output. I selected REACT_NATIVE)

---

[shilman]

@kristremblay please take a look at the migration instruction for 5.1: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#react-native-server

[alechp]

@kristremblay In case you didn't have time to finalize yet, I put together a finished repo as a reference. Great catch on the appKey btw. The "don't need to do this if you're using expo" threw me as well. Glad you caught it.

react-native-expo-storybook-v5

@shilman I noticed that I was running into compilation issues with addons. Ended up just removing it (obviously not ideal, but I assume this is specific to react-native-server ?)

[shilman]

Thanks @alechp . What issues were you having? I know there were some addon-related issues in RN 5.1 but I'm not sure if they're documented or tracked, so if you let me know it would help us with the release. Also, are you on the latest alpha? 🙏

[alechp]

Thanks @alechp . What issues were you having? I know there were some addon-related issues in RN 5.1 but I'm not sure if they're documented or tracked, so if you let me know it would help us with the release. Also, are you on the latest alpha? 🙏

I received this compile time error:

ERROR in ./storybook/addons.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only function

Here's the package:
https://github.com/servexyz/react-native-expo-storybook-v5/blob/master/package.json

In terms of https://www.npmjs.com/package/@storybook/cli I chose whatever the latest version listed was... I recall it was a .3. Looking at the package version releases, I believe it was 5.2.0-alpha.3

UPDATE (11:19AM PST): Confirmed that the version I installed from was 5.2.0-alpha.3:

Notice that you tagged my previous repo comment to the 5.1.0 milestone. Should it be tagged to 5.2.0 instead?

[alechp]

@shilman Update: Here's the original error (returns when I add addons.js back to storybook/ directory

You can recreate this by

1. cloning the repo I posted earlier (react-native-expo-storybook-v5)
2. $ touch storybook/addons.js
3. copy this to clipboard:

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';

4. $ pbpaste > storybook/addons.js

[shilman]

@alechp Please use the latest 5.1.0 version. The 5.2.0 version may be messed up -- it's a long story.

[kristremblay]

@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

[alechp]

@shilman got alpha 40 running. Current errors being thrown:

In Expo

Unable to resolve "emotion-theming" from "node_modules/@storybook/react-native/dist/preview/index.js"

Added context

• Stories never load in browser
• Bundler never moves past 99%
• I've rmraf'd my node_modules directory a couple times to no avail

UPDATE:
If I add emotion-theming as a peer dependency (with yarn), now there's a new missing dependency:

Unable to resolve "@emotion/core" from "node_modules/emotion-theming/dist/emotion-theming.browser.cjs.js"

I can keep adding missing modules, but obviously this isn't right.

UPDATE 2:
Got it working. Had issues when adding emotion-theming and @emotion/core as 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 the babel-loader install 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 Not sure if this is a bug of alpha40 or supposed to be a feature of Storybook:

Whenever I run yarn install it asks me to select the storybook version.

eg. I installed the Storysource addon (https://github.com/storybooks/storybook/tree/master/addons/storysource)

via yarn add @storybook/addon-storysource --dev

and was prompted to choose the install version again:

It also seems to re-run if I run yarn install by itself (ie. even when I'm not adding a storybook-specific dependency). Is there anyway to disable this hook? It seems unnecessarily time consuming

[shilman]

@alechp Not sure what's going on there. @benoitdion have you seen this?

[benoitdion]

I haven't seen this. What does your package.json look like?

[alechp]

I haven't seen this. What does your package.json look like?

@benoitdion
Repo: https://github.com/servexyz/react-native-expo-storybook-v5
Package: https://github.com/servexyz/react-native-expo-storybook-v5/blob/master/package.json

[alechp]

@benoitdion @shilman Update: Also getting prompted to select Storybook version on yarn remove:

[leesiongchan]

Consider using expo 33 with expo start --web, it works for me.

[TheWeeezel]

@alechp
Using android I can't get any stories to show on the web. My package.json:

`"scripts": {
"storybook": "start-storybook -p 7007"
},
"dependencies": {
"@expo/samples": "2.1.1",
"core-js": "2",
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^1.0.0-beta7",
"react-native-super-grid": "^3.0.3",
"react-navigation": "3.0.9"
},

"devDependencies": {
"@emotion/core": "^10.0.10",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addon-storysource": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@storybook/react-native": "^5.0.11",
"@storybook/react-native-server": "5.1.0-alpha.7",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-expo": "^5.0.0",
"babel-runtime": "^6.26.0",
"emotion-theming": "^10.0.10",
"jest-expo": "^32.0.0",
"prop-types": "^15.7.2",
"react-dom": "16.5.0"
},`

I used your workaround and got it to work on the android emulator from Android SDK and there the stories are shown but not on Web. I also get into this loop where I need to select the version every time I run yarn. I installed alpha 40. So far the states I have achieved are either infinite loading or no stories on the web.

[benoitdion]

@alechp @TheWeeezel did you try syncing all storybook related deps to the same version?

[TheWeeezel]

@alechp @TheWeeezel did you try syncing all storybook related deps to the same version?

Sorry for my late answer. Yes i did. I figured i wait for Expo 33 to release. I tried so many versions but gave up.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[alechp]

@TheWeeezel I'm having similar issues

Android emu

iOS sim

My hunch is that this has to do with the Android emu and not Storybook (or Expo). Admittedly getting this working on Android isn't top priority for me rn. Have you had any luck getting passed this on your end?

[Gongreg]

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.

[alechp]

@Gongreg I agree re: issue being too big. More generic support thread than actual issue at this point. Worth closing IMO

[Gongreg]

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.

[RobinLebhar]

Any news about this issue ? With expo 34 and Storybook 5 Story are loading forever on the left panel.

[gdedieu92]

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 = ({ }) =>
export default StoryBookLoader;`

So when i want to work with StoryBook, i follow these steps:
expo start
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 :)

[i-oliva]

Any news about this issue ? With expo 34 and Storybook 5 Story are loading forever on the left panel.

Having the same issue!

[igorgidea]

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"

[s-kuniyoshi]

@igorgidea
I have same issue.
Please anyone resolve it. ;-(

[warent]

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