Storybook: No stories shown following the setup instruction in Storybook 6+

[DoompyGames]

Describe the bug
No stories are shown after running npx sb init and yarn storybook in a web/RN monorepo using yarn, following the instructions outlined here: https://storybook.js.org/docs/react/get-started/install

A simple test on having a more generic main.js didn't change anything:

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../**/*.stories.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
}

.. with a simple test story in ../storybook/stories/test.stories.jsx

import React from 'react'

export default {
  title: 'Components/Button',
  component: () => <button>Test</button>,
}

To Reproduce

1. npx sb init
2. yarn storybook
3. Stories are loading endlessly

System:
System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
Browsers:
Chrome: 84.0.4147.125
Firefox: 73.0.1
Safari: 13.1.1
npmPackages:
@storybook/addon-actions: ^6.0.5 => 6.0.5
@storybook/addon-essentials: ^6.0.5 => 6.0.5
@storybook/addon-links: ^6.0.5 => 6.0.5
@storybook/react-native: ^5.3.19 => 5.3.19
@storybook/react-native-server: ^5.3.19 => 5.3.19

[shilman]

I'm guessing the problem is here:

@storybook/react-native: ^5.3.19 => 5.3.19
@storybook/react-native-server: ^5.3.19 => 5.3.19

If you want to use Storybook for RN, that's 5.3 only for now.

[newdaveespionage]

@shilman where is this documented? I've come to this issue because I can't find a clear "React Native is unsupported in 6.0" in the widely publicized documentation.

[shilman]

@newdaveespionage Added, does this work for you?

https://github.com/storybookjs/react-native/pull/93/files

[artalat]

If the old story format is used, i.e. storiesOf, it seems to work.

We're using this workaround by creating a compat file for react-native. Seems to work for us for now:

// MyStory.native.stories.ts

import ViewMain, { MyStory } from './MyStory.stories';

import { Platform } from 'react-native';
import React from 'react';
import storiesOf from '@bluebase/storybook-addon';

/**
 * This file exists to run storybook-native@v5 stories on storybook@v6,
 * as there is no v6 stories compatibility on react native yet.
 *
 * Once this issue is solved, this file should be deleted.
 *
 * https://github.com/storybookjs/storybook/issues/11966
 */
if (Platform.OS !== 'web') {

    storiesOf(ViewMain.title, module).add(MyStory.storyName, () => (
        <MyStory {...(MyStory.args as any)} />
    ));
}

[newdaveespionage]

@newdaveespionage Added, does this work for you?

https://github.com/storybookjs/react-native/pull/93/files

@shilman thank you so much! I had assumed I missed it somewhere.

[stale[bot]]

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!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!