Incorrect usage of react-is from ESM bundles

[developit]

Hiya! There was a previous issue about this (#3256), but it was closed with instructions on how to configure the user's bundler to work around the issue.

I've done some spelunking and found the root cause here: styled-components is trying to use named imports with a CommonJS package. This does sometimes work in Node or a configured bundler, however react-is is a package that uses conditional commonjs re-exporting techniques that cause it to fail.

The solution here is actually deceptively simple: styled-components.*.esm.js should use a default import for react-is, not named imports. Or it could go the extra mile and do interop:

Current styled-components.esm.js (incorrect):

import{typeOf as e,isElement as t,isValidElementType as n}from"react-is";

Fixed version:

import reactIs from"react-is";
var { e: typeOf, t: isElement, n: isValidElementType } = reactIs;

Fancy interop version:

import * as reactIs from"react-is";
var { e: typeOf, t: isElement, n: isValidElementType } = reactIs.default || reactIs;

This issue is caused by a configuration mix-up in styled-component's Rollup config: the rollup-plugin-commonjs namedExports option is used for react-is, however this is never applied because the module is marked as external (and thus never processed by the plugin).

I can submit a PR to fix this if there's a willingness to merge!