Storybook: Story is not set when running storybook server

[Gongreg]

To Reproduce
Steps to reproduce the behavior:

1. Start storybook server.
2. Select story.
3. 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]

Seems like in v5 this should be fixed.

[shilman]

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

[alexakasanjeev]

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

[alexakasanjeev]

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

[janpe]

Ran into this problem as well.

[Gongreg]

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.

[4t4sh]

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

[Gongreg]

I should have some time tomorrow to look into it.

[z00m1n]

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]

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

[Gongreg]

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:

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

[benoitdion]

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

[Gongreg]

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]

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]

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]

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

1. I don't know which one the _storybook root directory_ is
2. I don't know which one the _storybook-sandbox-app directory_ is
3. 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]

@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]

same problem with @alexakasanjeev

storybook related packages version 5.1.9

[Gongreg]

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

[erhanbicer]

@Gongreg which pr solves this problem?

[Gongreg]

Few messages above: https://github.com/storybookjs/storybook/pull/7187

[shilman]

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.

[erhanbicer]

@shilman I upgraded from version 5.1.9 to version 5.2.0-alpha.32. but the screen always says "Please open navigator and select a story to preview." is writing in a fixed way. I cleared the cache and tried many methods like this.

[Gongreg]

@shilman I will once again check it on Monday. I checked it but since everything was in node_modules there is chance that something is still missing :(

[Gongreg]

@erhanbicer, thank you for checking it. @shilman, looks like story store api has changed with docs mode :o . Doing a PR to fix it.

In the fix I used storyStore.setSelection(story) but it is actually storyStore.setSelection({storyId});

[erhanbicer]

@Gongreg I made the changes manually. this did not work for me. Sorry!

[Gongreg]

@erhanbicer you applied all the changes in the new PR #7234 on 5.2.0-alpha.32? I’ve tested them with/without server and they worked for me.

[erhanbicer]

@Gongreg yes, I implemented them in 5.2.0-alpha.32.

"@storybook/react-native": "next",
"@storybook/react-native-server": "next",

[Gongreg]

Just to be sure, can you clear your async storage?

[erhanbicer]

Just to be sure, can you clear your async storage?

@Gongreg
I cleaned everything up. but it didn't work again

[Gongreg]

Do you see story list inside the navigator (in the app itself)? @erhanbicer

[erhanbicer]

@Gongreg Yes, the story list appears in both the application and the website.

[Gongreg]

Okay, one more question.

If you disable the server, does the storybook work for you? Because if you use 5.2.0-alpha.32 without #7234 storybook shouldn't even work for you.

I want to make sure that we are getting the same results.

[erhanbicer]

@Gongreg It also does not work when the server is disabled.

[Gongreg]

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

[shilman]

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]

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

[erhanbicer]

@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]

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

[erhanbicer]

@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]

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]

Good luck :)

[dbeff]

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

[Gongreg]

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]

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

[erhanbicer]

Sorry, not working. same error persists

[Gongreg]

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

[Gongreg]

@erhanbicer, ETA 10 hours till release.

[shilman]

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]

Please tell me that it is working now

[erhanbicer]

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

[z00m1n]

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

1. uninstall 5.1.9 npm package versions

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

1. install @next versions

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

1. verify installed package versions

$ npm list --depth=0 2>&1 | grep @storybook
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]

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

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

1. 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 ;-))

1. 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.
  ...

1. 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]

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

[shilman]

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

[z00m1n]

@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/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]

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

[z00m1n]

(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]

@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]

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!