Develop Reference

Vue app not working day after working normaly

So, the problem is that my Vue app was working just fine last night, i turned of the server and went to sleep, nothing was changed or updated and i woke up this morning wanted to continue what i was doing and go for the yarn serve to open it up, and i got the error : "'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.". Anyone encountered something similar?
Thanks for answering!
The package.json:
{
"name": "rails-front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^6.2.1",
"axios": "^1.2.5",
"bootstrap": "^5.2.3",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3",
"vue": "^3.2.45",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1"
}
}
So instinctively i tried reinstaling the vue cli, and i done that and again it gives me the same error, so im locked in place rn

Follow the instructions step by step:
Open cmd and run the command npm uninstall -g #vue/cli
then npm install -g #vue/cli
Open your project and remove node_modules.
Re-install the packages.
This must fix your problem.

Cannot run Vue app after multiple npm audit fix

I wanted to solve a problem vulnerabilities problem and now my app does not run.
I get this error message:
This dependency was not found:
firebase in ./src/main.js, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/Navigation.vue?vue&type=script&lang=js and 1 other
To install it, you can run: npm install --save firebase
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Here is my package.json:
{
"name": "poker-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"chart.js": "^3.6.2",
"core-js": "^3.6.5",
"firebase": "^9.6.1",
"generatorics": "^1.1.0",
"itertools": "^1.7.1",
"vue": "^3.0.0",
"vue-chartkick": "^0.6.1",
"vue-echarts": "^6.0.0",
"vue-router": "^4.0.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
}
}
Anyone know what is it?

Try deleting the node_modules folder then running:
npm cache clean --force
npm install
Take a look on the warnings during the install as they can give you some clue about version incompatibility between packages

Can't Generating the release APK - React Native

I want to Generate an APK, I follow these steps In Docs but still have A Build Failed
1. cd android
2. gradlew clean "build Successful"
3. gradlew assembleRelease "BUILD FAILED" with this
Could not read path '\node_modules#babel\parser.bin\parser'.
Here is package.json File
Package.Json
{
"name": "DemoApp",
"version": "1.12.3",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#turf/distance": "^6.0.1",
"#turf/helpers": "^6.1.4",
"#turf/invariant": "^6.1.2",
"#turf/turf": "^5.1.6",
"lodash": "^4.17.11",
"react": "16.8.6",
"react-native": "0.59.8",
"react-native-datepicker": "^1.7.2",
"react-native-fcm": "^16.2.4",
"react-native-firebase": "5.3.1",
"react-native-gesture-handler": "1.2.1",
"react-native-image-picker": "^0.28.0",
"react-native-linear-gradient": "^2.5.4",
"react-native-maps": "^0.24.2",
"react-native-svg": "^9.3.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "3.11.0"
},
"devDependencies": {
"#babel/parser": "^7.4.4",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-devtools": "^3.6.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}

I also faced the same problem and solved by downgrading yarn version to 1.10.1, then it works. May it work for you as well.
Uninstall yarn 1.12.3
Install yarn 1.10.1
Go to project folder and execute yarn install
Build my project and the error is gone

Delete the node_module folder and then run npm install.

Do you put Babel and Webpack in devDependencies or Dependencies?

I'm new to npm and don't really understand what should go into dependencies vs. devDependencies. I know that for testing libraries they should go into dev, but how about for things like babel and webpack? Should they be in dev too, because they're only used to transcompile es6 and JSX into vanilla JS? My understanding is that when you deploy to heroku, it do the transcompiliation with the necessary libraries already, so there's no need to host them on production?
"dependencies": {
"babel-core": "^6.7.7",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-object-rest-spread": "^6.6.5",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^3.3.7",
"css-loader": "^0.23.1",
"es6-promise": "^3.2.1",
"eslint": "^2.9.0",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-react": "^5.0.1",
"express": "^4.13.4",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"lodash": "^4.15.0",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.0.2",
"react-dom": "^15.0.2",
"react-redux": "^4.4.5",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.2.3",
"redux": "^3.5.2",
"redux-form": "^6.1.0",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
},
"devDependencies": {
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"mocha": "^2.5.3",
"sinon": "^1.17.4",
"webpack": "^1.13.2"
}

The babel and webpack packages will go into the devDependencies section because these packages are used in when transpiling and bundle-ing your code into vanilla javascript in the bundle.js & etc file(s).
In production you will run your code off the bundle.js build/generated code will not require these dependencies anymore.

Despite what basically everyone says, I'm going to offer a piece of sanity... it's really quite simple:
Is your project going to be npm installed by another project? a.k.a are you authoring a npm module? will it end up in another projects package.json?
No?
Then put everything in dependencies.
Yes?
dependencies: Things you want downstream consumers and project developers of your project to have installed:
peerDependencies: Things your downstream users need to make sure they have installed
bundleDependencies: Things your downstream users will need, and won't need to install separately because when you npm publish, these will be "bundled" with your package.
optionalDependencies: Things that are nice to have but the absence of will not cause fatal error
devDependencies: things only used while working on your project.
The short of it is this: modules do not magically get installed differently. They either get installed or they do not.

Dev dependency is which only use for the development server, these are devDepedency:
All the packages which are not using in source code or imported are devDependencies
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.8.3",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"prop-types": "^15.6.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.6.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"

NPM error can't find present "es2015" - babel/node/react

I'm getting the following NPM error when I deploy to Heroku. My project is a mern stack.
Error: Couldn't find preset "es2015" relative to directory "/app"
Packages seem to be installed correctly, I have a .babelrc file set up correctly, and nothing is different locally compared to remote other than the parent directories are different. On Heroku, the parent directory is obviously "app". These are my NPM packages:
"dependencies": {
"babel-core": "^6.7.2",
"babel-polyfill": "^6.7.4",
"body-parser": "~1.12.0",
"cookie-parser": "~1.3.4",
"css-modules-require-hook": "^4.0.0",
"debug": "~2.1.1",
"express": "~4.12.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"serve-favicon": "~2.2.0",
"webpack": "^1.12.13"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.7.2",
"css-modules-require-hook": "^4.0.0",
"redux-devtools": "^3.1.1",
"redux-devtools-dock-monitor": "^1.1.0",
"redux-devtools-log-monitor": "^1.0.4",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.10.0"
}
Furthermore, npm start runs index.js which consists of the following:
require('babel-core/register');
require('babel-polyfill');
require('css-modules-require-hook');
require('./server/index');
I actually was getting errors with babel-polyfill and css-modules-require-hook not being found or something (I can't remember unfortunately) but when I added them from my devDependencies to my dependencies, it seemed to resolve itself. It's rather difficult to determine what packages to put where actually (any tips?). I'd really appreciate some direction!

From what i understand, heroku defaults to adding the --production flag, which inturn doesnt install your devdependencies. I'd move all necessary dependencies to create your build to devDep to dependencies.
or
heroku config:set NPM_CONFIG_PRODUCTION=false