styled-components can't be loaded multiple times in the storybook

[walexnelson]

I noticed I was getting a console warning as I started building out more components, and then the <ThemeProvider /> was sporadically deciding which stories it would work on. The console warning sends me here.

Following those docs, I got the following configured and it appears to be working. You'll need to extend the default storybook webpack.config.js with the following and then install styled-components as a dev dependency to your lerna repo. This has the potential of causing issues with your storybook if you have components that depend on different major releases of styled-components, so you probably should avoid that.

./.storybook/webpack.config.js

const path = require('path');
const getDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (base, env) => {
  const config = getDefaultConfig(base, env);

  // resolve styled-components to a single version for storybooks, as recommended by the docs
  // https://www.styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page
  config.resolve.alias['styled-components'] = path.resolve('node_modules', 'styled-components');

  console.log(config.resolve);
  
  return config;
};

[jimmytb]

You have no idea how much time you saved me. Thanks!

[sibbl]

Newer storybook versions require a slightly different format:

const path = require("path");

// Export a function. Accept the base config as the only param.
module.exports = async ({ config }) => {

  // resolve styled-components to a single version for storybooks, as recommended by the docs
  // https://www.styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page
  config.resolve.alias["styled-components"] = path.resolve(
    "node_modules",
    "styled-components"
  );

  console.log(config.resolve);

  return config;
};