Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docgen broken in 5.3.3 #9479

Closed
aareman opened this issue Jan 15, 2020 · 1 comment
Closed

docgen broken in 5.3.3 #9479

aareman opened this issue Jan 15, 2020 · 1 comment

Comments

@aareman
Copy link

aareman commented Jan 15, 2020

Describe the bug
I just went through the migration guide from 5.2xxxxrcsomething to 5.3.3

I think its related to #9415

Now the prop tables are not being populated (or loaded, not __docgenInfo on conponents)

Screenshots
If applicable, add screenshots to help explain your problem.
image

Code snippets
manager.js

import { addons } from '@storybook/addons';
import { create } from '@storybook/theming/create';

const theme = create({
    base: 'light',
    brandTitle: 'Gentellela React Library',
});

addons.setConfig({
    panelPosition: 'bottom',
    theme,
});

preview-head.html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/"> 
<link rel="manifest" href="/dashboard/manifest.json">

<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
<!-- Gentellela -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/gentelella/1.4.0/css/custom.min.css" rel="stylesheet"> -->
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<!--nprogress -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">

<link href="../htdocs/dashboard/src/css/gentellela.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
    window.REACT_STATICS = {};
</script>

preview.js

import { addDecorator, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { withA11y } from '@storybook/addon-a11y';
import { marginDecorator } from 'src/js/decorators';
import './storybook.css';

addParameters({
    backgrounds: [
        { name: 'default', value: 'transparent', default: true },
        { name: 'light', value: '#f7f7f7' },
        { name: 'dark', value: '#2a3f54' },
    ],
    docs: {
        container: DocsContainer,
        page: DocsPage
    },
    options: {
        showRoots: true,
    },
});

addDecorator(marginDecorator);
addDecorator(withA11y);

.babelrc (in .storybook directory)

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        ["react-docgen", {}, 'other_docgen'],      <<<<--- I'v tried without this as well
        "@babel/plugin-proposal-class-properties",
        "babel-plugin-styled-components",
        "add-react-displayname"
    ],
    "env":{
        "test": {
            "plugins":["require-context-hook"]
        }
    }
}

main.js

const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
const custom = require('../webpack.config')('dev');

module.exports = {
    webpackFinal: async (config) => {
        config = {
            ...config,
            resolve: custom.resolve,
            module: {
                ...config.module,
                rules: 
                custom.module.rules

            }};
        config.module.rules.push({
            test: /\.(stories|story)\.mdx$/,
            use: [
                {
                    loader: 'babel-loader',
                    // may or may not need this line depending on your app's setup
                    options: {
                        plugins: ['@babel/plugin-transform-react-jsx'],
                    },
                },
                {
                    loader: '@mdx-js/loader',
                    options: {
                        compilers: [createCompiler({})],
                    },
                },
            ],
        });
        config.module.rules.push({
            test: /\.(stories|story)\.[tj]sx?$/,
            loader: require.resolve('@storybook/source-loader'),
            exclude: [/node_modules/],
            enforce: 'pre',
        });
        return config;
    },
    stories:[
        '../htdocs/dashboard/src/js/stories/Introduction.stories.mdx',
        '../htdocs/dashboard/src/js/stories/*.stories.mdx',
        '../htdocs/dashboard/src/js/components/**/*.stories.(js|mdx)'],
    addons: [
        '@storybook/addon-backgrounds',
        '@storybook/addon-a11y',
        '@storybook/addon-viewport',
    ],
    presets: ['@storybook/addon-docs/preset']
}

System:

image

Additional context
`package.json

...
    "dependencies": {
        "@apollo/react-hooks": "^3.1.3",
        "@babel/plugin-proposal-class-properties": "^7.7.4",
        "@babel/preset-env": "^7.7.6",
        "@babel/preset-react": "^7.7.4",
        "@ckeditor/ckeditor5-build-classic": "^15.0.0",
        "@ckeditor/ckeditor5-react": "^1.1.3",
        "apollo-cache-inmemory": "^1.6.5",
        "apollo-client": "^2.6.8",
        "apollo-link-http": "^1.5.16",
        "axios": "^0.19.0",
        "babel-plugin-add-react-displayname": "0.0.5",
        "babel-plugin-array-includes": "^2.0.3",
        "babel-plugin-require-context-hook": "^1.0.0",
        "babel-plugin-styled-components": "^1.10.6",
        "bootstrap": "^4.4.1",
        "css-loader": "^3.3.1",
        "enzyme": "^3.10.0",
        "enzyme-adapter-react-16": "^1.15.1",
        "export-to-csv": "^0.2.1",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "faker": "^4.1.0",
        "glob": "^7.1.6",
        "graphql": "^14.5.8",
        "graphql-tag": "^2.10.1",
        "jest": "^24.9.0",
        "prop-types": "^15.7.2",
        "react-apollo": "^3.1.3",
        "react-beautiful-dnd": "^11.0.5",
        "react-bootstrap": "^1.0.0-beta.16",
        "react-dnd": "^10.0.2",
        "react-highlight-words": "^0.16.0",
        "react-router-dom": "^5.1.2",
        "react-router-prop-types": "^1.0.4",
        "react-sortable-tree": "^2.7.1",
        "react-transition-group": "^1.2.1",
        "style-loader": "^0.23.1",
        "styled-components": "^4.4.1",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.10",
        "webpack-entry-plus": "^1.0.18",
        "webpack-visualizer-plugin": "^0.1.11"
    },
    "devDependencies": {
        "@babel/core": "^7.8.3",
        "@storybook/addon-a11y": "^5.3.3",
        "@storybook/addon-backgrounds": "^5.3.3",
        "@storybook/addon-docs": "^5.3.3",
        "@storybook/addon-storyshots": "^5.3.3",
        "@storybook/addon-storyshots-puppeteer": "^5.3.3",
        "@storybook/addon-viewport": "^5.3.3",
        "@storybook/react": "^5.3.3",
        "@typescript-eslint/eslint-plugin": "^1.13.0",
        "@typescript-eslint/parser": "^1.13.0",
        "autoprefixer": "^9.7.3",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.0.6",
        "babel-plugin-react-docgen": "^4.0.0-beta.1",
        "eslint-config-prettier": "^6.7.0",
        "eslint-config-react-app": "^5.1.0",
        "eslint-plugin-babel": "^5.3.0",
        "eslint-plugin-es5": "^1.4.1",
        "eslint-plugin-flowtype": "^3.13.0",
        "eslint-plugin-import": "^2.19.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.17.0",
        "eslint-plugin-react-hooks": "^1.7.0",
        "jest-css-modules-transform": "^3.1.0",
        "jest-transform-css": "^2.0.0",
        "prettier-eslint": "^9.0.1",
        "prettier-stylelint": "^0.4.2",
        "puppeteer": "^2.0.0",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-test-renderer": "^16.12.0"
    },
...
@shilman
Copy link
Member

shilman commented Jan 16, 2020

Closing this as a dupe to #9415

@shilman shilman closed this as completed Jan 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants