Super expression is undefined when using rollup

When used with rollup it throws an error at runtime:

Uncaught TypeError: Super expression must either be null or a function, not undefined
    at _inherits (root.js:25)
    at root.js:38
    at root.js:161
    at createCommonjsModule (index.js:3)
    at processor.js:254

With webpack works fine. And the app works fine until I add styled-components. I wasn’t sure if issue it here since it can be a problem with rollup-plugin-commonjs or even react… I left a reproduction repo here: NicolasParada/styled-components

[mxstbr]

Thanks to the amazing @Rich-Harris, we’re now bundling with Rollup which not only means a reduction of size for the UMD bundle, but also a .es.js bundle that will fix this issue!

[Rich-Harris]

Okay, I’ve done some digging. It looks like this is one of this incredibly frustrating interop headaches caused by back-and-forth conversion between CommonJS and ES modules. Specifically, it looks like the add-module-exports Babel plugin is causing havoc, because it violates the expectation in rollup-plugin-commonjs that a module with __esModule: true will have exports.default rather than module.exports.

The good news is that it’s easy to fix – just use the dist file rather than bundling the library yourself:

import styled from 'styled-components/dist/styled-components.js'

Or, use the existing import but update your Rollup config:

import { resolve } from 'path'
const styledComponentsDist = resolve(__dirname, 'node_modules/styled-components/dist/styled-components.js')

export default {
  entry: 'src/main.js',
  dest: 'dist/bundle.js',
  preferConst: true,
  plugins: [
    {
      resolveId (importee) {
        if (importee === 'styled-components') return styledComponentsDist;
      }
    },
    replace({
      'process.env.NODE_ENV': JSON.stringify('development')
    }),
    ...

Slightly off-topic, but as part of my digging I experimented with building this library with Rollup rather than Webpack (so that it could export an ES module bundle for the benefit of people using Webpack 2 or Rollup like @NicolasParada). The UMD build is 13% smaller (20,549 bytes gzipped down from 23,553) and parses roughly 60% quicker (~8ms in Chrome down from ~20ms, similar increase in Safari, less in Firefox). Any interest in a PR? Totally cool if not but the offer’s there 😀