使用Grommet Starter添加<AppBar>标签时触发hot-update.js错误

DevOps 小满

2026-7-16

问题描述

我正在学习Grommet的starter示例，添加<AppBar>组件时触发了以下错误：

defaultValidatorFn is not a function
TypeError: defaultValidatorFn is not a function
    at shouldForwardProp (http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:4491:12)
    at http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:11014:142
    at D (http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:11023:6)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:31049:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:33620:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:35667:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:20641:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:20685:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:20742:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:40616:11)

同时控制台出现大量如下警告：

styled-components: it looks like an unknown prop "full" is being sent through to the DOM, which will likely trigger a React console error

我尝试执行yarn add @emotion/is-prop-valid但问题未解决，请问问题出在哪？

解决方案

问题根源是Grommet与styled-components版本不兼容：styled-components v6的API变更导致了shouldForwardProp相关报错，而你安装的@emotion/is-prop-valid属于Emotion生态，对基于styled-components的Grommet无效。
解决步骤：
1. 卸载当前styled-components，安装兼容的v5.x稳定版本：
```
yarn remove styled-components
yarn add styled-components@^5.3.11
```
2. 清理缓存并重建依赖：
```
rm -rf node_modules yarn.lock
yarn install
yarn start
```
3. 确认项目中没有同时引入Emotion和styled-components的冲突依赖，保持样式库依赖一致。