React hot loader not working with styled-components

Question

I am using react-hot-loader version 3.1.3, styled-components version 2.2.0 and react 16. This is the error message i get in the console. I've tried downgrading styled-components to version 2.0.0 and downgrading react-hot-loader to version 3.0.0 but it still does not work and so i am using the latest version of those scripts.

React Hot Loader: this component is not accepted by Hot Loader. Please check is it extracted as a top level class, a function or a variable.

Click below to reveal the source location: ƒ StyledComponent() { classCallCheck(this, StyledComponent); return possibleConstructorReturn(this, _ParentComponent.apply(this, arguments)); }

I have one styled component like so:

const Li = styled.li`
  padding: 10px;
  padding-bottom: 20px;
  margin: 0;
  font-size: 14px;
  color: #333`;

And at the top of my script i am importing styled like so:

import styled from 'styled-components';

And here is my index.js file's content:

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/css/index.css';
import App from './components/App/App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
import { AppContainer } from 'react-hot-loader';

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <BrowserRouter>
        <Component/>
      </BrowserRouter>
    </AppContainer>,
    document.getElementById('root')
  );
}

render(App);

if (module.hot){
  module.hot.accept( './components/App/App', () => { render(App) });
}

registerServiceWorker();

Answer 1

I think this is happening due to this issue of react-hot-loader.

Try to wrap the following portion of your code into a standalone component

<BrowserRouter>
   <Component/>
</BrowserRouter>

Then, import the exported component in index.js and place it between AppContainer tag.

Note: Hot module replacement doed not work with styled-components v2.2.1 due to this issue. As you are using v2.2.0, you should not encounter this problem.