styled-components: 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:

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 28 (10 by maintainers)

Most upvoted comments

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…

+13

ulich on Nov 22, 2018

I have this issue

+10

dfkadyr1 on Nov 16, 2018

Any updates on this? I am getting this error in IE11 with 16.7.0, styled-components 4.1.3 after adding the Symbol polyfill.

andrew-t-james on Feb 11, 2019

I have been grappling with the same error - we are already polyfiling Symbol - the only solution I have found that is reliable is to rewrite my extensions of styled components with the following pattern:


const childStyledComponent = styled(props => <BaseStyledComponent {...props} />)`
// new styles

`

I’d be interested to know if anyone has any views on this approach.

admataz on Feb 7, 2019

we found relying on runtime loading of polyfills was unreliable - and that the suggestion in @keul’s comment above i.e. to have the Symbol polyfill (and some others) loaded before any other JS was loaded was required - otherwise my verbose workaround above did work too

admataz on Mar 26, 2019

My two cents on this issue for posterities.

I tried to polyfilling everything as described here, but the issue was fixed only when I moved the import polyfill at the very beginning of my main file (yeah… shame on me I was not using webpack for this as recommended).

Note: the import before the polyfills ones were not related to the component that triggered the error (there were no React stuff up there). Still I had the issue. So: beware of this.

keul on Feb 8, 2019

@ulich Thank youu! 😃

import 'core-js';

fixed it! But yeah, it should be in the beginning of index.tsx/index.js to be working correctly. Even placing it after import * as React from 'react'; not works as expected.

gregorianisch on Nov 23, 2018