React：无效的钩子调用错误和 Framer Motion 问题

Question

我在安装和使用 Framer-Motion 后遇到“错误：无效挂钩调用”问题。所以我遵循了 React.js(https://reactjs.org/warnings/invalid-hook-call-warning.html) 文档中的调试策略，我看到的唯一可能导致此问题的是“其他原因”之前的最后一部分，其中讨论了 React Router Link.

这是导致此问题的两个文件的代码。 Package.json 来自“客户端”目录之外的文件（对于服务器）：

"main": "server.js",
  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:prod": "node server.js",
    "start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
    "client": "cd client && npm run start",
    "install": "cd client && npm install",
    "build": "cd client && npm run build",
    "heroku-postbuild": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/MrDawit/Portafoglio_react.git"
  },
  "author": "",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/MrDawit/Portafoglio_react/issues"
  },
  "homepage": "",
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.6.0",
    "concurrently": "^5.3.0",
    "cookie-parser": "^1.4.5",
    "core-js": "^3.15.2",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "framer-motion": "^4.1.17",
    "googleapis": "^67.0.0",
    "if-env": "^1.0.4",
    "nodemailer": "^6.4.17",
    "nodemon": "^2.0.7",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.3",
    "react-dom": "^17.0.1",
    "run-all": "^1.0.1"
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  }

这里是 React 的“客户端”目录中 Package.json 文件中的代码：

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "axios": "^0.21.1",
    "gh-pages": "^3.1.0",
    "http-proxy-middleware": "^1.0.6",
    "nodemailer": "^6.4.17",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "set Port=3080 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Answer 1

问题最终是 Framer Motion 应该位于“client”目录内的 package.json 文件中。由于 Bootstrap 和其他类似模块包含在外部 package.json 文件中并且它们安装正确，这误导了我认为 Framer Motion 可以做同样的事情。解决我的问题的步骤：

npm uninstall framer-motion
删除两个 node_modules（“客户”目录内外）目录
正在删除两个包-lock.json 文件
npm install
cd client
npm install framer-motion

首先没有执行第 5 步是我出错的原因。

React：无效的钩子调用错误和 Framer Motion 问题

React: Invalid hook call error and Framer Motion issue

reactjs

react-router

react-hooks

react-dom

framer-motion