search

umijs / umi

A framework in react community ✨
https://umijs.org
MIT License
15.34k stars 2.65k forks source link

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

Closed jefferybai closed 9 months ago

jefferybai commented 9 months ago

What happens?

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

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

在.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任意配置，可能修复报错。

Context

github-actions[bot] commented 9 months ago

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

fz6m commented 9 months ago

我创建了一个 4.1.0 版本的 umi 项目，添加了以下依赖：

  pnpm i -D @umijs/plugins styled-components

之后配置打开 SC ：

// .umirc.ts

  plugins: [
    '@umijs/plugins/dist/styled-components'
  ],
  styledComponents: {}

是可以正常使用的。

如果是 max 项目，无需安装 @umijs/plugins 这个依赖，直接配置开启即可：

// .umirc.ts

  styledComponents: {}

实际上，上文中 styled-components 也可以无需安装，如果不自己安装，会用自带的 styled-components ，从 umi 导入即可：

import { styled } from 'umi' // or `@umijs/max`

如果你显示安装了，就会用你安装的这个版本，你也可以从 styled-components 导入，没区别。

如还有问题，需要给一个最小复现仓库。

jefferybai commented 8 months ago

@fz6m 谢谢。 错误的引发处是。

import styled from 'styled-components';

需要改成

import { styled } from 'umi';
fz6m commented 8 months ago

如果你安装了 styled-components ，使用第一种写法直接从 styled-components 导入也是可以的，如上文所述，这种情况会用你显示安装的 styled-components 版本，否则，使用 umi 内置的 styled-components 版本，此时只能从 umi 导入才有类型提示。