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
Related
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"
}
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,
I created my app with dotnet new reactredux (2.0) some time ago, it uses webpack 2.5.3, I'm really keeen to update to more up to date version, however there are plenty of dependecies that don't support newer versions. Is there anybody who successfully did that?
dependecies that bother me a most:
aspnet-webpack
aspnet-webpack-react
seems discountinued
there my full project dependencies:
"devDependencies": {
"#types/history": "4.6.0",
"#types/jest": "^22.1.3",
"#types/react": "^16.3.13",
"#types/react-dom": "^16.0.4",
"#types/react-hot-loader": "3.0.3",
"#types/react-redux": "4.4.45",
"#types/react-router": "^4.0.23",
"#types/react-router-dom": "^4.2.5",
"#types/react-router-redux": "5.0.3",
"#types/webpack": "2.2.15",
"#types/webpack-env": "1.13.0",
"#types/fetch-mock": "^6.0.0",
"#types/enzyme": "^3.1.10",
"#types/enzyme-adapter-react-16": "^1.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"css-loader": "0.28.4",
"domain-task": "^3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"foundation-sites": "^6.4.4-rc1",
"history": "4.6.3",
"jest": "22.4.2",
"jest-cli": "22.4.2",
"fetch-mock": "^6.0.1",
"jquery": "3.2.1",
"node-noop": "1.0.0",
"node-sass": "^4.7.2",
"react": "^16.3.2",
"react-dom": "^16.2.0",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"sass-loader": "^6.0.6",
"style-loader": "0.18.2",
"ts-jest": "22.0.4",
"ts-nameof": "^0.10.3",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"circular-dependency-plugin": "^4.4.0"