Custom config breaks module imports with Storybook

[intuit]

Custom config breaks module imports with Storybook

[hipstersmoothie]

I think your problem is that you aren't loading your stories in you config file. A blank config will load no stories.

You need to do something like

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

configure(
  require.context(
    COMPONENT,
    true,
    /^\.\/(?!(?:node_modules)).*\.stories\.(tsx|ts|js|jsx)$/
  ),
  module
);

To use our default:

require('@design-systems/storybook/.storybook/defaultConfig');

or if you want to order things I do:

function loadStories() {
  const req = require.context(
    COMPONENT,
    true,
    /^\.\/(?!(?:node_modules)).*\.stories\.(tsx|ts|js|jsx|mdx)$/
  );

  // don't use arrow functions
  const welcome = req.keys().filter(function(filename) {
    return filename.includes('welcome');
  });
  const styles = req.keys().filter(function(filename) {
    return filename.includes('./packages/styles/');
  });
  const grid = req.keys().filter(function(filename) {
    return filename.includes('./packages/responsive-grid/');
  });
  const designVoice = req.keys().filter(function(filename) {
    return filename.includes('design-docs/src/voice');
  });
  const designMotion = req.keys().filter(function(filename) {
    return filename.includes('design-docs/src/motion');
  });
  const components = req
    .keys()
    .filter(function(filename) {
      return !filename.includes('./styles/');
    })
    .sort();

  return []
    .concat(welcome.map(req))
    .concat(designVoice.map(req))
    .concat(designMotion.map(req))
    .concat(styles.map(req))
    .concat(components.map(req))
    .concat(grid.map(req))
    .filter(story => Boolean(story.default));
}

configure(loadStories, module);

[hipstersmoothie]

As for the typescript error you should install the types for styled components.

yarn add -DW @types/styled-components

[hipstersmoothie]

@ianlapham does this fix your problem?