styled-jsx: Styles doesn't get appended to the head in IE10 / IE11

I found that if I have a component that mounts another component in example by clicking some button, the styles applied for the mounted component doesn’t get applied.

Here is the example case:


import React, { Component } from 'react'
import Head from 'next/head'

class App extends Component {

  constructor () {
    super()
    this.state = {
      showDiv: false
    }
  }

  onLinkClick () {
    this.setState({
      showDiv: !this.state.showDiv
    })
  }

  render () {
    return (
      <div>
        <Head>
          <title>Next.js with styled-jsx and IE10</title>
          <script src='https://cdn.polyfill.io/v2/polyfill.min.js' />
        </Head>
        <a href='#' onClick={(e) => { this.onLinkClick() }}>Click me!</a>
        { this.state.showDiv &&
          <SubComponent />
        }
      </div>
    )
  }
}

class SubComponent extends Component {
  render () {
    return (
      <div>
        <div className='subcomponent'>
          This and that
        </div>
        <style jsx>{`
          .subcomponent {
            background-color: black;
            color: white;
          }  
        `}</style>
      </div>
    )
  }
}

export default App

The subcomponent doesn’t get the black background or the white text colors. The component gets the data-jsx attribute, but the <style></style> tags doesn’t get appended to the pages <head> as they are in Chrome (or other newer browsers).

This bug occurs in both IE10 and IE11.

Here is the complete example repo: https://github.com/roopemerikukka/next.js-styled-jsx-ie10-issue

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15

Most upvoted comments

@giuseppeg yep the problem was with the polyfill.

roopemerikukka on Jan 29, 2017

The example seems to work if I’ll include the whole babel-polyfill in the <Head /> like this

<Head>
  <script
    type='text/javascript'
    src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.20.0/polyfill.min.js' />
</Head>

So I can now make a test in there and include it only if necessary.

roopemerikukka on Jan 27, 2017