title: rollup, styled-components - "withComponent is not a function" error
body: <p>Fairly new to rollup and have come across this problem. I've googled but I can't seem to find an answer but I am fairly sure it is due to the rollup config.</p>
  
  <p><strong>What I am trying to do</strong></p>
  
  <p>I have a React library I created that uses (among others) styled-components, including a number of components that extend other components created using styled-components via .withComponent.</p>
  
  <p><strong>Code example</strong></p>
  
  <p>Badge.js: -</p>
  
  <pre><code>import styled from "styled-components"
  
  const Badge = styled.span`
    ...
  `
  export default Badge
  </code></pre>
  
  <p>Button.js: -</p>
  
  <pre><code>import Badge from "@my/library/Badge"
  import styled from "styled-components"
  
  export const Button = styled(Badge.withComponent("button"))`
    ...
  `
  </code></pre>
  
  <p>rollup.config.js: -</p>
  
  <pre><code>import multiEntry from "rollup-plugin-multi-entry"
  import babel from "rollup-plugin-babel"
  
  export default {
    input: __dirname + "/src/*.js",
    plugins: [
      babel({}),
      multiEntry()
    ],
    output: {
      dir: __dirname + "/lib/",
      format: "esm",
    },
    preserveModules: true,
    external: ["@my/library", "styled-components"],
  }
  </code></pre>
  
  <p>babel.config.js: -</p>
  
  <pre><code>module.exports = {
    presets: [
      '@babel/preset-env',
      '@babel/preset-react',
    ],
    plugins: [
      "@babel/plugin-proposal-class-properties",
      "babel-plugin-styled-components"
    ],
  };
  </code></pre>
  
  <p>rollup produces the following code: -</p>
  
  <p>Badge.js: -</p>
  
  <pre><code>import { taggedTemplateLiteral as _taggedTemplateLiteral } from './_virtual/_rollupPluginBabelHelpers.js';
  import styled from 'styled-components';
  
  function _templateObject() {
    var data = _taggedTemplateLiteral([
      ...
  ]);
  
    _templateObject = function _templateObject() {
      return data;
    };
  
    return data;
  }
  
  var Badge = styled.span(_templateObject(), function (props) {
      ...
  });
  </code></pre>
  
  <p>Button.js: -</p>
  
  <pre><code>import styled from 'styled-components';
  import Badge from '@my/library/Badge';
  
  var Button = styled(Badge.withComponent("button"))(_templateObject(), function (props) {
    ...
  });
  </code></pre>
  
  <p><strong>The problem</strong></p>
  
  <p>When running webpack on my app, I get the following error message: - </p>
  
  <pre><code>var Button = (0, _styledComponents["default"])(_Badge["default"].withComponent("button"))(_templateObject(), function (props) {
                                                                   ^
  TypeError: _Badge.default.withComponent is not a function
  </code></pre>
  
  <p>I have no idea why this is happening. I thought that having styled-components listed as an external would resolve this but it hasn't. Again, I am new to rollup. Any help greatly appreciated.</p>