Story is not set when running storybook server #4716

Gongreg · 2018-11-05T10:55:43Z

To Reproduce
Steps to reproduce the behavior:

Start storybook server.
Select story.
Refresh the app.

Behaviour
Storybook says please open navigator and select a story to preview.

Expected behavior
If user is running storybook server after the refresh the story should be the same as selected in the server.

Gongreg · 2018-12-21T11:47:03Z

Seems like in v5 this should be fixed.

shilman · 2019-03-22T15:50:56Z

We’ve released a brand new @storybook/react-native with a bunch of core improvements. It’s available in the latest 5.1-alpha on next and has been verified by several RN users on their existing apps. It should fix a bunch of compatibility issues, especially if you’re using the web server feature. Please give it a try and comment here if it fixes your problem. Migration instructions available here: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#react-native-server

@Gongreg @rkhayat

sanjeevyadavIT · 2019-06-11T10:21:49Z

Hi @shilman, @benoitdion I am using version 5.1.3 of @storybook/react-native-server and the first story is loading fine, but then after selecting any different story, it's say Please open navigator and select a story to preview if I refresh the browser then the story which I selected previously is working fine

Here is the entire code with the problem
https://github.com/alexakasanjeev/ecommerce-component-library/tree/bug/second-story-not-loading

sanjeevyadavIT · 2019-06-14T08:14:51Z

Any updates on when this bug will be worked on, or what causing this bug?

janpe · 2019-06-17T10:54:44Z

Ran into this problem as well.

Gongreg · 2019-06-18T08:30:22Z

Seems like some additional issue was brought in with storybook v5. React Native server is now using common solution with other frameworks so it is a little more difficult to inspect it.

ataschz · 2019-06-19T20:04:40Z

I have the same issue, any update about this problem?

Gongreg · 2019-06-20T08:05:46Z

I should have some time tomorrow to look into it.

z00m1n · 2019-06-21T08:48:46Z

I'm running into this as well, happy to help with testing development versions or whatever else is helpful.

On a general note: When running the storybook web server, should I be able to select stories and interact with them (e.g. setting texts in the UI using @storybook/addon-knobs) in the web browser ? I do see my stories in the left pane of the web page, but all the "main" pane displays is the Welcome to storybook page. I was under the impression I should see the add-on UI.

Am I misunderstanding how this is meant to work ?

Gongreg · 2019-06-21T08:51:30Z

@z00m1n, if you use @storybook/addon-knobs you should see addons in web browser.

Gongreg · 2019-06-21T12:37:02Z

Hello.

I've tried playing with things around. I managed to get story selection working. But what became clear is that we have to update react-native code to support react-native-server properly. I hope to do that next week.

The main issues are these:

It doesn't connect to react-native-server properly.
Story store api has changed and we are using old one.

benoitdion · 2019-06-21T13:01:17Z

Is this because someone of the new code started using hooks?

Gongreg · 2019-06-21T13:16:14Z

The way the events are emitted has changed, we have some useless events being emitted from react native side and now storyStore is using storyId instead of kind + story. Also if you somehow call getStorybookUI multiple times the connection to server fails.

Gongreg · 2019-06-25T07:45:38Z

Hey, I've created a PR which should solve the issue. Since we don't have automated tests for RN it will require some manual testing

z00m1n · 2019-06-26T10:51:19Z

Thanks for that @Gongreg! 👍
I really need this feature right now for work on my current project - good innings to try to set up stuff so I can test your PR in an unreleased version. Don't know much about the matter in general, so please don't expect to much 🥴
If you have any pointers you think might be helpful for me to get started, please let me know.

z00m1n · 2019-06-26T13:35:07Z

Sorry, I can't seem to get things set up to test the PR. I'm stuck here: https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md#2-link

I don't know which one the storybook root directory is
I don't know which one the storybook-sandbox-app directory is
yarn link @storybook/react or yarn link @storybook/react-native fail with
error No registered package found called "@storybook/react". or error No registered package found called "@storybook/react-native".

Gongreg · 2019-06-26T18:12:00Z

@z00m1n, I guess the best way for you to test things out would be to insert new code inside your project node_modules and play with it. I know that it sound really silly, but it is difficult to test things out when react-native storybook is inside monorepo.

If you want to run example project in storybook monorepo I can't help at the moment since I don't remember how to start it :/

I've tested the changes as much as I could. Both with and without onDeviceUI with server connected and without. Played around with knobs. All seem to work. If you can't get it to run, don't worry about it too much.

In the future we will (I hope and I will try to add them) have e2e tests which will allow us be more confident with changes.

sophister · 2019-06-28T08:06:30Z

same problem with @alexakasanjeev

storybook related packages version 5.1.9

Gongreg · 2019-06-28T08:08:49Z

@sophister, there is already a PR which solves the issue.

erhanbicer · 2019-06-28T08:10:26Z

@Gongreg which pr solves this problem?

Gongreg · 2019-06-28T08:11:21Z

Few messages above: #7187

shilman · 2019-06-29T03:40:12Z

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-alpha.32 containing PR #7187 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

Gongreg · 2019-07-01T10:11:31Z

Great. We have common ground now. So did you apply the changes in #7234 to dist directories?

shilman · 2019-07-01T11:23:55Z

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-alpha.33 containing PR #7234 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

Gongreg · 2019-07-01T12:11:28Z

@erhanbicer, I've tested out 5.2.0-alpha.33, it does work for me.

erhanbicer · 2019-07-01T14:22:28Z

@Gongreg I upgraded to 5.2.0-alpha.33, and reinstalled it. result; Not successful.

https://i.imgur.com/1ynQK3I.png

rn version: 0.59.9

Gongreg · 2019-07-01T14:26:05Z

@erhanbicer don’t want to sound like a broken record, but clear async storage and reset the cache.

erhanbicer · 2019-07-01T14:54:34Z

@erhanbicer don’t want to sound like a broken record, but clear async storage and reset the cache.

@Gongreg
I suspected my own project. I opened a new, clean project and did the installation. The result is the same. You can try pulling it out here if you want.

https://github.com/erhanbicer/alpha-storybook-test

Gongreg · 2019-07-01T15:17:29Z

Thanks. I will look into it tomorrow. I am sorry that it is taking so long to fix. I am just not getting any errors locally.

erhanbicer · 2019-07-01T15:24:18Z

Good luck :)

dbeff · 2019-07-01T15:25:53Z

Thank you for your effort @Gongreg ! I just got the warning in a fresh install here... Good to see that is almost over!

Gongreg · 2019-07-01T15:51:15Z

Hey, I really don't like leaving broken things, so I investingated it more.

I found why I wasn't getting the issue. We are using github.com/wix/react-native-navigation in our app and it initialises the components sooner than in the default app. Making a PR with fix now.

Gongreg · 2019-07-01T15:55:57Z

Created a pr. I really really hope the last one.

erhanbicer · 2019-07-02T06:42:07Z

Sorry, not working. same error persists

Gongreg · 2019-07-02T06:44:07Z

@erhanbicer, I think last PR is not released yet. Checking

Gongreg · 2019-07-02T06:45:59Z

@erhanbicer, ETA 10 hours till release.

shilman · 2019-07-02T16:41:19Z

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-alpha.35 containing PR #7243 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

Gongreg · 2019-07-02T19:22:40Z

Please tell me that it is working now

erhanbicer · 2019-07-03T06:21:58Z

@Gongreg Yes, it worked. Thank you for your work. :)

z00m1n · 2019-07-06T21:55:55Z

Doesn't seem to work here, same issue as before. Maybe I'm doing something wrong about my setup ?

uninstall 5.1.9 npm package versions

$ npm uninstall @storybook/react-native @storybook/react-native-server

install @next versions

$ npm install @storybook/react-native@next @storybook/react-native-server@next

verify installed package versions

$ npm list --depth=0 2>&1 | grep @storybook
├── @storybook/addon-actions@5.1.9
├── @storybook/addon-knobs@5.1.0-rc.0
├── @storybook/addon-ondevice-actions@5.1.9
├── @storybook/addon-ondevice-knobs@5.1.9
├── @storybook/cli@5.1.9
├── @storybook/react-native@5.2.0-alpha.36
├── @storybook/react-native-server@5.2.0-alpha.36

code in .../storybook/index.js:

const StorybookUIRoot = getStorybookUI({ port: 6006, host: 'localhost' });

in first Terminal window, run storybook server:

$ npm run storybook
  ...
> start-storybook -p 6006

? Port 6006 is not available. Would you like to run Storybook on port 6006 instead? Yes
info => Loading presets
info => Loading custom babel config as JS
╭──────────────────────────────────────────────────╮
│                                                  │
│   Storybook 5.2.0-alpha.36 started               │
│   3.19 s                                         │
│                                                  │
│   Local:            http://localhost:6006/       │
│   On your network:  http://10.188.111.6:6006/    │
│                                                  │
╰──────────────────────────────────────────────────╯

(curious question BTW ;-))
6. in second Terminal window, run my app

$ expo start
  ...
Expo DevTools is running at http://localhost:19002
Starting Metro Bundler on port 19001.
Tunnel ready.
Your native app is running at exp1234567890abcdef://10.188.111.6:19000
Logs for your project will appear below. Press Ctrl+C to exit.
Finished building JavaScript bundle in 6631ms.
Running application on iPhone Xs.
  ...

start app in Xcode, run on Simulator

--> Please open navigator and select a story to preview. on Simulator
--> stories in left pane in browser window
--> default Welcome to storybook in main pane in browser window

Is this the correct approach in general ?
Any thought, hints, ideas as to why the new version is not working for me ?

Gongreg · 2019-07-06T22:25:32Z

@z00m1n I think your issie is that you are running your code through tunnel in expo.

shilman · 2019-07-07T08:47:49Z

@z00m1n also please upgrade @storybook/* to 5.2.0-alpha.36 across the board

z00m1n · 2019-07-08T16:19:57Z

@Gongreg: The stories do show up in the left pane and are selected as I select them in the Storybook UI in the Simulator, so AFAICT, connectivity is established. The main pane remains Welcome to storybook; in fact, I have actually never seen the main pane show any other contents.
@shilman: I did:

$ npm list --depth=0 2>&1 | grep @storybook
├── @storybook/addon-actions@5.2.0-alpha.37
├── @storybook/addon-knobs@5.2.0-alpha.23
├── @storybook/addon-ondevice-actions@5.2.0-alpha.37
├── @storybook/addon-ondevice-knobs@5.2.0-alpha.37
├── @storybook/cli@5.2.0-alpha.37
├── @storybook/react-native@5.2.0-alpha.37
├── @storybook/react-native-server@5.2.0-alpha.37

Double-checked, refreshed, restarted, reviewed. The issue persists.

z00m1n · 2019-07-08T16:42:08Z

(DOH!) should have thought of that earlier: The screenshot below shows what I get in the browser dev tools console for the StoryBook page. No idea what any of that means nor if it's related, but maybe it helps. No further output, no matter what I click, just the same error repeating:

buschco · 2019-07-29T15:29:05Z

@z00m1n I searched like 2 hours for that issue. I will copy and paste the error message to make everyones life simpler 🙂

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at sanitize

shilman · 2019-07-31T09:03:37Z

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.10 containing PR #7187 that references this issue. Upgrade today to try it out!

Gongreg added react-native todo labels Nov 5, 2018

Gongreg mentioned this issue Nov 5, 2018

feat(react-native): persist last displayed story #4713

Merged

Gongreg added the bug label Nov 6, 2018

Gongreg self-assigned this Nov 8, 2018

shilman closed this as completed Mar 22, 2019

shilman reopened this Mar 22, 2019

Gongreg mentioned this issue Jun 25, 2019

Fix react native server #7187

Merged

shilman closed this as completed Jul 1, 2019

Gongreg reopened this Jul 1, 2019

Gongreg mentioned this issue Jul 1, 2019

React-Native: Fix null story check #7243

Merged

shilman closed this as completed Jul 2, 2019

shilman added this to the 5.2.0 milestone Jul 4, 2019

cwhenderson20 mentioned this issue Jul 30, 2019

theming.lighten is not a function #7633

Closed

Story is not set when running storybook server #4716

Story is not set when running storybook server #4716

Comments

Gongreg commented Nov 5, 2018

Gongreg commented Dec 21, 2018

shilman commented Mar 22, 2019

sanjeevyadavIT commented Jun 11, 2019 • edited

sanjeevyadavIT commented Jun 14, 2019 • edited

janpe commented Jun 17, 2019

Gongreg commented Jun 18, 2019

ataschz commented Jun 19, 2019

Gongreg commented Jun 20, 2019

z00m1n commented Jun 21, 2019

Gongreg commented Jun 21, 2019

Gongreg commented Jun 21, 2019

benoitdion commented Jun 21, 2019

Gongreg commented Jun 21, 2019

Gongreg commented Jun 25, 2019 • edited

z00m1n commented Jun 26, 2019

z00m1n commented Jun 26, 2019

Gongreg commented Jun 26, 2019

sophister commented Jun 28, 2019

Gongreg commented Jun 28, 2019

erhanbicer commented Jun 28, 2019

Gongreg commented Jun 28, 2019

shilman commented Jun 29, 2019

Gongreg commented Jul 1, 2019

shilman commented Jul 1, 2019

Gongreg commented Jul 1, 2019

erhanbicer commented Jul 1, 2019

Gongreg commented Jul 1, 2019

erhanbicer commented Jul 1, 2019

Gongreg commented Jul 1, 2019

erhanbicer commented Jul 1, 2019

dbeff commented Jul 1, 2019

Gongreg commented Jul 1, 2019

Gongreg commented Jul 1, 2019

erhanbicer commented Jul 2, 2019 • edited

Gongreg commented Jul 2, 2019

Gongreg commented Jul 2, 2019

shilman commented Jul 2, 2019

Gongreg commented Jul 2, 2019

erhanbicer commented Jul 3, 2019

z00m1n commented Jul 6, 2019

Gongreg commented Jul 6, 2019

shilman commented Jul 7, 2019

z00m1n commented Jul 8, 2019 • edited

z00m1n commented Jul 8, 2019

buschco commented Jul 29, 2019

shilman commented Jul 31, 2019

sanjeevyadavIT commented Jun 11, 2019 •

edited

sanjeevyadavIT commented Jun 14, 2019 •

edited

Gongreg commented Jun 25, 2019 •

edited

erhanbicer commented Jul 2, 2019 •

edited

z00m1n commented Jul 8, 2019 •

edited