upgrading from node 14x to 18x on server - node.js

I have a node js project running in node v14.17.2 and it time to upgrade i thought v18.13.0
and im really afraid that something will break on the server once i change the version
to run it localy i needed to change npm istanll to npm install --legacy-peer-deps
and then to do :
npm install node-sass --legacy-peer-deps
npm rebuild node-sass
npm audit fix --legacy-peer-deps
so if ill add these steps my app should be fine? is there any other things i need to do befor upgrading the version?
pre-upgraded pacakge.json:
{
"name": "react-app",
"version": "1.1.8",
"private": true,
"dependencies": {
"#date-io/moment": "1.3.13",
"#material-ui/core": "3.0.2",
"#material-ui/icons": "3.0.1",
"#nivo/core": "^0.73.0",
"#nivo/pie": "^0.73.0",
"auth0-lock": "11.30.2",
"autosuggest-highlight": "3.1.1",
"axios": "0.21.1",
"axios-mock-adapter": "1.19.0",
"chart.js": "^2.7.2",
"classnames": "^2.3.1",
"core-js": "^3.14.0",
"downshift": "6.1.3",
"formsy-react": "2.2.5",
"jodit-react": "^1.1.1",
"jss": "^9.8.7",
"jss-extend": "6.2.0",
"jss-rtl": "^0.3.0",
"jwt-decode": "3.1.2",
"keycode": "2.2.0",
"lodash": "4.17.21",
"material-ui-pickers": "^2.2.4",
"mobile-detect": "1.4.5",
"moment": "^2.29.1",
"node-sass": "^4.14.1",
"path-to-regexp": "6.2.0",
"perfect-scrollbar": "1.4.0",
"postcss": "^8.3.5",
"prismjs": "1.23.0",
"prop-types": "^15.7.2",
"qs": "6.10.1",
"raw-loader": "4.0.2",
"react": "17.0.2",
"react-autosuggest": "10.1.0",
"react-big-calendar": "0.33.5",
"react-chartjs-2": "2.7.4",
"react-cookie": "^4.0.3",
"react-credit-cards": "^0.8.3",
"react-dnd": "14.0.2",
"react-dnd-html5-backend": "14.0.0",
"react-dom": "17.0.2",
"react-facebook-pixel": "^1.0.4",
"react-google-charts": "^3.0.15",
"react-gtm-module": "^2.0.11",
"react-jss": "^8.6.1",
"react-number-format": "4.6.3",
"react-popper": "2.2.5",
"react-redux": "7.2.4",
"react-rnd": "^10.3.7",
"react-router-config": "5.1.1",
"react-router-dom": "4.3.1",
"react-scripts": "^2.1.1",
"react-select": "4.3.1",
"react-signature-canvas": "^1.0.6",
"react-swipeable-views": "0.14.0",
"react-table": "^6.8.6",
"react-text-mask": "5.4.3",
"react-to-print": "^2.14.0",
"redux": "4.1.0",
"redux-thunk": "2.3.0",
"typeface-roboto": "1.1.13",
"velocity-react": "1.4.3",
"yarn": "^1.22.10"
},
"scripts": {
"prebuild": "python ../prebuild.py src/myConstants.js",
"start": "yarn run build-css-helpers && cross-env PORT=3001 react-scripts start",
"build": "yarn run build-css-helpers && cross-env NODE_PATH=src react-scripts --max_old_space_size=4096 build",
"build-css-helpers": "./node_modules/.bin/tailwind build ./src/styles/fuse-helpers.tailwind.css -c ./tailwind.js -o ./src/styles/fuse-helpers.css && postcss --use autoprefixer -o ./src/styles/fuse-helpers.css ./src/styles/fuse-helpers.css",
"test": "cross-env NODE_PATH=src react-scripts test --env=jsdom",
"eject": "cross-env NODE_PATH=src react-scripts eject",
"build-docs": "babel-node src/main/content/components/material-ui/build.js",
"postbuild": "python postbuild.py"
},
"devDependencies": {
"#babel/core": "7.14.6",
"#babel/preset-env": "7.14.5",
"autoprefixer": "9.1.5",
"cross-env": "7.0.3",
"js-beautify": "1.14.0",
"marked": "2.1.1",
"postcss-cli": "8.3.1",
"tailwindcss": "0.6.5"
},
"engines": {
"node": ">=14.17.0",
"npm": ">=6.0.0"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
i know i have pacakges to upgrqade i want to start just with node

Related

React app taking too long to start the development server

I am using a react dashboard template from themeforest. Here is the package.json content:
{
"name": "acorn-react",
"version": "1.0.1",
"private": true,
"proxy": "http://localhost:3000",
"dependencies": {
"#emoji-mart/data": "^1.0.2",
"#fullcalendar/bootstrap": "^5.9.0",
"#fullcalendar/daygrid": "^5.9.0",
"#fullcalendar/interaction": "^5.9.0",
"#fullcalendar/react": "^5.9.0",
"#fullcalendar/timegrid": "^5.9.0",
"#glidejs/glide": "^3.4.1",
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"#yaireo/tagify": "^4.12.0",
"autosuggest-trie": "^2.1.1",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"chart.js": "^3.5.1",
"chartjs-adapter-luxon": "^1.0.0",
"chartjs-plugin-crosshair": "^1.2.0",
"chartjs-plugin-datalabels": "^2.0.0",
"chartjs-plugin-streaming": "^2.0.0",
"clamp-js": "^0.7.0",
"classnames": "^2.3.1",
"date-fns": "^2.22.1",
"emoji-mart": "3.0",
"formik": "^2.2.9",
"fuse.js": "^6.4.6",
"intro.js": "^4.2.2",
"intro.js-react": "^0.5.0",
"luxon": "^2.0.1",
"overlayscrollbars": "^1.13.1",
"overlayscrollbars-react": "^0.2.3",
"pixabay-api": "^1.0.4",
"plyr-react": "^3.0.8",
"quill": "^1.3.7",
"rc-slider": "^9.7.2",
"react": "^16.13.0",
"react-autosuggest": "^10.1.0",
"react-bootstrap": "^2.0.0-rc.0",
"react-circular-progressbar": "^2.0.4",
"react-contexify": "^5.0.0",
"react-countdown": "^2.3.2",
"react-datepicker": "^4.1.1",
"react-datetime": "^3.1.1",
"react-dom": "^16.13.0",
"react-dropzone-uploader": "^2.11.0",
"react-flow-renderer": "^9.6.2",
"react-fuzzy-highlighter": "^1.0.0",
"react-helmet": "^6.1.0",
"react-hook-mousetrap": "^2.0.4",
"react-image-lightbox": "^5.1.4",
"react-intl": "^5.20.2",
"react-masonry-css": "^1.0.16",
"react-number-format": "^4.6.4",
"react-paginate": "^8.1.3",
"react-rating": "^2.0.5",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-select": "^4.3.1",
"react-simple-maps": "^3.0.0",
"react-slick": "^0.29.0",
"react-sortablejs": "^6.0.0",
"react-syntax-highlighter": "^15.4.4",
"react-table": "^7.7.0",
"react-tag-autocomplete": "^6.2.0",
"react-tenor": "^2.2.0",
"react-toastify": "^7.0.4",
"react-tooltip": "^4.2.21",
"react-world-flags": "^1.5.0",
"redux-undo": "^1.0.1",
"reduxjs-toolkit-persist": "^7.0.1",
"slick-carousel": "^1.8.1",
"sortablejs": "^1.14.0",
"web-vitals": "^0.2.4",
"yup": "^0.32.9"
},
"scripts": {
"start-js": "react-scripts start --dev",
"start-css": "sass --style=compressed --watch
src/sass/styles.scss:public/css/styles.css",
"start": "concurrently \"npm run start-js\" \"npm run start-css\"",
"build-js": "react-scripts build --prod",
"build-css": "sass --style=compressed --no-source-map
src/sass/styles.scss:public/css/styles.css",
"build": "concurrently \"npm run build-css\" \"npm run build-js\"",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint ./src/**/*.js",
"lint:fix": "eslint ./src --fix",
"precommit": "lint-staged",
"concurrently": "concurrently"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write",
"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"
]
},
"devDependencies": {
"#babel/core": "^7.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^4.1.0",
"concurrently": "^6.2.0",
"eslint": "^7.28.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"prettier": "2.3.1",
"sass": "^1.42.1"
}
}
After I run npm start, it takes about a minute or two until I see Starting the development server and localhost starts loading in browser. And then it takes about 30 minutes until the page is loaded. (Yes 30 minutes!) . I know that the list of dependency is quite long but still I expect it to start in maximum 5 minutes. I have searched a lot for similar issues and tried to apply the suggested solutions:
Allocated more memory: --max_old_space_size=4096
Updated nodejs and npm
Closed all browser tabs before starting the app
Notes:
When I ran npm install there were dependency errors, so I had to do npm install --force
I am running this on Windows 10 , my pc has 8GB of RAM.
Thanks to everyone who will help!
I think the problem is not with the package.json. the problem is you have something that makes it slower, which is the package prettier, the same thing happened to me, the problem was the prettier package that made my app slow by taking too much time in analyzing the format and makes the format better according to the language, so this process takes times, having too much files and prettier checks all of the file again and again, the more files you have the more time it will take. So i recommend removing prettier. You can just download a vscode extension of prettier that does the job better.

Vuejs Module not found: Error: Can't resolve '../dist/helpers.esm' in node_modules/chart.js/helpers

I am trying to run npm run dev on one of my projects and getting **Module not found: Error: Can't resolve '../dist/helpers.esm' in node_modules/chart.js/helpers
You can see here => https://i.stack.imgur.com/wZc3o.png
Package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production",
"serve": "php artisan serve",
"clear-cache": "php artisan optimize:clear && composer dump-autoload && composer cc && npm cache clean --force"
},
"devDependencies": {
"axios": "^0.21.1",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.1",
"jquery": "^3.2",
"laravel-mix": "^6.0.43",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^5.0.0",
"sass-loader": "^12.6.0",
"vue": "^2.5.7",
"vue-loader": "^15.9.8"
},
"dependencies": {
"chart.js": "^3.8.0",
"chartjs-plugin-datalabels": "^2.0.0",
"css-percentage-circle": "^2.0.1",
"echarts": "^5.3.2",
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.15",
"laravel-echo": "^1.11.7",
"moment": "^2.29.1",
"moment-timezone": "^0.5.32",
"node-sass": "^7.0.1",
"npm": "^8.6.0",
"pdf-lib": "^1.17.1",
"percircle": "^1.0.28",
"percircle-vue": "^0.1.2",
"pusher-js": "^7.1.0-beta",
"tinymce": "^5.7.1",
"v-charts": "^1.17.10",
"v-skeletor": "^0.0.4",
"v-slim-dialog": "0.0.10",
"vue-axios": "^2.1.4",
"vue-chartjs": "^4.0.0",
"vue-codemirror": "^4.0.6",
"vue-confirm-dialog": "^1.0.2",
"vue-css-percentage-circle": "^2.0.0",
"vue-js-modal": "^2.0.1",
"vue-month-picker": "^1.5.0",
"vue-multiselect": "^2.1.6",
"vue-router": "^3.4.9",
"vue-step-progress": "^0.3.7",
"vue-tinymce-editor": "^1.6.2",
"vue-toast-notification": "^0.6.2",
"vue2-daterange-picker": "^0.6.8",
"vuedraggable": "^2.24.3",
"vuejs-datepicker": "^1.6.2",
"vuejs-dialog": "^1.4.2",
"vuex-persistedstate": "^3.0.0",
"yan-progress": "^1.0.3"
}
}
Node version install on my system is 18.0.0 and npm is 8.6.0
It was working just fine but now its not

How do I resolve this dependency conflict from when doing npm link

When I do npm link like this in Window 10:
L:\git\notistack> npm link L:\react\Greta100Weeks\greta100weeks\node_modules\react
In my app when I do import { useSnackbar } from 'notistack'; then I can use the notistack ok, and it's the global notistack. I want to modify it debug it locally so I forked it and did the npm link but when I npm start the the App get the "You might have more than one copy of React in the same app " error. I also test this and it's true so that's why I do the npm link react and it's also recommended so I don't know what I do wrong here
To be able to debug notistack in VSCode and use the notistack in my app in VSCode. I do npm link. I get the Duplicate React error so must npm link the App react version and tell notistack to us the app react.
But I get this error: I do this npm link on other library's without problem but now this error:
I have tried to fixed this but it's not working.
I also do:
L:\git\notistack> npm link L:\react\Greta100Weeks\greta100weeks\node_modules\react-dom
And that is resolving ok.
I fork the notistack library and is using it ok in the app but only when I do npm link it fails. What is the problem here I guess it's in the package.json
Here is the package.json for the forked library notistack:
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "dist/index.js",
"module": "dist/notistack.esm.js",
"types": "dist/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.11.2",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}
Here is the package.json for the app using the library:
{
"name": "greta-thunberg-fff",
"version": "1.2.9",
"private": true,
"homepage": "https://greta.portplays.com",
"main": "index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/styles": "^4.11.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"clean-tag": "^3.1.1",
"clsx": "^1.1.1",
"comma-separated-values": "^3.6.4",
"crypto-js": "^4.0.0",
"date-fns": "^2.23.0",
"faker": "^5.5.3",
"firebase": "^7.23.0",
"formik": "^2.2.5",
"framer-motion": "^2.9.5",
"gsap": "^3.5.1",
"history": "^5.0.0",
"i": "^0.3.6",
"lodash": "^4.17.19",
"lodash.debounce": "^4.0.8",
"mammoth": "^1.4.11",
"material-table": "^1.69.2",
"moment": "^2.27.0",
"normalize-wheel": "^1.0.1",
"notistack": "^1.0.10",
"npm": "^7.11.2",
"pdfjs-dist": "^1.8.357",
"preval.macro": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-activity": "^1.2.2",
"react-bootstrap": "^1.3.0",
"react-chartjs-2": "^2.11.1",
"react-data-grid": "^6.1.0",
"react-detect-offline": "^2.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-helmet": "^6.1.0",
"react-motion": "^0.5.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.5",
"react-resize-detector": "^5.0.7",
"react-router": "^6.0.0-beta.4",
"react-router-dom": "^6.0.0-beta.4",
"react-scripts": "^3.4.0",
"react-slick": "^0.27.3",
"react-spring": "^8.0.27",
"react-transition-group": "^4.4.1",
"react-visibility-sensor": "^5.1.1",
"rebass": "^4.0.7",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.41.1",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"three": "^0.85.2",
"typescript": "^3.9.7",
"uuid": "^8.3.1",
"xlsx": "^0.10.1",
"yup": "^0.32.1"
},
"scripts": {
"start": "set PORT=6545&& react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.1",
"#typescript-eslint/parser": "^4.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"clean-tag": "^3.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"gh-pages": "^2.0.1",
"prettier": "^2.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "^3.4.3",
"rebass": "^4.0.7",
"styled-system": "^5.1.5"
}
}

Define no proxy but get 'When "proxy" is specified in package.json' error

When I run npm run dev I get an error message:
When "proxy" is specified in package.json it must start with either http:// or https:// , but I don't define any proxy in my package.json. How can this happen and how do I solve it?
package.json
{
"name": "vue-admin-template",
"version": "4.3.0",
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
"author": "Pan <panfree23#gmail.com>",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
"dependencies": {
"#gitgraph/js": "^1.3.5",
"#toast-ui/vue-editor": "^2.5.1",
"axios": "0.18.1",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"echarts": "^4.8.0",
"element-ui": "2.13.2",
"element-ui-el-table-draggable": "^1.2.9",
"fuse.js": "^6.4.3",
"jquery": "^3.5.1",
"js-cookie": "2.2.0",
"jwt-simple": "^0.5.6",
"moment": "^2.27.0",
"monaco-editor": "^0.20.0",
"monaco-editor-webpack-plugin": "^1.9.0",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"socket.io-client": "^4.0.0",
"tui-editor": "1.3.3",
"vue": "2.6.10",
"vue-chartjs": "^3.5.1",
"vue-i18n": "^8.22.1",
"vue-jwt-decode": "^0.1.0",
"vue-router": "3.0.6",
"vue-showdown": "^2.4.1",
"vuedraggable": "2.20.0",
"vuex": "3.1.0",
"wangeditor": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "3.6.0",
"#vue/cli-plugin-eslint": "^3.9.1",
"#vue/cli-plugin-unit-jest": "3.6.3",
"#vue/cli-service": "3.6.0",
"#vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "^9.5.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"chalk": "2.4.2",
"connect": "3.6.6",
"eslint": "5.15.3",
"eslint-plugin-vue": "5.2.2",
"html-webpack-plugin": "3.2.0",
"mockjs": "1.0.1-beta3",
"runjs": "^4.3.2",
"sass": "^1.26.8",
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.3",
"serve-static": "^1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"vue-template-compiler": "2.6.10"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
It was in vue.config.js. Setting wrong proxy here will occur the same error message.

Electron Error ENOENT: no such file or directory, open 'electron' After update from 9 to 10

Recently I update electron version from 9 to 10 and after updated getting this error on debug mode only
when I downgrade to 9 it's working correctly
Deleted Node_Module and package.lock file multiple times and reinstall all package but no luck
I tried to upgrade to 11 electrons also but facing the same issue
When I am running in production mode "Yarn Start" is working fine
The issue in dev mode only "Yarn dev"
ERROR:-
App threw an error during load Error: ENOENT: no such file or directory, open 'electron'
at Object.openSync (fs.js:462:3)
at Object.func [as openSync] (electron/js2c/asar.js:140:31)
at Object.readFileSync (fs.js:364:35)
at Object.fs.readFileSync (electron/js2c/asar.js:542:40)
at Module._extensions..js (internal/modules/cjs/loader.js:1165:22)
at Object.newLoader [as .js] (C:\SVN\mangocrossplatform\trunk\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
at Function.Module._load (electron/js2c/asar.js:779:28)
at Module.require (internal/modules/cjs/loader.js:1023:19)
My Package.json File
{
"name": "mangoapps-messenger",
"productName": "Apps Messenger",
"version": "15.0.11",
"description": "Apps Messenger - An Universal Messenger For Apps",
"homepage": "",
"author": {
"email": "",
"name": ""
},
"scripts": {
"build": "yarn clean && concurrently \"yarn build-main\" \"yarn build-renderer\"",
"build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
"build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
"build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
"dev": "yarn clean && cross-env START_HOT=1 node -r #babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
"package": "yarn build && electron-builder build --publish never",
"package-linux": "yarn build && electron-builder build --linux",
"package-mac": "yarn build && CSC_LINK=./certs/mac.p12 && CSC_IDENTITY_AUTO_DISCOVER=false && electron-builder build --mac",
"package-win": "yarn build && electron-builder build --win --x64",
"package-win32": "yarn build && electron-builder build --win --ia32",
"postinstall": "electron-builder install-app-deps && yarn build-dll && opencollective-postinstall",
"preinstall": "node ./internals/scripts/CheckYarn.js",
"prestart": "yarn build",
"start": "cross-env NODE_ENV=production electron ./dist/main.prod.js",
"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r #babel/register ./app/main.dev.js",
"start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
"clean": "rimraf dist/"
},
"main": "./dist/main.prod.js",
"build": {
"productName": "Apps Messenger",
"appId": "com.mangoapps.electrondesktop",
"artifactName": "${name}-${version}.${ext}",
"generateUpdatesFilesForAllChannels": true,
"mac": {
"category": "productivity",
"type": "distribution",
"provisioningProfile": "certs/mac.provisionprofile",
"identity": "sdasdB",
"hardenedRuntime": true,
"entitlements": "build/entitlements.mac.inherit.plist",
"entitlementsInherit": "build/entitlements.mac.inherit.plist",
"gatekeeperAssess": false,
"extendInfo": {
"NSAppTransportSecurity": {
"NSAllowsArbitraryLoads": true,
"NSMicrophoneUsageDescription": "This lets you share using audio using the microphone.",
"NSCameraUsageDescription": "This lets you share a photo or video taken from your camera.",
"NSContactsUsageDescription": "This lets you enable access to your contacts and uses them to invite."
}
},
"target": [
"zip"
]
},
"linux": {
"target": [
"deb"
],
"category": "Productivity"
},
"win": {
"target": [
"nsis",
"msi"
],
"certificateFile": "",
"certificatePassword": "",
"publisherName": "",
"requestedExecutionLevel": "asInvoker",
"signAndEditExecutable": true,
"signDlls": true
},
"nsis": {
"oneClick": true,
"perMachine": false,
"deleteAppDataOnUninstall": true
},
"msi": {
"oneClick": true,
"perMachine": true
},
"files": [
"resources",
"dist/",
"dist/main.prod.js",
"dist/main.prod.js.map",
"package.json"
],
"directories": {
"buildResources": "resources",
"output": "release"
}
},
"keywords": [
"mangoapps",
"messenger"
],
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-proposal-decorators": "^7.4.0",
"#babel/plugin-proposal-do-expressions": "^7.2.0",
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/plugin-proposal-export-namespace-from": "^7.2.0",
"#babel/plugin-proposal-function-bind": "^7.2.0",
"#babel/plugin-proposal-function-sent": "^7.2.0",
"#babel/plugin-proposal-json-strings": "^7.2.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
"#babel/plugin-proposal-numeric-separator": "^7.2.0",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-proposal-pipeline-operator": "^7.3.2",
"#babel/plugin-proposal-throw-expressions": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "^7.2.0",
"#babel/plugin-transform-react-constant-elements": "^7.2.0",
"#babel/plugin-transform-react-inline-elements": "^7.2.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.4.0",
"#fortawesome/fontawesome-pro": "^5.12.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-register": "^6.26.0",
"chalk": "^2.4.2",
"concurrently": "^4.1.0",
"cross-env": "^5.2.0",
"cross-spawn": "^6.0.5",
"css-loader": "2.1.1",
"detect-port": "^1.3.0",
"electron": "^10.0.0",
"electron-builder": "^22.9.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"enzyme-to-json": "^3.3.5",
"fbjs-scripts": "^1.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.5.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"opencollective-postinstall": "^2.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^1.16.4",
"react-svg-loader": "^3.0.3",
"react-test-renderer": "^16.8.6",
"redux-logger": "^3.0.6",
"rimraf": "^3.0.0",
"sass-loader": "^7.1.0",
"sinon": "^7.3.1",
"spectron": "^5.0.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.2.3",
"testcafe": "^1.1.0",
"testcafe-browser-provider-electron": "^0.0.8",
"testcafe-live": "^0.1.4",
"testcafe-react-selectors": "^3.1.0",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-bundle-analyzer": "^3.1.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"yarn": "^1.16.0"
},
"dependencies": {
"#babel/polyfill": "^7.7.0",
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/pro-duotone-svg-icons": "^5.12.0",
"#fortawesome/pro-light-svg-icons": "^5.12.0",
"#fortawesome/pro-regular-svg-icons": "^5.12.0",
"#fortawesome/pro-solid-svg-icons": "^5.12.0",
"#fortawesome/react-fontawesome": "^0.1.8",
"#trodi/electron-splashscreen": "^0.3.4",
"app-root-path": "^2.2.1",
"axios": "^0.21.1",
"babel-runtime": "^6.26.0",
"bootstrap": "^4.3.1",
"check-internet-connected": "^2.0.4",
"connected-react-router": "^6.3.2",
"copy-webpack-plugin": "^5.1.1",
"core-js": "2",
"custom-electron-titlebar": "^3.2.2-hotfix62",
"devtron": "^1.4.0",
"dotenv": "^8.2.0",
"electron-debug": "^2.1.0",
"electron-dl": "^3.0.2",
"electron-fetch": "^1.3.0",
"electron-localshortcut": "^3.1.0",
"electron-log": "^4.1.1",
"electron-positioner": "^4.1.0",
"electron-splashscreen": "^0.1.7",
"electron-store": "^3.2.0",
"electron-unhandled": "^3.0.2",
"electron-util": "^0.14.1",
"electron-window-state": "^5.0.3",
"emoji-mart": "^2.11.1",
"form-data": "^2.3.3",
"fs-extra": "^8.1.0",
"jquery": "^3.3.1",
"js-md5": "^0.7.3",
"lodash": "^4.17.15",
"mime-types": "^2.1.27",
"moment-timezone": "^0.5.27",
"node-mac-notifier": "file:local_dep/node-mac-notifier",
"node-machine-id": "^1.1.12",
"node-notifier": "^8.0.0",
"platform-folders": "^0.4.1",
"plist": "^3.0.1",
"popper.js": "^1.15.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.15",
"react-image-crop": "^8.4.0",
"react-lazyload": "^2.6.2",
"react-page-layout": "^0.9.8",
"react-phone-input-2": "^2.13.9",
"react-player": "^1.15.2",
"react-redux": "^7.2.0",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-select": "^3.0.3",
"react-tenor": "^2.1.1",
"react-toastify": "^6.0.8",
"reactstrap": "^8.5.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"source-map-support": "^0.5.11",
"styled-components": "^5.0.0",
"universal-analytics": "^0.4.23",
"xml2js": "^0.4.19",
"zip-folder": "^1.0.0"
},
"devEngines": {
"node": ">=12.13.0",
"npm": ">=6.12.0",
"yarn": ">=1.19.0"
},
"browserslist": [
"defaults"
]
}

Resources