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

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]

@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.

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