Develop Reference

ReactJS Application is not working in old chrome 27 version

I have created fresh ReactJS project using create-react-app,
used node Version : 12.22.12,
To make compactable for older version browser I have used polyfill core-js,
after using polyfill now it working in chrome 31 version onwards. It is not working in chrome 27 to 30. Getting error:- Uncaught SyntaxError: Unexpected token )
package.json file
{
"name": "xyz",
"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",
"core-js": "^3.25.0",
"grommet": "^2.25.0",
"grommet-controls": "^3.0.2",
"grommet-icons": "^4.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"regenerator-runtime": "^0.13.9",
"styled-components": "^5.3.5",
"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": {
"compression-webpack-plugin": "^10.0.0",
"mini-css-extract-plugin": "^2.6.1",
"webpack-bundle-analyzer": "^4.5.0"
}
}
Another method which I have tried
I have created ReactJS project using Webpack,
used node Version : 12.22.12,
This is not working in older version of chrome,
Getting Error:- Uncaught SyntaxError: Unexpected token )
package.json file
{
"name": "xyz",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"core-js": "^3.25.1",
"grommet": "^2.25.1",
"grommet-controls": "^3.0.2",
"grommet-icons": "^4.7.0",
"node-polyfill-webpack-plugin": "^2.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"regenerator-runtime": "^0.13.9",
"styled-components": "^5.3.5"
}
}

It's rather related to create-react-app
Please follow this guide
The first thing you can do is change browserlist, because now you only support the newest browsers with your configuration
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
But I doubt you can run React on a browser from 2013.

error after installing npm package ,You may need an additional loader to handle the result of these loaders

I've installed the npm package #yaireo/tagify v4.16.4 however when I try to start my react app I get the following error:
./node_modules/#yaireo/tagify/dist/tagify.js 594:33
Module parse failed: Unexpected token (594:33)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| headerRef = this.dropdown.getHeaderRef(),
| footerRef = this.dropdown.getFooterRef();
> newHeaderElem && headerRef?.parentNode.replaceChild(newHeaderElem, headerRef);
| newFooterElem && footerRef?.parentNode.replaceChild(newFooterElem, footerRef);
| },
My package.json looks like this:
{
"name": "portal_service",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"#ant-design/compatible": "1.1.0",
"#ant-design/icons": "4.7.0",
"#babel/plugin-proposal-decorators": "7.16.5",
"#casl/ability": "3.4.0",
"#casl/react": "1.0.4",
"#craco/craco": "6.4.3",
"#fortawesome/fontawesome-svg-core": "1.2.29",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/pro-duotone-svg-icons": "5.13",
"#fortawesome/pro-light-svg-icons": "5.13",
"#fortawesome/pro-regular-svg-icons": "5.13",
"#fortawesome/pro-solid-svg-icons": "5.13",
"#fortawesome/react-fontawesome": "0.1.11",
"#okta/okta-react": "3.0.1",
"#react-hook/resize-observer": "1.2.5",
"#tisoap/react-flow-smart-edge": "1.0.1",
"#yaireo/tagify": "4.13.1",
"ant-design-pro": "2.3.2",
"antd": "4.16.13",
"antd-img-crop": "3.16.0",
"bootstrap": "4.6.1",
"chart.js": "2.8.0",
"chartjs-plugin-zoom": "0.7.0",
"firebase": "9.6.1",
"google-map-react": "1.1.7",
"jsoneditor": "9.7.4",
"jsoneditor-react": "3.1.2",
"jsonwebtoken": "8.5.1",
"lodash": "4.17.21",
"mobx": "5.15.7",
"mobx-react": "5.4.4",
"mobx-react-lite": "1.5.2",
"moment": "2.24.0",
"moment-timezone": "0.5.34",
"papaparse": "5.3.1",
"prop-types": "15.7.2",
"rc-progress": "2.3.0",
"react": "16.14.0",
"react-beautiful-dnd": "13.0.0",
"react-chartjs-2": "2.7.4",
"react-circle-flags": "^0.0.17",
"react-click-outside": "3.0.1",
"react-cropper": "2.1.8",
"react-dom": "16.14.0",
"react-flow-renderer": "10.0.4",
"react-google-login": "5.1.20",
"react-intl": "2.8.0",
"react-onclickoutside": "6.12.1",
"react-phone-number-input": "3.1.44",
"react-quill": "1.3.3",
"react-router-dom": "5.3.0",
"react-scripts": "4.0.3",
"react-select": "5.2.2",
"react-top-loading-bar": "1.2.0",
"reactstrap": "7.1.0",
"slugify": "1.4.0",
"styled-components": "5.3.3",
"superagent": "7.0.1",
"superagent-promise": "1.1.0",
"uuid": "8.3.2"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "craco start",
"start:withMockServer": "npx concurrently --kill-others 'yarn run mock-server' 'yarn start'",
"build": "craco build",
"test": "craco test --env=jsdom",
"test:withLiveCoverage": "npx concurrently --kill-others 'yarn test --coverage --watchAll' 'npx live-server coverage/lcov-report'",
"eject": "react-scripts eject",
"mock-server": "npx json-server src/utils/mockData.js --port 4000 --watch --delay 1500",
"lint": "eslint ./src",
"lint-fix": "eslint ./src --fix"
},
"devDependencies": {
"babel-plugin-styled-components": "2.0.2",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"enzyme-to-json": "3.6.2",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.3.0",
"faker": "4.1.0",
"husky": "1.3.1",
"jest-styled-components": "6.3.4",
"json-server": "0.14.2",
"lint-staged": "8.2.1",
"mobx-react-devtools": "6.1.1",
"react-error-overlay": "6.0.9",
"source-map-explorer": "1.8.0"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,json,css}": [
"git add"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"cracoConfig": "config/craco.config.js",
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
We are using craco to run our react app. The craco config looks like this:
module.exports = {
babel: {
plugins: [
['#babel/plugin-proposal-decorators', { legacy: true }],
['babel-plugin-styled-components'],
],
},
// Disables react-scripts's own ESLint from running on every compilation. This prevents a very long compilation time.
// We don't need react-scripts to run its own ESLint every time, because we have our own ESLint configuration to use with "npm run lint"
eslint: {
enable: false,
},
};
Does anyone know what I can do to fix the error? We've tried different versions of the npm package but all of them throw a similar error. We really need this package for a feature I am working on so there is no option for an alternative.

Error: Conversion from 'BigInt' to 'number' is not allowed on react build script

I've developed UI using create-react-app. UI is working fine with the normal npm start command, but when I build the UI with npm run build it's throwing the error `Conversion from 'BigInt' to 'number' is not allowed
I didn't get many related solutions to my problem on google. Can someone help please ?
My Package.json
{
"name": "erp-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.15",
"#popperjs/core": "^2.10.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"bootstrap": "^5.0.1",
"font-awesome": "^4.7.0",
"jsontokens": "^3.1.1",
"react": "^17.0.2",
"react-datepicker": "^4.8.0",
"react-dom": "^17.0.2",
"react-hook-form": "^7.17.0",
"react-paginate": "^7.1.3",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"react-toastify": "^8.0.3",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
Error screenshot which is point in browser

How to add prettier command before code commit or on save file through devdependencies

I am working with react project.
I want my vscode to autoformat when I save the code but want to do by adding some package inside package.json(I am not sure whether it is possible or not) & not with vscode because people have their own configuration in vscode so to be identical with those config i want to do it with some prettier. Here is my prettier config file
.prettierrc.json
{
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 120
}
package.json
{
"name": "XXXXXXXXXXXX",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^4.20.0",
"browser-image-compression": "^2.0.0",
"dotenv": "^16.0.0",
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.5.0",
"formik": "^2.2.9",
"isomorphic-fetch": "^3.0.0",
"material-ui-icons": "^1.0.0-beta.36",
"moment": "^2.29.3",
"prettier-eslint": "^13.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-dropzone": "^12.0.5",
"react-js-pagination": "^3.0.3",
"react-modal": "^3.14.4",
"react-moment": "^1.1.2",
"react-multiselect-checkboxes": "^0.1.1",
"react-number-format": "^4.9.3",
"redux": "^4.2.0",
"redux-form": "^8.3.8",
"redux-observable": "^2.0.0",
"redux-promise-middleware": "^6.1.2",
"redux-thunk": "^2.4.1",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "npx prettier --write .",
"prepare": "husky install"
},
"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": {
"husky": "^8.0.0",
"prettier": "2.6.2",
"pretty-quick": "^3.1.3"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
}

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via git add before you commit.
Make sure Prettier is installed and is in your devDependencies before you proceed.
npx mrm#2 lint-staged
use this link for further info
Pre-commit Hook

Electron building issue for server along with the front end

I have an electron app that has the folder structure -
Public -> index.html, main.js
Server -> server.js
src -> (all the front end app styling and components)
The server runs on localhost:3001 and listens to Post and Get commands from the front end that submits requests to the localhost:3001/exampleReq
This is my package.json for the root
{
"name": "test",
"version": "1.0.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"#electron/remote": "^1.0.2",
"#reduxjs/toolkit": "^1.6.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.37",
"#types/react": "^16.9.34",
"#types/react-dom": "^16.9.7",
"#types/react-table": "^7.0.16",
"#types/styled-components": "^5.1.0",
"#types/yup": "^0.28.0",
"antd": "4.17.0-alpha.0",
"body-parser": "^1.19.0",
"bootstrap": "^5.0.0-beta1",
"electron-is-dev": "^1.2.0",
"immutability-helper": "^3.1.1",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-dnd": "latest",
"react-dnd-html5-backend": "latest",
"react-dom": "^17.0.1",
"react-filetree-electron": "^1.2.2",
"react-highlight-words": "^0.17.0",
"react-redux": "^7.2.5",
"react-scripts": "4.0.1",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"styled-components": "^5.1.0",
"typescript": "^4.4.3",
"web-vitals": "^0.2.4"
},
"main": "public/main.js",
"homepage": "./",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron:serve": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn electron:start\" \"cd server && yarn start server\"",
"electron:build": "yarn build && electron-builder -c.extraMetadata.main=build/main.js",
"electron:start": "wait-on tcp:3000 && electron ."
},
"build": {
"extends": null,
"appId": "com.example.electron-cra",
"files": [
"dist/**/*",
"build/**/*",
"node_modules/**/*",
"package.json"
],
"directories": {
"buildResources": "assets"
}
},
"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": {
"concurrently": "^5.3.0",
"cross-env": "^7.0.3",
"electron": "^11.2.1",
"electron-builder": "^22.9.1",
"prettier": "^2.2.1",
"wait-on": "^5.2.1"
},
"workspaces": [
"src/Auto"
]
}
When I run yarn electron:serve everything works and both the app and server run.
When I do yarn electron:build the front end stuff gets compiled but not the server. I don't believe the server is being linked at all.
This is the package.json for the server folder:
{
"name": "server",
"version": "1.0.0",
"main": "server.js",
"license": "MIT",
"scripts": {
"start": "nodemon server.js"
},
"type": "commonjs",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"mongoose": "^6.0.7",
"nodemon": "^2.0.13"
}
}
Any ideas on how to fix the build part so that I can have an .exe or .dmg where once opened everything works the same as when running electron:serve?
Here's how electron:serve links the server
"electron:serve": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn electron:start\" \"cd server && yarn start server\""

Temporary solution to this would be to bring all the server code inside public. I guess this is an answer but would like to keep the folders separate if possible.