Issue with onlyDocs page as homepage Story on alpha.30 #10294

matheo · 2020-04-02T17:30:07Z

Describe the bug

On alpha.28 I had no issues with this, but with the alpha.30 upgrade (coming with some @babel 7.9.0 updates), my initial Story is not being loaded.

I managed to sort my Stories adding the parameter options.storySort, so I have an MDX Story as my homepage, hiding the Canvas tab because it's onlyDocs:

<Meta
  title="Overview"
  parameters={{ previewTabs: { canvas: { hidden: true } } }}
/>

and it worked with alpha.28, but with alpha.30 I'm getting:

Expected behavior

The story should be loaded as it was with alpha.28.
I tried to add options.viewMode: 'docs' but it didn't change anything, it still tries to load the story of the docsOnly page, but that worked previously.
http://localhost:6001/?path=/story/overview--page

System:

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 10.18.0 - ~/.nvm/versions/node/v10.18.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.2 - ~/.nvm/versions/node/v10.18.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0
  npmPackages:
    @storybook/addon-a11y: ~6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-actions: ~6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-docs: ~6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-knobs: ~6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-links: ~6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-viewport: ~6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addons: ~6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/angular: ~6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/source-loader: ~6.0.0-alpha.30 => 6.0.0-alpha.30

The text was updated successfully, but these errors were encountered:

shilman · 2020-04-03T02:49:31Z

@ndelangen is this composition-related? i don't think anything has changed on the docs side.

matheo · 2020-04-22T04:16:06Z

@shilman now upgrading to alpha.41 the same setup didn't load a single story, and no STORIES_CONFIGURED is triggered on my custom addon (added a console.log there to see what's up with the API)

ndelangen · 2020-04-23T08:20:25Z

@matheo change to:

storybook/lib/core-events/src/index.ts

Lines 7 to 8 in 5e76eb7

 // Emitted by the preview whenever the list of stories changes (in batches) 

 SET_STORIES = 'setStories',

I did an overhaul of the events for "storybook composition" and because of that the "STORIES_CONFIGURED" event was removed because it was adding complexity but not much in terms of functionality.

matheo · 2020-04-24T16:28:42Z

@ndelangen it doesn't work with alpha.43
I might downgrade to test with alpha.30 but doesn't make sense I guess.

Right now none of my stories are loaded,
the menu is not shown and SET_STORIES is not triggered
no error message in the console neither :(

matheo · 2020-04-24T16:39:10Z

My stories paths are:

[ '../design-system/**/*.stories.(ts|mdx)',
  '../packages/**/*.stories.(ts|mdx)' ]

and if I change them it complains about not finding the path relative to .storybook, so the config seems fine there, but not working in the other hand.

matheo · 2020-05-01T01:30:44Z

@ndelangen @shilman I've found this difference between the alpha.28 webpack config rules and the latest beta.0; this was the config on alpha.28:

{ test: /\.(stories|story).mdx$/,
          use:
           [ { loader: 'babel-loader',
               options: { plugins: [ '@babel/plugin-transform-react-jsx' ] } },
             { loader: '@mdx-js/loader',
               options:
                { compilers: [ [Function: compiler] ],
                  remarkPlugins: [ [Function: slug], [Function: externalLinks] ] } } ] },
        { test: /\.mdx$/,
          exclude: /\.(stories|story).mdx$/,
          use:
           [ { loader: 'babel-loader',
               options: { plugins: [ '@babel/plugin-transform-react-jsx' ] } },
             { loader: '@mdx-js/loader',
               options:
                { remarkPlugins: [ [Function: slug], [Function: externalLinks] ] } } ] },
        { test: /\.ts$/,
          exclude: /\.stories\.ts$/,
          use:
           [ { loader:
                '/my/git/repo/node_modules/awesome-typescript-loader/dist/entry.js',
               options:
                { configFileName:
                   '/my/git/repo/configs/storybook.tsconfig.json',
                  useCache: true } } ] },

and this is how it looks now:

{ test: /\.(stories|story).mdx$/,
          use:
           [ { loader: 'babel-loader',
               options:
                { cacheDirectory:
                   '/my/git/repo/node_modules/.cache/storybook/babel',
                  sourceType: 'unambiguous',
                  presets:
                   [ [ '/my/git/repo/node_modules/@babel/preset-env/lib/index.js',
                       { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' } ] ],
                  plugins:
                   [ '/my/git/repo/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                     '/my/git/repo/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                     '/my/git/repo/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                     [ '/my/git/repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                       { sourceMap: true, autoLabel: true } ],
                     '/my/git/repo/node_modules/babel-plugin-macros/dist/index.js',
                     '@babel/plugin-transform-react-jsx' ] } },
             { loader: '@mdx-js/loader',
               options:
                { compilers: [ [Function: compiler] ],
                  remarkPlugins: [ [Function: slug], [Function: externalLinks] ] } } ] },
        { test: /\.mdx$/,
          exclude: /\.(stories|story).mdx$/,
          use:
           [ { loader: 'babel-loader',
               options:
                { cacheDirectory:
                   '/my/git/repo/node_modules/.cache/storybook/babel',
                  sourceType: 'unambiguous',
                  presets:
                   [ [ '/my/git/repo/node_modules/@babel/preset-env/lib/index.js',
                       { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' } ] ],
                  plugins:
                   [ '/my/git/repo/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                     '/my/git/repo/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                     '/my/git/repo/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                     [ '/my/git/repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                       { sourceMap: true, autoLabel: true } ],
                     '/my/git/repo/node_modules/babel-plugin-macros/dist/index.js',
                     '@babel/plugin-transform-react-jsx' ] } },
             { loader: '@mdx-js/loader',
               options:
                { remarkPlugins: [ [Function: slug], [Function: externalLinks] ] } } ] },
        { test: /\.(stories|story)\.[tj]sx?$/,
          loader:
           '/my/git/repo/node_modules/@storybook/source-loader/dist/index.js',
          options: { inspectLocalDependencies: true },
          enforce: 'pre' },

I will remove my custom rule for *.stories.ts as it seems to conflict with the new rule, but I'm worried about the MDX files not being listed anyways.

Any way to debug the Store?
I installed React Developer Tools chrome extension but it only shows the components and an empty profiler right now

ndelangen · 2020-05-01T13:58:30Z

@matheo would you want to debug this together sometime?

https://calendly.com/ndelangen/storybook

matheo · 2020-05-01T14:28:33Z

@ndelangen sure! I'd love to!
added a spot for tomorrow, or if you have some time tonight it would be nice

ndelangen · 2020-05-01T14:59:08Z

@matheo would you be able to do a meeting on Monday perhaps?

matheo · 2020-05-01T15:02:45Z

@ndelangen sure, same time works for me

shilman · 2020-05-02T01:02:52Z

Possibly related: #10592 ?

matheo · 2020-05-05T21:39:12Z

@shilman yes!
I've confirmed that removing this made it:

addons.setConfig({
  previewTabs: {
    'storybook/docs/panel': { index: -1 },
  },
});

stale · 2020-05-30T09:01:10Z

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!

matheo · 2020-06-08T01:21:49Z

For the record, I've confirmed that this is no longer an issue in v6.0.0-beta.22

shilman added addon: docs composition question / support labels Apr 3, 2020

shilman assigned ndelangen Apr 3, 2020

matheo mentioned this issue Apr 22, 2020

Cannot run storybook server on alpha.34 and above #10488

Closed

matheo mentioned this issue May 5, 2020

CHANGE isToolshown logic so it hides toolbar if there's only (hidden) canvas #10599

Merged

stale bot added the inactive label May 30, 2020

matheo closed this as completed May 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue with onlyDocs page as homepage Story on alpha.30 #10294

Issue with onlyDocs page as homepage Story on alpha.30 #10294

matheo commented Apr 2, 2020 •

edited

Loading

shilman commented Apr 3, 2020 •

edited

Loading

matheo commented Apr 22, 2020

ndelangen commented Apr 23, 2020 •

edited

Loading

matheo commented Apr 24, 2020 •

edited

Loading

matheo commented Apr 24, 2020

matheo commented May 1, 2020 •

edited

Loading

ndelangen commented May 1, 2020

matheo commented May 1, 2020

ndelangen commented May 1, 2020

matheo commented May 1, 2020

shilman commented May 2, 2020

matheo commented May 5, 2020

stale bot commented May 30, 2020

matheo commented Jun 8, 2020

Issue with onlyDocs page as homepage Story on alpha.30 #10294

Issue with onlyDocs page as homepage Story on alpha.30 #10294

Comments

matheo commented Apr 2, 2020 • edited Loading

shilman commented Apr 3, 2020 • edited Loading

matheo commented Apr 22, 2020

ndelangen commented Apr 23, 2020 • edited Loading

matheo commented Apr 24, 2020 • edited Loading

matheo commented Apr 24, 2020

matheo commented May 1, 2020 • edited Loading

ndelangen commented May 1, 2020

matheo commented May 1, 2020

ndelangen commented May 1, 2020

matheo commented May 1, 2020

shilman commented May 2, 2020

matheo commented May 5, 2020

stale bot commented May 30, 2020

matheo commented Jun 8, 2020

matheo commented Apr 2, 2020 •

edited

Loading

shilman commented Apr 3, 2020 •

edited

Loading

ndelangen commented Apr 23, 2020 •

edited

Loading

matheo commented Apr 24, 2020 •

edited

Loading

matheo commented May 1, 2020 •

edited

Loading