Custom config breaks module imports with Storybook

[Ian Lapham]

Describe the bug

In the storybook section of the docs there are instructions on how to add custom storybook configuration. (https://intuit.github.io/design-systems-cli/#/generated/storybook).

I am trying to add a custom config file as described in the instructions. I am creating a '.storybook' folder at the root of my ds project and adding 'config.js' (also tried with ts) within that folder.

When i do this it breaks module imports in my components themselves. If i remove the custom config file the issue goes away. This happens even if the config file is empty.

Is there additional logic I should be including in the config file?

To Reproduce

Create a '.storybook' folder at the root and add a 'config.js' file within it. Try to import a package into a component.

Expected behavior

Expect no issues importing packages within the component.

Screenshots

Desktop (please complete the following information):

• OS: 10.15
• Browser chrome
• Version 79

[Andrew Lisowski]

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);

[Andrew Lisowski]

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

yarn add -DW @types/styled-components

[Andrew Lisowski]

@ianlapham does this fix your problem?