CODEWITHSUNDEEP
reactjsreact-routerreact-hooksreact-domframer-motion
Mr. Dawit
Mr. Dawit

Reputation: 113

React: Invalid hook call error and Framer Motion issue

I am having a "Error: Invalid hook call. " issue after installing and using Framer-Motion. So I followed the debugging strategy from the React.js(https://reactjs.org/warnings/invalid-hook-call-warning.html) docs and the only thing that I see that might be causing this issue is last part before "Other Causes" where it talks about React Router Link.

here is the code to two files that caused this issue. Package.json file from outside the "client" directory (for the server):

"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"
  }

And here is the code from the Package.json file inside the "client" directory for React:

  "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"
    ]
  }

Upvotes: 1

Views: 1052

Answers (1)

Mr. Dawit
Mr. Dawit

Reputation: 113

The issue ended up being that Framer Motion was supposed to be in the package.json file that is inside the "client" directory. Since Bootstrap and other similar modules were included in the outer package.json file and they installed correctly, it mislead me thinking that Framer Motion could do the same. Steps for fixing my issue:

  1. npm uninstall framer-motion
  2. deleting both node_modules(inside and outside the "client" directory) directories
  3. deleting both package-lock.json files
  4. npm install
  5. cd client
  6. npm install framer-motion

Not doing step 5 in the first place was the cause of my error.

Upvotes: 3

Related Questions