When i do some updates on the code and save them the react app seems not to be functional , it stops and the mouse clicks seems not to be working. I'm obliged to manually refresh the page.
This is my package.json :
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.3",
"#webiny/ui": "^5.22.1",
"axios": "^0.21.1",
"firebase": "^9.6.10",
"material-ui": "^0.20.2",
"moment": "^2.29.3",
"npm": "^7.7.6",
"react": "^16.14.0",
"react-accessible-accordion": "^4.0.0",
"react-bootstrap": "^1.6.4",
"react-chartjs-2": "^4.1.0",
"react-dom": "^17.0.1",
"react-firebaseui": "^4.1.0",
"react-fontawesome": "^1.7.1",
"react-giphy-picker": "^1.1.1",
"react-icons": "^4.3.1",
"react-modal": "^3.14.3",
"react-paginate": "^7.1.3",
"react-redux": "^8.0.0",
"react-router-dom": "^5.3.1",
"redux": "^4.2.0",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "PORT=5000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm using VS code on linux Ubuntu 20
Try doing the the following changes.
If you're using npm
"overrides" : {
"react-error-overlay": "6.0.9"
}
If you are using yarn
"resolutions" : {
"react-error-overlay": "6.0.9"
}
After doing this, do install the packages once again and re-start the app. This should help
Related
Thanks for the help in advance. I am trying to install a react app but it is not installing.I am using yarn for this.
The screenshot of the error I am getting after yarn install is the below one
the error I am getting after yarn run start is 'REACT_APP_SERVER' is not recognized as an internal or external command,operable program or batch file.
package.json
{
"name": "queenofraw",
"version": "0.1.0",
"private": true,
"homepage": "https://ja.materiamx.com",
"main": "",
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-regular-svg-icons": "^5.3.1",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/react-fontawesome": "^0.1.3",
"#material-ui/core": "^3.0.1",
"#material-ui/icons": "^3.0.1",
"#mdi/svg": "^3.0.39",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.3",
"#react-jvectormap/core": "^1.0.3",
"#rematch/core": "^0.6.0",
"#stripe/stripe-js": "^1.8.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"antd": "^3.10.4",
"axios": "^0.18.0",
"chart.js": "^3.9.1",
"classnames": "^2.2.6",
"country-list": "^2.1.0",
"echarts": "^4.2.0-rc.2",
"echarts-for-react": "^2.0.15-beta.0",
"err": "^2.1.12",
"events": "^2.0.0",
"formsy-react": "^1.1.4",
"image-to-base64": "^2.0.1",
"jquery": "^3.6.1",
"js-cookie": "^2.2.0",
"loadash": "^1.0.0",
"material-ui-table-edit": "^3.0.3",
"moment": "^2.22.0",
"namor": "^1.1.1",
"qs": "^6.9.4",
"query-parse": "^2.0.0",
"rc-queue-anim": "^1.6.7",
"react": "^16.4.2",
"react-chartjs-2": "^4.3.1",
"react-confirm": "^0.1.17",
"react-cookie": "^3.0.4",
"react-country-flag": "^1.0.1",
"react-dom": "^16.4.2",
"react-dropzone": "^7.0.1",
"react-fontawesome": "^1.6.1",
"react-google-recaptcha": "^2.1.0",
"react-icons": "^3.2.2",
"react-images-upload": "^1.2.3",
"react-inline-editing": "^1.0.10",
"react-jvectormap": "0.0.4",
"react-moment": "^0.8.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-scripts": "^1.1.5",
"react-scroll": "^1.7.11",
"react-table": "^6.8.6",
"recharts": "^1.2.0",
"slick-carousel": "^1.8.1",
"socket.io-client": "1.7.0",
"superagent": "^4.0.0-beta.5",
"web-vitals": "^3.0.1",
"yarn": "^1.13.0"
},
"scripts": {
"start": "REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts start",
"starts": "PORT=6500 REACT_APP_SERVER=http://localhost:5080 react-scripts start",
"sass:watch": "node-sass -w src/assets/scss/style.scss -o src/assets/css",
"sass:build": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map true",
"dev": "npm-run-all --parallel start sass:watch",
"start:stag": "react-scripts start",
"build": "REACT_APP_SERVER=http://192.168.2.18:5080 react-scripts build",
"deploy": "aws s3 sync build/ s3://qor-mmx-static --acl public-read",
"stag:build": "REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts build",
"prod:build": "REACT_APP_SERVER=https://api-dev.materiamx.com/ react-scripts build",
"stag": "yarn run stag:build && sls client deploy --stage staging --aws-profile qor --region us-east-1",
"prod": "yarn run prod:build && sls client deploy --stage production --aws-profile qor --region us-east-1",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"flow-bin": "^0.68.0",
"node-sass": "^4.9.3",
"npm-run-all": "^4.1.5",
"react-edit-inline": "^1.0.8",
"react-test-renderer": "^16.2.0",
"serverless-finch": "^2.2.0",
"serverless-single-page-app-plugin": "^1.0.2"
},
"jest": {}
}
Windows doesn't support setting env variables like that
I would recommend using cross-env
Install npm install -D cross-env
Change your commands to cross-env REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts start"
You can also try using git bash instead, but I doubt it will work
You should install python2.7 and Visual studio 2019 Environment.
Python 2.7 download link
I wish your success.
I am using Nextjs and Vercel to deploy my website. Cypress was working fine yesterday. But today when Vercel runs the build I get the following error:
I noticed that vercel was installing Cypress version 6.9.0 whereas I had 6.8.0 in my package.json file.
So I updated to version to 6.9.0 but I still get the same error. Why is this suddenly happening?
My package.json file
{
"name": "website",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env API_URL=http://localhost:1337 next dev",
"public-dev": "next dev",
"build": "next build",
"start": "next start",
"cypress:open": "cypress open"
},
"dependencies": {
"#apollo/client": "^3.1.3",
"#blueprintjs/core": "^3.35.0",
"#blueprintjs/datetime": "^3.19.3",
"#popperjs/core": "^2.5.4",
"axios": "^0.21.1",
"graphql": "^15.3.0",
"graphql-tag": "^2.10.4",
"isomorphic-unfetch": "^3.1.0",
"moment": "^2.29.1",
"next": "10.0.2",
"next-with-apollo": "^5.1.0",
"nouislider-react": "^3.3.8",
"react": "^17.0.1",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^17.0.1",
"react-flatpickr": "^3.10.6",
"react-froala-wysiwyg": "^3.2.1",
"react-ga": "^3.2.1",
"react-gtm-module": "^2.0.11",
"react-localization": "^1.0.15",
"react-lottie": "^1.2.3",
"react-popper": "^2.2.3",
"react-scroll": "^1.8.1",
"react-slick": "^0.27.13",
"sass": "^1.30.0",
"swiper": "^6.3.5",
"swr": "^0.4.2"
},
"devDependencies": {
"#types/node": "^14.0.27",
"#types/react": "^16.9.46",
"cross-env": "^7.0.2",
"cypress": "^6.9.0",
"cypress-localstorage-commands": "^1.4.2",
"eslint": "^7.4.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-standard": "^4.0.1",
"typescript": "^3.9.7"
}
}
Cypress team published 6.9.0 by mistake, really the version is 7.0.0 and they will remove 6.9.0:
https://github.com/cypress-io/cypress/issues/15797
I just upgraded my react app to include the newest react router v5.2 in order to get the useHistory hook. Things worked fine until I restarted for the first time next morning. Now when I use f5 to start a debugging session I get an exception in a node-modules file named json3. (BTW, the app runs okay in the browser after yarn start.) The exception is "SyntaxError: Unexpected token in JSON at position 1". The code is line 186 in json3.js:
186 parseSupported = !parse('"\t"');
I read the json3 README.md and it says: "JSON 3 is deprecated and no longer maintained. Please don't use it in new projects, and migrate existing projects to use the native JSON.parse and JSON.stringify instead. JSON 3 was a JSON polyfill for older JavaScript platforms." I don't know how this was installed and I don't think I need it. It's not listed in my package.json. It's at the top level in node_modules. How do I remove this?
Just in case it's needed, my package.json is this:
{
"name": "blue-duck-pwa",
"version": "0.1.0",
"private": true,
"devDependencies": {
"enzyme": "3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-react": "^7.18.3",
"faker": "^4.1.0",
"prettier": "2.0.1",
"react-scripts": "1.1.0",
"react-test-renderer": "16.0.0",
"redux-devtools": "^3.4.1",
"redux-devtools-dock-monitor": "1.1.4",
"redux-devtools-log-monitor": "2.0.1",
"redux-logger": "^3.0.6"
},
"dependencies": {
"add": "^2.0.6",
"base-64": "^0.1.0",
"bootstrap": "^3.3.7",
"chart.js": "2.9.3",
"cheerio": "0.19.x",
"file-saver": "^1.3.8",
"history": "^4.6.3",
"lodash": "^4.17.4",
"lodash.clonedeep": "^4.5.0",
"prop-types": "15.6.0",
"rc-dropdown": "^2.1.0",
"rc-menu": "^6.2.5",
"react": "16.13.0",
"react-auto-suggest": "^0.0.12",
"react-bootstrap": "0.32.0",
"react-chartjs-2": "2.6.4",
"react-dom": "16.13.0",
"react-notification-system": "0.2.16",
"react-portal": "^4.0.0",
"react-redux": "^5.0.6",
"react-router": "5.2.0",
"react-router-bootstrap": "0.25.0",
"react-router-dom": "5.2.0",
"react-scrollchor": "^4.2.1",
"react-sizes": "1.0.0",
"redux": "^3.7.2",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"uuid": "^3.1.0",
"xml2js": "0.4.19"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Because of the conflicts I caused by upgrading my node_modules without regard to breaking changes (dumb I know), I was only able to fix this problem by starting over. I made another create-react-app, copied my package.json (with the corrected version numbers), ran yarn install, then copied over all my program data: src, .vscode, .eslintrc, etc, etc. With a few easy fixes, this worked. No exceptions deep in the node_modules.
I have one small react app which is based on https://redq.gitbooks.io/isomorphic/content/ theme. The issue is when i built the package it generates main.js with 3MB of size with other smaller chunks.
Below is package.json. Please help me in this regard. Thanks in advance. Let me know if anyone needs any other thing.
{
"name": "isomorphic",
"version": "2.9.0",
"private": true,
"dependencies": {
"antd": "^3.10.1",
"axios": "^0.18.0",
"clone": "^2.1.1",
"fingerprintjs": "^0.5.3",
"history": "^4.6.3",
"jsonwebtoken": "^8.3.0",
"nprogress": "^0.2.0",
"qs": "^6.5.2",
"react": "^16.2.0",
"react-async-script-loader": "^0.3.0",
"react-confirm-alert": "^2.0.6",
"react-datepicker": "^1.7.0",
"react-dom": "^16.2.0",
"react-grid-system": "^4.3.1",
"react-intl": "^2.7.1",
"react-placeholder": "^2.0.0",
"react-recaptcha": "^2.3.10",
"react-redux": "^5.0.7",
"react-responsive": "^5.0.0",
"react-router-dom": "^4.1.0",
"react-router-redux": "^5.0.0-alpha.8",
"react-scripts": "1.0.17",
"react-select": "^2.1.0",
"react-smooth-scrollbar": "^8.0.6",
"react-throttle": "^0.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.7.2",
"redux-saga": "^0.16.2",
"redux-thunk": "^2.2.0",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3"
},
"devDependencies": {
"react-app-rewired": "^1.4.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
}
Spread operator is not working
<button {...this.state.attributes}></button>
Getting error "unexpected token this" Below is package.json we have used
{
"name": "#coreui/coreui-free-react-admin-template",
"version": "2.0.5",
"description": "CoreUI React Open Source Bootstrap 4 Admin Template",
"license": "MIT",
"private": true,
"dependencies": {
"#coreui/coreui": "^2.0.2",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"#coreui/icons": "0.2.0",
"#coreui/react": "^2.0.4",
"#rowno/sparkline": "^3.0.1",
"all": "0.0.0",
"availity-reactstrap-validation": "^2.0.2",
"bootstrap": "^4.1.1",
"chart.js": "^2.7.2",
"classnames": "^2.2.6",
"core-js": "^2.5.7",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"flag-icon-css": "^3.0.0",
"font-awesome": "^4.7.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-avatar": "^3.1.0",
"react-bootstrap": "^0.32.1",
"react-chartjs-2": "^2.7.2",
"react-checkbox-group": "^4.0.1",
"react-confirm-alert": "^2.0.5",
"react-dom": "^16.4.1"
"react-loadable": "^5.4.0",
"react-loading": "^2.0.3",
"react-redux": "^5.0.7"
"react-render-html": "^0.6.0",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.3.1",
"react-sortable-pane": "^1.0.2",
"react-sparklines": "^1.7.0",
"react-spinners": "^0.3.2",
"react-stepzilla": "^4.7.2",
"react-switch": "^3.0.4",
"react-table": "^6.8.6",
"react-tabs": "^2.2.2",
"react-test-renderer": "^16.4.1",
"react-timekeeper": "^1.0.7",
"react-toastify": "^4.1.0",
"reactstrap": "^6.1.0"
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-jest": "^23.0.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"node-sass-chokidar": "^1.3.0",
"npm-run-all": "^4.1.3",
"react-scripts": "^1.1.4"
},
"scripts": {
"build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-0"
]
},
"bugs": {
"url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
}
}
We have tried different plugins but no luck.
transform-object-rest-spread
getting run time error.
We have to update button attributes dynamically and spread operator is only option.
You need to install babel plugin for that. Instead of installing preset-es2015, I reckon to install babel-preset-env which works as (es2015, es2016, es2017) together.
In case, this is the plugin for the spread operator you need.