Not working in a UI library that makes use of styled-components

[jhackett1]

Describe the bug

I'm building a library of React components that also makes use of styled-components for styling.

Storybook of course needs styled-components to be installed to work.

However, when I npm link my library and install it in an example app I'm building, the app throws an error due to multiple versions of styled-components loading.

I'm using rollup to package up my library and manage externals, and it works fine when npm installed normally.

I guess this is something to do with the way npm link works.

I've noticed that if I run npm install styled-components --no-save, it works, but I wouldn't know how to deploy the storybook to the web without its dependencies fully listed.

Expected behavior
I need a way to split up the dependencies (?) so that the things I need installed to run storybook don't leak out through npm link and break my example app.

I am not sure whether this can be considered a bug or a request for improved docs.

Code snippets
My rollup config for packaging the library:

import resolve from '@rollup/plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import images from "@rollup/plugin-image"
import autoExternal from "rollup-plugin-auto-external"
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    peerDepsExternal(),
    autoExternal(),
    resolve({
      extensions: [
        ".js", 
        ".jsx"
      ]
    }),
    images(),
    babel({
      exclude: 'node_modules/**'
    }),
  ],
}

My library's package.json:

{
  "name": "flipper",
  "version": "1.0.0",
  "description": "",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -cw",
    "storybook": "start-storybook",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@rollup/plugin-image": "^2.0.1",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "@storybook/addon-storyshots": "^5.3.3",
    "@storybook/react": "^5.3.3",
    "babel-loader": "^8.0.6",
    "jest": "^24.9.0",
    "react-test-renderer": "^16.12.0",
    "rollup": "^1.29.0",
    "rollup-plugin-auto-external": "^2.0.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "styled-components": "^5.0.0"
  },
  "peerDependencies": {
    "styled-components": "^5.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "jest": {
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
    }
  }
}

System:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 13.5.0 - ~/.nvm/versions/node/v13.5.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v13.5.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 72.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-storyshots: ^5.3.3 => 5.3.3 
    @storybook/react: ^5.3.3 => 5.3.3 

Additional context
This feels like it should be made clearer, since storybook is meant for making UI libraries, most of those libraries end up as npm modules, and surely a big fraction of those use styled-components.

styled-components guidance for situations like this: https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!