Comments (34)
from react-native.
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"
from react-native.
Any news about this issue ? With expo 34 and Storybook 5 Story are loading forever on the left panel.
Having the same issue!
from react-native.
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.
from react-native.
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
from react-native.
First part of this issue is duplicate to storybookjs/storybook#5893
Second part may need some investigation cc @benoitdion
from react-native.
@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
from react-native.
@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.
from react-native.
Consider using expo 33 with expo start --web
, it works for me.
from react-native.
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.
from react-native.
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 :)
from react-native.
@igorgidea
I have same issue.
Please anyone resolve it. ;-(
from react-native.
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)
from react-native.
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:
- run
npx -p @storybook/cli@next sb init
- 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.
from react-native.
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!
from react-native.
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.
- $
expo init projectName
- $
cd projectName
- $
npx -p @storybook/cli sb init
- $
yarn install
- $> choose version 4.1.18
- $
yarn start
(Also at some point during the Storybook install you have to choose your output. I selected REACT_NATIVE)
from react-native.
@kristremblay please take a look at the migration instruction for 5.1: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#react-native-server
from react-native.
@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 ?)
from react-native.
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? 🙏
from react-native.
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?
from react-native.
@shilman Update: Here's the original error (returns when I add addons.js
back to storybook/
directory
You can recreate this by
- cloning the repo I posted earlier (react-native-expo-storybook-v5)
- $
touch storybook/addons.js
- copy this to clipboard:
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
- $
pbpaste > storybook/addons.js
from react-native.
@alechp Please use the latest 5.1.0 version. The 5.2.0 version may be messed up -- it's a long story.
from react-native.
@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
from react-native.
@alechp Not sure what's going on there. @benoitdion have you seen this?
from react-native.
I haven't seen this. What does your package.json
look like?
from react-native.
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
from react-native.
@benoitdion @shilman Update: Also getting prompted to select Storybook version on yarn remove
:
from react-native.
@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.
from react-native.
@alechp @TheWeeezel did you try syncing all storybook related deps to the same version?
from react-native.
@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.
from react-native.
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!
from react-native.
@TheWeeezel I'm having similar issues
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?
from react-native.
@Gongreg I agree re: issue being too big. More generic support thread than actual issue at this point. Worth closing IMO
from react-native.
Any news about this issue ? With expo 34 and Storybook 5 Story are loading forever on the left panel.
from react-native.
Related Issues (20)
- Unable to resolve "@storybook/react/dist/config" from "node_modules/@storybook/react-native/dist/preview.js" HOT 4
- Unit tests for Storybooks failing in React Native 0.73.1 HOT 3
- Headless render tests: @storybook/test-runner support or Storyshots alternative? HOT 7
- Unable to resolve module react/jsx-runtime in low version of React
- ColumnWrapperStyle not supported for single column lists HOT 8
- Android Bundling failed 3112ms Unable to resolve "@storybook/react-native" from ".storybook/index.tsx" HOT 12
- Add 'check' option in @storybook/addon-ondevice-controls HOT 5
- Documentation improvement request
- HMR issues HOT 4
- [Bug]: Passing props to TextInput causes error HOT 4
- Sidebar doesn't display stories with react-native-tvos HOT 11
- @storybook/react-native webpack bundler support HOT 2
- Generates TypeScipt while project is JS HOT 4
- using props.children results in an `Out of Memory Error` HOT 18
- examples/expo-example: does not install out of the box HOT 2
- Unable to run expo-example: Unable to resolve "./dist/index" from "../../packages/ondevice-controls/register.js" HOT 2
- Warning: Support for defaultProps will be removed HOT 1
- Passing a Component as Prop HOT 2
- RangeError: Maximum call stack size exceeded - Error after upgrading from Storybook 7-8 HOT 2
- TypeError: require.context is not a function HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.