Storybook: Addon storysource not workig ?

[Safa2222]

Hi,

I have some troubles using the addon storysource. In fact, i followed the steps in this (since i have the 3.4 version of storybook) but i get nothing in the storysource toggle except from this :

Any help ? Thanks !

[Keraito]

Hey @Safa2222, could you provide us with your config.js, webpack.config.js, and the story file in which you specify your story? So we can help you further!

[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!

[corysimmons]

Same issue here. Please reopen.

config.js:

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
    ],
  },
};

If it matters, .babelrc:

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-object-rest-spread",
    [
      "babel-plugin-root-import",
      { "rootPathSuffix": "src" }
    ],
    [
      "babel-plugin-styled-components",
      { "displayName": true }
    ]
  ]
}

[igor-dv]

Did you register it in the addons.js file?

[corysimmons]

@igor-dv Yes. =)

[igor-dv]

Maybe you should add this: include: [path.resolve(__dirname, '../src')] to the rule ?

Can't think of anything else without looking into the code 🤷‍♂️

[corysimmons]

No luck.

[igor-dv]

Can you share the repo?

[corysimmons]

Sorry I cannot and don't have time to put together a reduced test case. It's CRA rewired with babel-plugin-root-import if you're keen on solving it.

Not terribly important if it seems to be working for everyone else... Feel free to close.

[AddictArts]

@corysimmons @igor-dv @Safa2222 @Keraito I believe I may be able to offer a solution to this, it certainly solved it for me and I had the same config and issue.

The default install for storybook, using getstorybook, creates a stories/index.js and the rules test in this addon is for files ending with .stories.js for example. So, a simple change to the the rules test and viola. So, if you were like me trying to see the source of "Welcome" and the buttons, it was a no go.

Note this is for a CRA rewired; However, anyone would run into this with the default story created by getstorybook. Maybe the convention of .stories.js is outdated or the README.md here should mention this.

.storybook/webpack.config.js

module.exports = function override(config, env) {
  config.module.rules.push({
    // test: /\.stories\.jsx?$/,
    test: /\.jsx?$/,
    loaders: [ require.resolve('@storybook/addon-storysource/loader') ],
    enforce: 'pre',
  })

  return config
}

[igor-dv]

Oh, wow, thanks for pointing me on this @AddictArts , I've completely missed this in the example @coryhouse has shown.

@coryhouse, indeed in your example storysource will not be applied to your stories, however, I don't recommend to use this loader on every js file, because it may degrade a build time.

You can use something like this, considering all your stories are located in the "src/stories" dir

 test: /\.jsx?$/,
 include: path.resolve('./src/stories'),

[diegobh]

I`m getting the same error, reopen, please.

I`m getting error after create the file: webpack.config.js

addons.js:

import '@storybook/addon-storysource/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

config.js:

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
    ],
  },
};

Thank you!

[igor-dv]

@diegobh, your stories are located on src/stories that means you need to set in the rule something like test: path.resolve('src/stories')

[diegobh]

@igor-dv Thank you for help. I tried and it stills the same. I have all my stories in just one file: index.js inside the storybook standard folder: src/stories
Any advice?
ty!

[mmukes1]

const path = require("path");
module.exports = {
module: {
rules: [
{
test: /.stories.jsx?$/,
loaders: [require.resolve("@storybook/addon-storysource/loader")],
test: path.resolve(__dirname, "../src/stories"),
test: path.resolve(__dirname, "../src/components"),
enforce: "pre"
}
]
}
};

This approach on your .storybook/webpack.config.js will work

[JabbyPanda]

The incorrect path to story files in include or test configuration most often leaves you in the dark...

It would be beneficial for the addon users if there will be some output in the console that will provide the feedback summary on the number of story files processed with it...

consider the following format of the message:

25 stories were found at <path> and successfully processed by Storybook StorySource addon

[jhamPac]

@corysimmons solution worked for me. One step I think the docs for this addon left out is that you have to notify webpack.