[StoryShots] No preview on CSF stories in pictures.

Describe the bug After upgrading to the latest beta.19activating my StoryShots test to update some snapshots, the component i migrated to CSF shows no-preview in its pictures. It only applies to sub-stories inside the main one (which works fine)

The main story:

One of the sub-stories:

The story in question:

import React from 'react';
import { Card, Container } from '................/styleguide';
import { boolean, select } from '@storybook/addon-knobs';

export default {
  title: 'WOW',
  component: Card,
};

const color = select('Color', ['null', 'orange', 'yellow', 'blue', 'lightBlue'], 'blue');
const accent = select('Accent', ['null', 'orange', 'yellow', 'blue', 'lightBlue'], 'yellow');
const rounded = boolean('Rounded', true);
const borderLess = boolean('Borderless', true);

export const all = () => (
  <>
    <Card>Basic Card</Card>
    <Card accent={accent}>Accent</Card>
    <Card borderless={borderLess} color={color}>
      I have no Borders!
    </Card>
    <Card rounded={rounded} borderless={borderLess} color={color}>
      I am Rounded AND BorderLess
    </Card>
  </>
);

export const WithAccent = () => <Card accent={accent}>Accent</Card>;

export const BorderLess = () => (
  <Card borderless={borderLess} color={color}>
    I have no Borders!
  </Card>
);
export const Rounded = () => (
  <Card rounded={rounded} borderless={borderLess} color={color}>
    I am Rounded
  </Card>
);

BorderLess.story = {
  name: 'BorderLess Card',
};

Rounded.story = {
  name: 'Rounded Card',
};
WithAccent.story = {
  name: 'Card With Accent',
};

My webpack config:

const path = require("path");

const ignoredProps = ['as', 'css', 'theme', 'ref'];

const storybookDocGenRule = () => ({
  test: /\.(tsx|ts)?$/,
  use: [
    {
      loader: require.resolve('react-docgen-typescript-loader'),
      options: {
        propFilter: prop => {
          if (ignoredProps.includes(prop.name)) {
            return false;
          }

          if (prop.parent) {
            return (
              !prop.parent.fileName.includes('node_modules/@types/react/') &&
              !prop.parent.fileName.includes('@types/styled-system')
            );
          }

          return true;
        },
      },
    },
  ],
  exclude: /node_modules/,
});

module.exports = ({ config }) => {
  config.context = (path.join(__dirname, '../'));

  config.module.rules =[
    tsRule({configFileName: path.join(__dirname, '../tsconfig.json'),
    include: [path.join(__dirname, '../stories')]}),
    storybookDocGenRule(),
    jsRule(browserProdConfig),
    storyRule,
    cssRule,
    config.module.rules[1]];

  config.resolve.extensions.push(".ts", ".tsx");

  config.resolve.alias = {
    '.........../styleguide': path.resolve(styleguideContext)
  };
  return config;
};

My storybook config

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { withKnobs } from '@storybook/addon-knobs';
import { bootstrap } from '............./styleguide';
import {StoryContainer} from "../stories/storyComponents/StoryContainer";

bootstrap();

const storyBookDecorators = [
  withKnobs,
  withOptions({
    name: `@............/styleguide`,
    url: 'https://github.com/........./.........../tree/master/styleguide',
    hierarchyRootSeparator: /\|/,
  }),
];

addDecorator(Story =>
  <StoryContainer>
    <Story />
  </StoryContainer>
);

storyBookDecorators.forEach(addon => addDecorator(addon));

configure(require.context('../stories', true, /\.story\.(jsx|ts|js|tsx)?$/), module);

My Presets:

const path = require("path");

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {
        babelrc: path ,
        presets: [],
        plugins: ['emotion'],
      },
      sourceLoaderOptions: null,
    },
  },
  {
    name: "@storybook/preset-typescript",
    options: {
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
      },
      include: [path.resolve(__dirname, "../stories")]
    }
  }
];

Would love to know how i can avoid this since it is blocking our upgrade to the new docgen feature.

[shilman]

Thank @Hypnosphi 👏

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.7 containing PR #9291 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.