React类组件报Cannot access 'Hello' before initialization错误求助

错误触发原因 #

• 核心原因是你使用的react-emotion（Emotion v9及更早版本）的Babel转译插件存在变量声明时序问题。当你在类组件声明前定义styled生成的样式组件时，转译后的代码会在Hello类完成初始化之前就尝试引用该组件，最终抛出初始化前无法访问的报错。
• 额外触发条件：你当前定义的StyledDiv属于未被使用的冗余代码，删除后转译阶段不会处理该段样式组件逻辑，因此报错直接消失。

对应解决方法 #

方案1：直接删除冗余代码 #

如果你确实不需要用到StyledDiv组件，直接删除该段样式声明代码即可，这是成本最低的修复方式。

方案2：调整样式组件声明顺序 #

如果你后续需要使用该样式组件，将其声明挪到Hello类组件的导出之后即可，类的render方法仅在组件实例化时才会调用，此时样式组件已经完成初始化，不会出现引用错误。调整后代码示例：

import * as React from 'react';
import styled, {css} from 'react-emotion';

export default class Hello extends React.Component {
  render() {
    return (
      <StyledDiv>
        <div>
          <h1>Hello</h1>
        </div>
      </StyledDiv>
    );
  }
}

// 样式组件声明挪到类导出之后
const StyledDiv = styled('div')`
  color: red;
`;

注：原代码中使用的<Container>未定义，示例中已替换为StyledDiv，你可以根据实际需求调整为对应组件。

方案3：升级Emotion版本 #

react-emotion已经停止维护，现在官方最新版本为@emotion/react v11+，新版本已经彻底修复了该转译时序问题，升级到新版并调整对应的Babel配置即可从根源解决该类问题。

内容的提问来源于stack exchange，提问作者Kurt Shaw