Storybook: addon-info details disappear on reload ever since using req.keys().forEach((filename) => req(filename))

[yanivshiloah]

Describe the bug
Ever since I've started using the req.keys().forEach((filename) => req(filename)) pattern to load all of the stories in the directory, each time I change something in the component or the story, all of the addon-info details disappear from the story. If I put all of my stories under index.js it works fine.

Expected behavior
Reload should not cause the addons info disappearing from iframe.

To Reproduce
stories/index.js

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

const req = require.context('./', true, /.Story.js$/);

function loadStories () {
    req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);](url)

./storybook/config.js

import {addDecorator, configure} from '@storybook/react';
import {withInfo} from '@storybook/addon-info';
import {withKnobs} from '@storybook/addon-knobs';

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

addDecorator(
    withInfo({
        inline: true,
        header: true
    })
);

addDecorator(withKnobs);

configure(loadStories, module);

ModalStory.js

import React from 'react';
import {storiesOf} from '@storybook/react';
import {UtModal, UtButton} from '../src';

storiesOf('Modal', module)
    .add('With Trigger', () => (
        <UtModal trigger={<UtButton>Click Here</UtButton>}>
            <UtModal.Header>Select a Photo</UtModal.Header>
            <UtModal.Content>
                <div>test</div>
            </UtModal.Content>
        </UtModal>
    ));

package.json

{
  "name": "@perionnet/ut-react-common",
  "version": "1.0.6",
  "description": "Undertone React common lib",
  "main": "src/index.js",
  "module": "dist/index.js",
  "author": "Undertone",
  "license": "ISC",
  "peerDependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  },
  "dependencies": {
    "@perionnet/ut-icon": "^1.0.6",
    "@storybook/addon-actions": "^4.0.8",
    "autobind-decorator": "^2.3.1",
    "classnames": "^2.2.6",
    "cleave.js": "^1.4.4",
    "color-hash": "^1.0.3",
    "countup": "^1.8.2",
    "express": "^4.16.4",
    "lodash": "^4.17.11",
    "lottie-web": "^5.4.2",
    "md5": "^2.2.1",
    "prop-types": "^15.6.2",
    "react-select": "^2.1.2",
    "react-transition-group": "^2.5.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.83.0",
    "semantic-ui-sass": "^2.3.1",
    "string-hash": "^1.1.3",
    "string-template": "^1.0.0",
    "textfit": "^2.3.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "7.1.0",
    "@babel/plugin-proposal-class-properties": "7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.6",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
    "@babel/plugin-syntax-dynamic-import": "7.0.0",
    "@babel/plugin-transform-classes": "7.1.0",
    "@babel/plugin-transform-destructuring": "7.0.0",
    "@babel/plugin-transform-react-constant-elements": "7.0.0",
    "@babel/plugin-transform-react-display-name": "7.0.0",
    "@babel/plugin-transform-regenerator": "7.0.0",
    "@babel/plugin-transform-runtime": "7.1.0",
    "@babel/preset-env": "7.1.0",
    "@babel/preset-flow": "7.0.0",
    "@babel/preset-react": "7.0.0",
    "@babel/runtime": "7.0.0",
    "@storybook/addon-info": "^4.0.8",
    "@storybook/addon-knobs": "^4.0.8",
    "@storybook/react": "4.0.0-alpha.24",
    "@types/react": "^16.7.7",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^8.0.4",
    "babel-plugin-react-docgen": "^2.0.0",
    "css-loader": "^1.0.1",
    "eslint": "^4.6.1",
    "eslint-plugin-react": "^7.11.1",
    "icon-font-generator": "^2.1.8",
    "node-sass": "^4.10.0",
    "nodemon": "^1.18.6",
    "nps": "^5.7.1",
    "nps-utils": "^1.3.0",
    "parcel-bundler": "^1.10.3",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "sass-loader": "^7.1.0",
    "webpack": "4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook",
    "build-storybook": "build-storybook -c .storybook -o .out",
    "start": "nps start",
    "build": "nps build",
    "prepublish": "nps build",
    "watch": "nps build.watch",
    "lint": "eslint ."
  },
  "files": [
    "dist",
    "lib",
    "src"
  ]
}

[ozzyogkush]

I am running into this issue as well. It happens for the info addon also when say I modify an info parameter in a story definition and it tries to HMR. The panel disappears. On version 4.0.9.

[maacky]

@yanivshiloah: I guess this happens only when you load your stories twice, in /storybook/config.js and then in /stories/index.js. Is there any reason you need to do this instead of loading them all in /storybook/config.js only, like so?

import { configure, addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';

const req = require.context('../stories/', true, /.Story.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(
  withInfo({
      inline: true,
      header: true
  })
);

addDecorator(withKnobs);

configure(loadStories, module);

This way you can still dynamically add all your stories from '/stories' without breaking the addon behavior on reload.

[yanivshiloah]

@maacky you are absolutely right, didn't notice. It's working fine now.
Thank you very much!

[ozzyogkush]

@maacky @yanivshiloah FYI I notice this issue even when only requiring the stories by context in the config file. I do use require.context() in other places to dynamically import other types of files (notably, markdown files), but not the actual story files themselves.

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