How add styled-components as an external for the rollup build?

Question

I'm trying to add styled-components in my rollup.config.js as the reproduction below, but it throw an error. I had the similar issue for react-router-dom and solved it by renaming react-router-dom into react-router-dom/Link in externals of rollup.config.js.

How to do with styled-components ?

Reproduction:

// rollup.config.js
export default {
  ...
  external: ['react', 'react-router-dom/Link', 'styled-components'],
  ...
  globals: { react: 'React', 'react-router-dom/Link': 'Link', 'styled-
  components: 'styled' },
};

Actual Behavior: Throw error when build with rollup

(babel plugin) An unexpected situation arose. Please raise an issue at 
https://github.com/rollup/rollup-plugin-babel/issues. Thanks!
node_modules/styled-components/dist/styled-components.es.js

Version styled-components: 2.0.1

Version rollup-plugin-babel: 2.7.1

Answer 1

Finally I resolve my need with this in my rollup.config.js

export default {
  ...
  external: ['styled-components'],
  ...
  globals: { 'styled-components': 'styled' },
};

It's depend on how we import the package, in my case I import it in my files as:

import styled from 'styled-components';