Storybook: Storybook 5 not displaying all stories

[haldunanil]

Describe the bug
I am dynamically loading stories, but only the first 18 seem to get loaded. The rest simply don't show up on the left nav.

Expected behavior
All of the identified story files should be loaded into Storybook (indeed, when I do a console.log of req.keys(), all of the files I want are listed).

Screenshots

Code snippets

import React from "react";
import { create } from "@storybook/theming";
import { withDocs } from "storybook-readme";
import styled from "styled-components";
import NEFThemeProvider from "../src/components/NEFThemeProvider";

// add theme
addDecorator(s => <NEFThemeProvider>{s()}</NEFThemeProvider>);

// parameters
addParameters({
  options: {
    panelPosition: "right",
    theme: create({
      base: "light",
      brandTitle: "NEF React Components"
    })
  }
});

const PreviewComponent = styled.div`
  margin: 25px 0;
`;

export const withMarkup = withDocs({
  PreviewComponent
});

// dynamically import all stories
const req = require.context("../src/components", true, /\.stories\.tsx$/);

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

configure(loadStories, module);

System:

• OS: Mac OS High Sierra
• Device: Macbook Pro 2018
• Browser: Chrone
• Framework: React
• Addons:
  
  
  
  • addon-actions
  
  
  • addon-knobs
  
  
  • addon-viewport
  
  
• Version: 5.0.11

Additional context
Using the storybook-readme project to generate my story markdowns.

[shilman]

Any other errors on the JS console or command-line? What happens if you disable storybook-readme?

[haldunanil]

The issue was this line:

FormFieldStories.addDecorator(
  withKnobsOptions({
    escapeHTML: false
  })
);

I didn't realize it no longer worked on v5+, so it was causing the pages with it and required after it to all silently fail to be loaded. It might be worth adding this into the migration docs in case someone else runs into the issue. I changed it to this:

FormFieldStories.addDecorator(withKnobs).addParameters({
  readme: { content: FormFieldReadme }
});

and added:

{ escapeHTML: false }

as an arg to wherever needed in a story after the component.