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
Related
I installed
npm i #react-18-pdf/renderer
because npm install
#react-pdf/renderer
is not working. Added overrides but still I'm getting this error.
{
"name": "newwhatfrontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-18-pdf/renderer": "^2.3.4",
"#sentry/react": "^6.16.0",
"#sentry/tracing": "^6.16.0",
"#stripe/react-stripe-js": "^1.7.0",
"#stripe/stripe-js": "^1.22.0",
"#testing-library/jest-dom": "^5.16.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"antd": "^4.17.3",
"antd-img-crop": "^3.16.0",
"axios": "^0.18.1",
"bootstrap": "^5.1.3",
"dateformat": "^5.0.2",
"joi-browser": "^13.4.0",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"lottie-web": "^5.8.1",
"raven-js": "^3.26.4",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap": "^2.0.3",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "^17.0.2",
"react-gtm-module": "^2.0.11",
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"react-image-crop": "^9.0.5",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-select": "^5.2.1",
"react-toastify": "^4.1.0",
"sass": "^1.44.0",
"web-vitals": "^1.1.2"
},
"overrides": {
"#react-pdf/renderer": {
"react": "^18.0.0"
}
},
I'm trying to preview a PDF on a page.
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
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"
}
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