반응성 핫 로더가 스타일 부품과 호환되지 않음

Question

반응 핫로드로 버전 3.1.3, 스타일 부품 버전 2.2.0을 사용 중이며 16으로 반응합니다. 이것은 콘솔에 나타나는 오류 메시지입니다. 나는 버전을 2.0.0 및 다운 그레이드 반응 - 핫 - 로더를 3.0.0 버전으로 다운 그레이드했는데 여전히 작동하지 않습니다 그래서 그 스크립트의 최신 버전을 사용하고 있습니다.

반응 로더 :이 구성 요소는 핫 로더에서 허용되지 않습니다. 최상위 클래스, 함수 또는 변수로 추출되었는지 확인하십시오.

소스 위치를 알려면 아래를 클릭하십시오. ƒ 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(); 

Answer 1

이 문제는 this 호 react-hot-loader 호로 인해 발생합니다.

봅니다, 그리고 독립 구성 요소

<BrowserRouter> 
    <Component/> 
</BrowserRouter> 

에 코드의 다음 부분을 감싸 index.js에 내 보낸 구성 요소를 가져 AppContainer 태그 사이에 배치합니다.

참고 : 핫 모듈 교체 styled-components v2.2.1this로 인한 문제를 작동하지 doed. v2.2.0을 사용할 때이 문제가 발생하지 않아야합니다.