Storybook: Addon-Docs:

Created on 5 Mar 2020 · 11Comments · Source: storybookjs/storybook

Tried to add @storybook/addon-docs, but got the following error:

Bildschirmfoto 2020-03-05 um 14 48 08

I'm using tsx-Files with styled components... Any ideas someone ?

main.js

const custom = require("../webpack.config.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    stories: ["../src/**/*.story.tsx"],
    addons: [

        "@storybook/addon-actions",
        "@storybook/addon-links",
        "@storybook/addon-knobs",
        "@storybook/addon-viewport",
        {
            name: "@storybook/preset-typescript",
            options: {
                tsDocgenLoaderOptions: {},
            }
        },
        {
            name: "@storybook/addon-docs",
            options: {
                configureJSX: true,
            },
        },
    ],
    webpackFinal: async config => {
        // do mutation to the config

        return {
            ...config,
            module: {
                ...config.module,
                rules: custom.module.rules
            },
            resolve: custom.resolve,
            plugins: [
                new MiniCssExtractPlugin({
                    filename: "[name].[contenthash].css",
                }),
                ...config.plugins
            ]
        };
  },
};

package.json

"@storybook/addon-docs": "^5.3.14",
"@storybook/addon-info": "^5.3.14",
"@storybook/addon-knobs": "^5.3.14",
"@storybook/addon-links": "^5.3.14",
"@storybook/addon-storyshots": "^5.3.14",
"@storybook/addon-viewport": "^5.3.14",
"@storybook/addons": "^5.3.14",
"@storybook/preset-typescript": "^2.1.0",
"@storybook/react": "^5.3.14",
"react": "^16.13.0",
"typescript": "^3.8.3",

Expected behavior
Storybook loads like before (as without docs) and docs addon shows his magic.

docs props bug inactive

Source

vertic4l

👍1

Most helpful comment

I just fixed my issue by changing the order of adding my custom resolve with the config resolve. @vertic4l , can you try to add config.resolve to you returning object?

return {
            ...config,
            module: {
                ...config.module,
                rules: custom.module.rules
            },
            resolve: {
                ...custom.resolve,
                ...config.resolve,
            },
            plugins: [
                new MiniCssExtractPlugin({
                    filename: "[name].[contenthash].css",
                }),
                ...config.plugins
            ]
        };

la99er on 5 Mar 2020

🎉1 👍1

All 11 comments

I have the same problem. My issue is the custom resolve prop. Removing it, removes this error. How does your custom resolve look like?

la99er on 5 Mar 2020

The props table code uses acorn-jsx for processing dynamic PropTypes declarations (cc @patricklafrance) and I think it's causing problems in some cases

shilman on 5 Mar 2020

I just fixed my issue by changing the order of adding my custom resolve with the config resolve. @vertic4l , can you try to add config.resolve to you returning object?

return {
            ...config,
            module: {
                ...config.module,
                rules: custom.module.rules
            },
            resolve: {
                ...custom.resolve,
                ...config.resolve,
            },
            plugins: [
                new MiniCssExtractPlugin({
                    filename: "[name].[contenthash].css",
                }),
                ...config.plugins
            ]
        };

la99er on 5 Mar 2020

🎉1 👍1

@la99er you are absolutely right! Nice hint!

It was all about the resolve (modules) part:

resolve: {
    ...custom.resolve,
    ...config.resolve,
    modules: [
        ...config.resolve.modules,
        ...custom.resolve.modules,
    ]
},

works! Although i don't see any Props in the docs. Doesn't work with TS ?

Thank you very much!

@shilman most of time it just seems to be the webpack config part if one wants to use his own.

vertic4l on 5 Mar 2020

You're welcome :)

la99er on 5 Mar 2020

👍1

@shilman Any chance to get the props too ?

vertic4l on 6 Mar 2020

Yeah, Props supports typescript. Here's a walkthrough for CRA:

https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c

I'll be updating the recommendations this week based on recent developments in react-docgen, one of the libraries we use under the hood. But that walkthrough should still work.

shilman on 6 Mar 2020

👍1

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] on 27 Mar 2020

FYI the recommended 6.0 setup (should work in 5.3 too) is ready, and is the default in the most recent versions of both @storybook/preset-typescript and @storybook/preset-create-react-app:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-prop-tables-with-typescript

I am commenting on all props-related issues to request that you upgrade so we can get this right before release. Thanks!

shilman on 28 Mar 2020

👍1

stale[bot] on 18 Apr 2020

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!

stale[bot] on 18 May 2020

Was this page helpful?

0 / 5 - 0 ratings