错误:mobx-react-lite需要react和Hooks支持



我无法启动我的应用程序。我不知道我在找什么。一切似乎都很好。

在一开始,我试图将我的商店从redux改为mopx。我所做的一切主要是关于typescript babel转换等。最终,我的项目成功构建。然而,typescript构建不足以启动我的项目。此刻我很困惑。有什么建议吗?解决方案会更好:((

这是我的包.json

{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "^7.11.0",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@types/jest": "^26.0.7",
"@types/node": "^14.0.26",
"@types/react": "^16.9.43",
"@types/react-dom": "^16.9.8",
"@types/react-redux": "^7.1.9",
"@types/react-router-dom": "^5.1.5",
"@types/react-select": "^3.0.14",
"axios": "^0.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"create-react-hook": "^3.0.2",
"date-fns": "^2.0.0-alpha.27",
"mobx": "^5.15.4",
"mobx-react": "^6.2.5",
"mobx-react-lite": "^2.0.7",
"moment": "^2.24.0",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.6.3",
"react-alert": "^5.5.0",
"react-alert-template-basic": "^1.0.0",
"react-confirm-alert": "^2.0.7",
"react-datepicker": "^2.5.0",
"react-dom": "^16.6.3",
"react-dropdown": "^1.6.4",
"react-fileupload-progress": "^0.4.2",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"react-select": "^2.4.3",
"react-table": "^6.8.6",
"react-transition-group": "^4.0.1",
"redux": "^4.0.1",
"typescript": "^3.9.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all",
"not dead",
"not ie <= 11",
"not op_mini all",
"not ie <= 11",
"not op_mini all"
]
}

此外,错误显示如下

Error: mobx-react-lite requires React with Hooks support
▼ 2 stack frames were expanded.
Module.<anonymous>
C:/Users/User/Source/repos/sasd/node_modules/mobx-react-lite/dist/mobxreactlite.esm.js:5
Module../node_modules/mobx-react-lite/dist/mobxreactlite.esm.js
http://localhost:3000/static/js/0.chunk.js:7192:30
▲ 2 stack frames were expanded.
__webpack_require__
C:/Users/User/Source/repos/obilet/webpack/bootstrap:782
779 | };
780 | 
781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^  783 | 
784 | // Flag the module as loaded
785 | module.l = true;`

第一个支持钩子的react版本是16.8.0

虽然不确定您安装的带有这些烦人的^的库版本

尝试npm update reactyarn upgrade react

添加"使用客户端";你在哪里使用mobx

这将是一个迟来的答案,实际上并不能像他们使用旧版本的react那样解决操作问题,但如果你使用现代react和Next.js(>=13.x(遇到这个问题,就像上面的评论所说的那样。您需要添加";使用客户端";在任何脚本的顶部,您计划在使用钩子时制作正面。Next.js将把任何其他脚本视为禁用钩子的服务器组件。

"use client";
import { useState } from "react";
import { observer } from "mobx-react-lite";
function Navbar() { ... }

最新更新