Styled components not working in IE11

Environment

System:

• OS: Windows 10
• CPU: x64 Intel® Core™ i7-7700 CPU @ 3.60GHz
• Memory: 4.90 GB / 15.94 GB

Binaries:

• Node: 8.11.3
• Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
• npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

npmPackages:

• styled-components: ^4.0.3 => 4.0.3

Browser

• IE 11.345.17134.0

Reproduction

Use styled components, extend components like:

export const Flex = styled.div`
	display: flex;
`;

export const ResponsiveFlex = styled(Flex)`
	@media (max-width: 1024px) {
		flex-direction: column;
	}
`;

Expected Behavior

No errors in IE 11, components are rendered and extended successfully.

Actual Behavior

Error: Cannot create styled-component for component: .Flex

Console stacktrace:

[ulich]

We had the same issue in IE11

Cannot create styled-component for component: [object Object].

it turned out that the issue of inheriting styles was the problem:

const DefaultNavbar = styled.nav`
    text-align: center;
`

const ExtendedNavbar = styled(DefaultNavbar)`
    position: fixed;
`

create-react-app (react-scripts 2.0.5) styled-components: 4.1.1

we also polyfill with core-js: 1.2.7

by doing

import 'core-js'

i hope this helps.

edit: Just found out that when importing core-js polyfills at the very start of the app, the issue goes away…

[dfkadyr1]

I have this issue