React app not working in Internet Explorer 11 - node.js

My react app is not working on Internet explorer 11. It is working fine on edge and chrome.
I have already created a lot of files and i do not think I can try npx create-react-app.( As pointed out in the other answers for similar questions)
I have included this in both my index.js file but it does not work.
import 'react-app-polyfill/ie11';
This is the error I am getting:
I have looked at the links and they ask to resolve a bracket error but there is no issue when I see the code.
This is my package.json file:
{
"name": "insurance_automation",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"config": "^3.1.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.1",
"mysql2": "^1.6.5",
"node": "^11.15.0",
"nodemailer": "^6.2.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1",
"sequelize": "^5.8.6",
"universal-cookie": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "nodemon server",
"dev": "concurrently \"npm run server\" \"npm start\" "
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^4.1.0",
"nodemon": "^1.19.1"
}
}

This worked for me.
Update the development array in package.json
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Add the below code in index.js in the src folder
// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
Then delete the node_modules folder and run
npm install
IE does not support a lot of ES6+ features by default. For more info, refer the create-react-app polyfill docs.

Related

Running npm run build produces same output

When running npm run build on a project where I've changed something on its package.json, produces the exact same output as if I hadn't done any changes after running npm run build again.
I'm trying to upload the build folder to Pinata and it's producing the same hash (CID), so both folders (pre and post modification) are exactly the same.
What could be happening here?
This is my package.json file:
{
"name": "react-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.8",
"sass": "^1.51.0",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4",
"web3": "^1.8.1",
"tailwindcss": "^3.1.8"
},
"scripts": {
"start": "PORT=3001 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"
]
},
"homepage":"./"
}
Thanks!
npm run build just runs react-scripts build.
If you updated your dependencies, you need to npm install or npm update them first.

"ReferenceError: primordials is not defined" when run "npm run server"

I am starting the json-server from the project with command "npm run server" and saw this problem. Currentlt, it is a React project.
Terminal error picture
I have done some research, some suggest to downgrade node.js version and other to create "npm-shrinkwrap.json" in the project. So, what is the main problem of this and how to fix it permanently?
Package.json file:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^2.1.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server -p3001 --watch db.json"
},
"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"
]
},
"devDependencies": {
"json-server": "^0.4.2"
}
}
npm and node.js version:
Version
You can try to re-install node.js. The verisions cause of the this error.

proxy in package.json not working in frontend folder while its working in admin folder

this is my package.json with the proxy that i'm using,
I've tried to use cors inside index.js in backend but it didn't work, I've also tried to to make .env file and write my proxy inside it, but it didn't work.
this process it working on my admin folder
"name": "frontend",
"version": "0.1.0",
"proxy": "http://localhost:8800/api",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "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"
]
},
"devDependencies": {
"sass": "^1.49.8"
}
}

Heroku deployment: Cannot find module: 'react-bootstrap'. Make sure this package is installed

Build failure
First MERN app. Having trouble deploying to Heroku. Everything worked when running locally. I've tried uninstalling/reinstalling react-bootstrap. What could be the problem?
Here's my package.json:
{
"name": "mern-workout-app",
"version": "0.1.0",
"engines": {
"node": "13.8.0"
},
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"styled-components": "^5.1.0"
},
"scripts": {
"start": "cd backend && npm install && node index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbild": "cd client && npm install && npm run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Moderate severity vulnerabilities due to minimist

I'm running into a huge number of vulnerabilities. There are 583 vulnerabilities all associated with the package minimist
My package.json is as such:
{
"name": "weather-wizard",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"eslint-plugin-flowtype": "^3.13.0",
"minimist": "^1.2.5",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"react": "^16.13.0",
"react-animated-weather": "^4.0.0",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.0",
"react-places-autocomplete": "^7.2.1",
"react-scripts": "3.4.0",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
What is the best way to manage these vulnerabilities?
When you see some issue like this, you need to first check on the github repository if they are already notified and create an issue so they can fix it soon.
They are taking care of this in the following issue: https://github.com/facebook/create-react-app/issues/8672
Solution:
For npm users:
npm install minimist --save-dev
eg: (minimist version: 1.2.5)
Add Resolution key adjacent to dependency key into package.json file
{
"resolutions": {
"minimist": "^1.2.5"
}
}
Add below line inside script key into package.json
example:
"scripts": {
"preinstall": "npx npm-force-resolutions"
}
Remove node_modules, and then run command: npm install.
While npm audit fix fixes dependency

Resources