Getting this error while running nextjs app on my local machine
package.json
{
"dependencies": {
"#chakra-ui/react": "^2.4.3",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#pinata/sdk": "^2.1.0",
"#rainbow-me/rainbowkit": "^0.6.1",
"antd": "^5.0.4",
"axios": "^1.0.0",
"draft-js": "^0.11.7",
"ethers": "^5.7.1",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"framer-motion": "^6.5.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"next": "13.1.1",
"react": "18.2.0",
"react-datepicker": "^4.8.0",
"react-dom": "18.2.0",
"react-icon": "^1.0.0",
"react-icons": "^4.4.0",
"react-lottie-player": "^1.5.0",
"react-select": "^5.7.0",
"react-toastify": "^9.0.8",
"styled-components": "^5.3.5",
"use-file-picker": "^1.5.1",
"uuid": "^9.0.0",
"uuidv4": "^6.2.13",
"wagmi": "^0.6.7",
"yup": "^0.32.11"
}
}
I deleted node_modules and lock file then tried again but still getting same error. I also tried uisng npm but got same error
Related
There are two applications, a cra(create-react-app) and Gatsby application, and they are inside the root folder. I did install framer motion in the root folder. Now trying to use the motion component inside cra application giving the error:
"Invalid hook call. Hooks can only be called inside of the body of a function component."
This comes irrespective of a class based or functional component. Even for a simple peice of code:
import React, { Component } from 'react';
import { motion } from 'framer-motion';
class Header extends Component {
render(){
return(
<motion.div>This is Nav</motion.div>
)
}
}
export default Header;
Earlier similar error was coming in the Gatsby application as well.
Also I am using older version of framer motion (4.1.17)
Here is the package.json dependencies of cra application
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#sentry/browser": "^5.30.0",
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.9.0",
"#testing-library/jest-dom": "5.10.1",
"#testing-library/react": "10.3.0",
"#wiris/mathtype-generic": "^7.24.4",
"#wisedocnpm/wise-image-crop": "^1.0.10",
"ajv": "^6.12.6",
"aws-amplify": "^1.0.4",
"aws-amplify-react": "^1.0.4",
"axios": "^0.18.0",
"blob-stream": "^0.1.3",
"bootstrap": "^4.6.0",
"browser-detect": "^0.2.28",
"clsx": "^1.1.1",
"copy-to-clipboard": "^3.2.0",
"crypto-js": "^3.1.9-1",
"dotenv": "^6.1.0",
"email-validator": "^2.0.4",
"file-saver": "^2.0.5",
"flow-bin": "^0.77.0",
"framer-motion": "^3.2.1",
"fuzzysort": "^1.1.4",
"history": "^5.0.0",
"html-parser": "^0.11.0",
"i": "^0.3.6",
"immutable": "^4.0.0-rc.12",
"interactjs": "^1.10.5",
"intro.js": "^3.2.1",
"jest-environment-jsdom-sixteen": "1.0.3",
"jquery": "^3.6.0",
"material-ui-image": "^3.3.1",
"moment": "^2.29.1",
"msw": "^0.19.5",
"mui-datatables": "^3.4.1",
"node-jose": "^1.1.4",
"npm": "^6.14.11",
"ordinal": "^1.0.2",
"phone": "^2.4.21",
"popper.js": "^1.14.3",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-contenteditable": "^3.3.5",
"react-contexify": "^4.1.1",
"react-credit-cards": "^0.8.3",
"react-datepicker": "^2.16.0",
"react-dom": "^17.0.2",
"react-fontawesome": "^1.6.1",
"react-ga": "^2.7.0",
"react-gtm-module": "^2.0.11",
"react-idle-timer": "^4.5.5",
"react-image-crop": "^6.0.11",
"react-infinite-scroll-component": "^5.0.5",
"react-input-autosize": "^2.2.2",
"react-input-range": "^1.3.0",
"react-phone-input-2": "^2.13.9",
"react-query": "^2.4.13",
"react-recaptcha": "^2.3.10",
"react-redux": "^5.1.1",
"react-responsive-carousel": "^3.2.18",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-router-ga": "^1.2.0",
"react-router-hash-link": "^1.2.1",
"react-router-redux": "^4.0.8",
"react-scripts": "^3.4.4",
"react-select": "^3.2.0",
"react-sticky": "^6.0.3",
"react-stripe-checkout": "^2.6.3",
"react-stripe-elements": "^3.0.0",
"react-switch": "^5.0.1",
"react-tooltip": "^3.9.2",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"slate": "^0.44.10",
"slate-deep-table": "^0.8.0",
"slate-react": "^0.21.16",
"sweetalert2": "^7.28.1",
"sweetalert2-react-content": "^1.0.1",
"url": "^0.11.0",
"uuid": "^3.3.2",
"video.js": "^7.11.4"
},
and here are the dependencies of root folder:
"dependencies": {
"#loadable/component": "^5.15.0",
"#testing-library/react": "^12.0.0",
"framer-motion": "^3.2.1",
"history": "^5.0.0",
"jest-environment-jsdom-sixteen": "^2.0.0",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^5.1.1",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.4.3",
"react-scripts": "^3.4.4",
"styled-components": "^4.4.1"
}
I am trying to run an existing React app but I'm getting the following error every time I perform npm install:
"dependencies": {
"#craco/craco": "^6.4.0",
"#headlessui/react": "^1.4.2",
"#heroicons/react": "^1.0.5",
"#hookform/resolvers": "^2.8.8",
"#tailwindcss/postcss7-compat": "^2.2.17",
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/jest": "^26.0.24",
"#types/node": "^12.20.36",
"#types/react": "^17.0.34",
"#types/react-dom": "^17.0.11",
"apexcharts": "^3.34.0",
"autoprefixer": "^9.8.8",
"axios": "^0.24.0",
"chart.js": "^3.7.1",
"chartjs-react": "^3.4.0",
"country-state-city": "^3.0.1",
"dayjs": "^1.10.7",
"detect-browser": "^5.3.0",
"env-cmd": "^10.1.0",
"file-saver": "^2.0.5",
"history": "^5.1.0",
"js-file-download": "^0.4.12",
"libphonenumber-js": "^1.9.48",
"multiselect-react-dropdown": "^2.0.21",
"postcss": "^7.0.39",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.23.0",
"react-hot-toast": "^2.2.0",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.0",
"react-scripts": "4.0.3",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"redux-saga-retry": "^0.1.0",
"reselect": "^4.1.5",
"slick-carousel": "^1.8.1",
"tailwind-scrollbar": "^1.3.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17",
"typescript": "^4.4.4",
"web-vitals": "^1.1.2",
"yup": "^0.32.11",
"zipcodes": "^8.0.0"
},
I'm using Node.js version 16.15.0, NPM version 8.8.0 and Tailwind version 2.
You can force the installation of npm module, so it will install them, even if they don't respect some constraints:
npm install --force
Node version : 8.10.0
Since I have updated my code on my WebApp, there is an error with notistack. I found then it could be helpful to upgrade material-ui version, but I cannot actualy. Until I re-build my app, it was working well.
Package.json :
{
"name": "fuse-react-app",
"version": "2.2.4",
"private": true,
"dependencies": {
"#antv/data-set": "^0.10.2",
"#antv/g2": "3.2.2",
"#ckeditor/ckeditor5-build-classic": "^12.2.0",
"#ckeditor/ckeditor5-react": "^1.1.3",
"#date-io/date-fns": "1.1.0",
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "3.0.2",
"#material-ui/pickers": "^3.2.2",
"#material-ui/styles": "^4.3.0",
"#react-pdf/renderer": "^1.6.10",
"#stripe/stripe-js": "^1.9.0",
"#tinymce/tinymce-react": "^3.2.0",
"auth0-lock": "^11.27.0",
"autosuggest-highlight": "3.1.1",
"axios": "^0.19.0",
"axios-mock-adapter": "1.16.0",
"babel-polyfill": "7.0.0-beta.3",
"base64-img": "^1.0.4",
"bizcharts": "^3.5.5",
"bootstrap": "^4.3.1",
"chart.js": "2.7.3",
"ckeditor5": "^12.2.0",
"classnames": "latest",
"date-fns": "2.0.0-alpha.27",
"downshift": "3.2.6",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"firebase": "5.8.5",
"formsy-react": "1.1.5",
"google-map-react": "1.1.2",""
"install": "^0.13.0",
"invariant": "^2.2.2",
"js-file-download": "^0.4.8",
"js-yaml": "^3.13.1",
"jsonwebtoken": "8.5.0",
"jss-extend": "6.2.0",
"jwt-decode": "2.2.0",
"keycode": "2.2.0",
"lodash": "^4.17.20",
"logrocket": "^1.0.3",
"material-ui-pickers": "2.2.4",
"material-ui-popup-state": "1.2.0",
"mobile-detect": "1.4.3",
"moment": "^2.24.0",
"mui-datatables": "^2.14.0",
"notistack": "^0.9.5",
"path-to-regexp": "3.0.0",
"perfect-scrollbar": "1.4.0",
"prettier": "^1.18.2",
"prismjs": "1.15.0",
"prop-types": "^15.7.2",
"qs": "6.6.0",
"query-string": "^6.11.1",
"raw-loader": "1.0.0",
"react": "16.8.4",
"react-autosuggest": "9.4.3",
"react-beautiful-dnd": "10.0.4",
"react-big-calendar": "0.20.3",
"react-bootstrap": "^1.0.0-beta.12",
"react-chartjs-2": "2.7.4",
"react-color": "^2.17.3",
"react-dom": "16.8.4",
"react-draggable": "3.2.1",
"react-frame-component": "4.1.0",
"react-jss": "8.6.1",
"react-loadable": "5.5.0",
"react-masonry-css": "1.0.12",
"react-number-format": "4.0.6",
"react-popper": "1.0.2",
"react-redux": "6.0.1",
"react-router-config": "4.4.0-beta.6",
"react-router-dom": "4.4.0-beta.6",
"react-scripts": "2.1.5",
"react-select": "^2.4.3",
"react-stripe-elements": "^3.0.0",
"react-swipeable-views": "0.13.1",
"react-table": "6.9.2",
"react-text-mask": "5.4.3",
"react-virtualized": "9.21.0",
"redux": "4.0.1",
"redux-thunk": "2.3.0",
"sweetalert": "^2.1.2",
"tailwindcss": "0.7.4",
"typeface-muli": "0.0.71",
"uuid": "^3.3.3",
"velocity-animate": "^1.5.2",
"velocity-react": "^1.4.1",
"warning": "^3.0.0",
"yarn": "^1.19.1"
},
"resolutions": {
"react": "16.8.4",
"react-dom": "16.8.4"
},
"devDependencies": {
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"#babel/preset-env": "7.3.1",
"cross-env": "5.2.0",
"globby": "8.0.2",
"js-beautify": "1.9.0",
"marked": "^0.7.0",
"purgecss": "1.1.0",
"webpack-bundle-analyzer": "^3.3.2"
}, ... }
I build my app, I execute npm start and then have the next error on my webapp :
Uncaught TypeError: Object(...) is not a function
at Object.<anonymous> (notistack.esm.js:414)
Does anyone have an idea of what could cause this error or how could I resolve it ?
Regards,
We have a Node back-end en react front-end application hosted on Heroku.
On the Heroku Server we get some pages with the error message. React works fine on the localhost.
We tried a different "react scripts": "3.1.2" and "react scripts": "3.2.0." we were on version 3.0.1.
The error=
Error message
Our react package.json file.
"dependencies": {
"#material-ui/core": "^3.9.2",
"#material-ui/icons": "^3.0.2",
"#material-ui/styles": "^4.4.1",
"#types/googlemaps": "3.30.16",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.9.1",
"animate.css": "3.7.0",
"axios": "^0.18.1",
"classnames": "2.2.6",
"history": "4.7.2",
"http-proxy-middleware": "^0.19.0",
"moment": "2.24.0",
"node-sass": "^4.11.0",
"nouislider": "13.1.0",
"prop-types": "15.7.1",
"react": "16.8.1",
"react-animate-on-scroll": "2.1.5",
"react-datetime": "2.16.3",
"react-dom": "16.8.1",
"react-ga": "^2.5.7",
"react-google-maps": "9.4.5",
"react-helmet": "^5.2.1",
"react-image-gallery": "0.8.12",
"react-redux": "^6.0.0",
"react-router-dom": "4.3.1",
"react-scripts": "3.1.2",
"react-slick": "0.23.2",
"react-swipeable-views": "0.13.1",
"react-table": "^6.9.2",
"react-tagsinput": "3.19.0",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-thunk": "^2.3.0",
"typescript": "^3.5.3"
Error solved. The problem was with the "react-table": "^6.9.2", see:
https://github.com/tannerlinsley/react-table/issues/1686
I am getting the following error when I am building my Reacttsx project.
Error:
node_modules/#types/react-router/node_modules/#types/react/index.d.ts
(2746,14): Duplicate identifier 'LibraryManagedAttributes'
Following is my package.json file
"devDependencies": {
"enzyme-adapter-react-16": "1.1.1",
"react-scripts-ts": "2.14.0",
"rimraf": "2.6.2",
"#types/jest": "^23.3.10",
"#types/node": "^10.12.11",
"#types/react": "16.7.18",
"#types/react-dom": "^16.0.11",
"typescript": "^3.2.1"
},
"dependencies": {
"#progress/kendo-drawing": "^1.5.7",
"#progress/kendo-react-pdf": "^2.5.0",
"#types/d3": "5.0.0",
"#types/enzyme": "3.1.9",
"#types/react-loadable": "5.3.3",
"#types/react-redux": "5.0.15",
"#types/react-router-dom": "^4.3.1",
"antd": "3.12.1",
"axios": "^0.18.0",
"elasticsearch": "^15.2.0",
"google-maps-react": "^2.0.2",
"moment": "^2.24.0",
"react": "^16.7.0",
"react-csv": "^1.0.19",
"react-dom": "^16.6.3",
"react-drawer": "1.3.4",
"react-file-reader": "1.1.4",
"react-google-autocomplete": "^1.0.18",
"react-google-maps": "^9.4.5",
"react-loadable": "5.3.1",
"react-loader-spinner": "^2.2.0",
"react-moment": "^0.8.4",
"react-onclickoutside": "^6.7.1",
"react-redux": "5.0.7",
"react-router": "4.2.0",
"react-router-dom": "^4.3.1",
"react-router-redux": "4.0.8",
"react-scripts-ts": "3.1.0",
"react-toastify": "4.0.0-rc.5",
"react-transition-group": "2.3.1",
"redux": "3.7.2",
"socket.io-client": "^2.2.0"
}
I am using npm install for installing packages. Please suggest