React使用Styled Components引用SharedButton报初始化前无法访问如何解决

这个ReferenceError: Cannot access 'SharedButton' before initialization报错通常由两类问题触发：

1. 模块间存在循环依赖：shared.ts和myComponent.ts存在互相导入的逻辑，导致模块加载时SharedButton还没完成初始化就被调用
2. 模块导入顺序异常：打包工具（如旧版webpack、低版本vite）在处理导入顺序时，优先执行了styled(SharedButton)的逻辑，此时SharedButton还未完成赋值

• 方案1：排查并移除循环依赖
  优先检查shared.ts中是否导入了myComponent.ts所属模块的内容，如果存在循环引用，将两份文件的公共依赖抽离到第三个独立文件中断开循环即可。你也可以用工具扫描全局循环依赖：
  npx madge --circular ./src
• 方案2：调整导入顺序
  遵循「第三方包优先于本地模块导入」的规范，调整myComponent.ts的导入顺序：

// 先导入第三方依赖
import styled from "styled-components";
// 再导入本地模块
import { SharedButton } from "./shared";

const MyComponentButton = styled(SharedButton)`
  float: right;
`;

const MyComponent = () => {
   return <MyComponentButton> TEST </MyComponentButton>
}

• 方案3：修改扩展组件的初始化时机
  把扩展样式的逻辑放到组件内部执行，保证调用时SharedButton已经完成初始化：

import styled from "styled-components";
import { SharedButton } from "./shared";

const MyComponent = () => {
  const MyComponentButton = styled(SharedButton)`
    float: right;
  `;
  return <MyComponentButton> TEST </MyComponentButton>
}

• 方案4：改用样式注入避免组件继承
  不直接继承SharedButton生成新组件，通过样式属性覆盖的方式实现自定义样式：

// shared.ts 调整为支持传入自定义样式
import styled, { CSSProp } from "styled-components";

export const SharedButton = styled.button<{ css?: CSSProp }>`
  border: 1px solid red;
  color: #1c101e;
  font-size: 14px;
  ${props => props.css || ''}
`;

// myComponent.ts 直接传自定义样式
import { SharedButton } from "./shared";
import { css } from "styled-components";

const MyComponent = () => {
  const customBtnStyle = css`
    float: right;
  `;
  return <SharedButton css={customBtnStyle}> TEST </SharedButton>
}

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