Горячий загрузчик React не работает со стилизованными компонентами

Я использую версию реактивного загрузчика 3.1.3, версию стилизованных компонентов 2.2.0 и реагирую 16. Это сообщение об ошибке, которое я получаю в консоли. Я пробовал откатить стилизованные компоненты до версии 2.0.0 и откатить response-hot-loader до версии 3.0.0, но это все еще не работает, поэтому я использую последнюю версию этих сценариев.

React Hot Loader: этот компонент не поддерживается Hot Loader. Пожалуйста, проверьте, извлечен ли он как класс верхнего уровня, функция или переменная.

Щелкните ниже, чтобы увидеть расположение источника: ƒ StyledComponent () {classCallCheck (this, StyledComponent); return possibleConstructorReturn (this, _ParentComponent.apply (this, arguments)); }

У меня есть один стилизованный компонент:

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

И в верхней части моего скрипта я импортирую в таком стиле:

import styled from 'styled-components';

А вот содержимое моего index.js файла:

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();