[Bug] 使用umi自带的style-component插件时候， umijs会报错

[jefferybai]

问题

在umi中开启styled-component插件， 编写一个scyled-componet组件，在react组件中运行就会报错；

复现步骤

在.umirc.ts增加下面配置 styledComponents: {}

然后再代码中使用使用

import styled from 'styled-components';

export const LabelItem = styled.div`
  span {
    &:last-child {
      font-size: 18px;
      font-weight: bold;
    }
  }
  margin-bottom: 10px;
`;

在React组件中使用LabelItem就会出现错误。修改.umirc.ts任意配置，可能修复报错。

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
console.<computed> @ index.js:1
printWarning @ react.development.js:207
error @ react.development.js:181
resolveDispatcher @ react.development.js:1590
useContext @ react.development.js:1600
(anonymous) @ styled-components.browser.esm.js:1
O @ styled-components.browser.esm.js:1
renderWithHooks @ mf-dep____vendor.0ef975c2.js:359912
updateForwardRef @ mf-dep____vendor.0ef975c2.js:363755
beginWork @ mf-dep____vendor.0ef975c2.js:366197
beginWork$1 @ mf-dep____vendor.0ef975c2.js:371113
performUnitOfWork @ mf-dep____vendor.0ef975c2.js:370245
workLoopConcurrent @ mf-dep____vendor.0ef975c2.js:370231
renderRootConcurrent @ mf-dep____vendor.0ef975c2.js:370193
performConcurrentWorkOnRoot @ mf-dep____vendor.0ef975c2.js:369426
workLoop @ mf-dep____vendor.0ef975c2.js:383121
flushWork @ mf-dep____vendor.0ef975c2.js:383094
performWorkUntilDeadline @ mf-dep____vendor.0ef975c2.js:383388
queue.<computed> @ mf-dep____vendor.0ef975c2.js:392562
run @ mf-dep____vendor.0ef975c2.js:392536
eventListener @ mf-dep____vendor.0ef975c2.js:392547
Show 7 more frames
Show less
mf-dep____vendor.0ef975c2.js:359912 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
console.<computed> @ index.js:1
printWarning @ react.development.js:207
error @ react.development.js:181
resolveDispatcher @ react.development.js:1590
useContext @ react.development.js:1600
(anonymous) @ styled-components.browser.esm.js:1
O @ styled-components.browser.esm.js:1
renderWithHooks @ mf-dep____vendor.0ef975c2.js:359912
updateForwardRef @ mf-dep____vendor.0ef975c2.js:363755
beginWork @ mf-dep____vendor.0ef975c2.js:366197
callCallback @ mf-dep____vendor.0ef975c2.js:347898
invokeGuardedCallbackDev @ mf-dep____vendor.0ef975c2.js:347947
invokeGuardedCallback @ mf-dep____vendor.0ef975c2.js:348011
beginWork$1 @ mf-dep____vendor.0ef975c2.js:371137
performUnitOfWork @ mf-dep____vendor.0ef975c2.js:370245
workLoopConcurrent @ mf-dep____vendor.0ef975c2.js:370231
renderRootConcurrent @ mf-dep____vendor.0ef975c2.js:370193
performConcurrentWorkOnRoot @ mf-dep____vendor.0ef975c2.js:369426
workLoop @ mf-dep____vendor.0ef975c2.js:383121
flushWork @ mf-dep____vendor.0ef975c2.js:383094
performWorkUntilDeadline @ mf-dep____vendor.0ef975c2.js:383388
queue.<computed> @ mf-dep____vendor.0ef975c2.js:392562
run @ mf-dep____vendor.0ef975c2.js:392536
eventListener @ mf-dep____vendor.0ef975c2.js:392547
Show 7 more frames
Show less
react.development.js:1616 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (react.development.js:1616:1)
    at styled-components.browser.esm.js:1:1
    at O (styled-components.browser.esm.js:1:1)
    at renderWithHooks (mf-dep____vendor.0ef975c2.js:359912:18)
    at updateForwardRef (mf-dep____vendor.0ef975c2.js:363755:20)
    at beginWork (mf-dep____vendor.0ef975c2.js:366197:16)
    at HTMLUnknownElement.callCallback (mf-dep____vendor.0ef975c2.js:347898:14)
    at Object.invokeGuardedCallbackDev (mf-dep____vendor.0ef975c2.js:347947:16)
    at invokeGuardedCallback (mf-dep____vendor.0ef975c2.js:348011:31)
    at beginWork$1 (mf-dep____vendor.0ef975c2.js:371137:7)
    at performUnitOfWork (mf-dep____vendor.0ef975c2.js:370245:12)
    at workLoopConcurrent (mf-dep____vendor.0ef975c2.js:370231:5)
    at renderRootConcurrent (mf-dep____vendor.0ef975c2.js:370193:7)
    at performConcurrentWorkOnRoot (mf-dep____vendor.0ef975c2.js:369426:38)
    at workLoop (mf-dep____vendor.0ef975c2.js:383121:34)
    at flushWork (mf-dep____vendor.0ef975c2.js:383094:14)
    at performWorkUntilDeadline (mf-dep____vendor.0ef975c2.js:383388:21)
    at queue.<computed> (mf-dep____vendor.0ef975c2.js:392562:7)
    at run (mf-dep____vendor.0ef975c2.js:392536:5)
    at MessagePort.eventListener (mf-dep____vendor.0ef975c2.js:392547:3)
useContext @ react.development.js:1616
(anonymous) @ styled-components.browser.esm.js:1
O @ styled-components.browser.esm.js:1
renderWithHooks @ mf-dep____vendor.0ef975c2.js:359912
updateForwardRef @ mf-dep____vendor.0ef975c2.js:363755
beginWork @ mf-dep____vendor.0ef975c2.js:366197
callCallback @ mf-dep____vendor.0ef975c2.js:347898
invokeGuardedCallbackDev @ mf-dep____vendor.0ef975c2.js:347947
invokeGuardedCallback @ mf-dep____vendor.0ef975c2.js:348011
beginWork$1 @ mf-dep____vendor.0ef975c2.js:371137
performUnitOfWork @ mf-dep____vendor.0ef975c2.js:370245
workLoopConcurrent @ mf-dep____vendor.0ef975c2.js:370231
renderRootConcurrent @ mf-dep____vendor.0ef975c2.js:370193
performConcurrentWorkOnRoot @ mf-dep____vendor.0ef975c2.js:369426
workLoop @ mf-dep____vendor.0ef975c2.js:383121
flushWork @ mf-dep____vendor.0ef975c2.js:383094
performWorkUntilDeadline @ mf-dep____vendor.0ef975c2.js:383388
queue.<computed> @ mf-dep____vendor.0ef975c2.js:392562
run @ mf-dep____vendor.0ef975c2.js:392536
eventListener @ mf-dep____vendor.0ef975c2.js:392547
Show 3 more frames
Show less

Context

• Umi Version: 4.1.0
• Node Version: 16.17.1
• Platform: Chrome

[github-actions[bot]]

由于缺乏足够的信息，我们暂时关闭了该 Issue。请修改（不要回复） Issue 提供最小重现以重新开启。谢谢。