So far I have been unsuccessful in an attempt to use the env preset. I browsed the git issues that others have raised such as this, and implemented some of the suggestions that appeared to work for others, but no luck so far.
Here's what I'm working with:
package.json
"bundle": "browserify ./client/app.js -d -o ./public/o.js -t [ babelify --presets [ env ] ]",
"devDependencies": {
"#babel/cli": "^7.0.0-beta.40",
"#babel/preset-env": "^7.0.0-beta.40",
"babel-core": "^6.26.0",
"babelify": "^8.0.0"
...
And here is the error:
Error: Couldn't find preset "env" relative to directory "/Users/user/Documents/git/ts/client" while parsing file: /Users/user/Documents/git/ts/client/app.js
Anything I could be missing?
Many of the github issues relating to this suggest that babel-preset-env is not installed.
Indeed it doesn't seem to be there in your package.json. Add & install it by doing this:
npm install babel-preset-env --save
Though the earlier answers do provide the right solution and it works. But this should be installed as a dev dependency not as the core one. As this is needed only for development work. If you are using npm you can use:
npm install --save-dev babel-preset-env
or if you are using yarn as package manager then use:
yarn add --dev babel-preset-env
You just need to install babel-preset-env and your code will compile properly.
npm install babel-preset-env
Basically, this type of error occurs due to mismatch in versions of babel-core, babel-preset-env and babel-loader. Below are matched and tested devDependencies, which worked for me.
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.5.0",
"install": "^0.13.0",
"npm": "^6.14.8",
"regenerator-runtime": "^0.13.7",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
You can check whether .babelrc file exists in the directory above or above the directory. Just delete the file is OK
Related
I having vuejs-3 project and I am looking for 0 vulnerabilities. When I do npm install I am getting 48 vulnerabilities with current version node and npm. Even if I try npm audit fix --force still Issue is the same. Can someone help me please?
C:\Users\achalapa\git\cnsr-odrplat-wcm-cld-vue\mcafee-consumer-wcm-cld-vue.lib> npm install
-npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
-npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
-npm WARN deprecated har-validator#5.1.5: this library is no longer supported
-npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
-npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
-npm WARN deprecated html-webpack-plugin#3.2.0: 3.x is no longer supported
-npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
-npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
-npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
-npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
-added 923 packages, and audited 1694 packages in 4m
-105 packages are looking for funding
run `npm fund` for details
-48 moderate severity vulnerabilities
-To address issues that do not require attention, run:
npm audit fix
-To address all issues (including breaking changes), run:
npm audit fix --force
48 Vulnerabilities are coming out when we
add below packages
*"#vue/cli-plugin-babel": "~4.5.13",
"#vue/cli-plugin-typescript": "~4.5.13",
"#vue/cli-plugin-vuex": "~4.5.13",
"#vue/cli-service": "4.5.13",*
Is this okay to proceed?
Is this harmful for my project?
package.json
{
"name": "mcafee-consumer-wcm-cld-vue.lib",
"version": "1.0.0",
"private": true,
"sideEffects": false,
"scripts": {
"bundle": "set NODE_ENV=production && npm run lint && webpack --config webpack.dlp.js --progress --mode=production",
"bundle-dev": "set NODE_ENV=development && npm run lint && webpack --config webpack.dlp.js --progress --mode=development",
"lint": "eslint . --ext .ts,.js --ignore-pattern src/**/*.d.ts",
"lint-and-fix": "eslint . --ext .ts --fix"
},
"dependencies": {
"#vuelidate/core": "^2.0.0-alpha.18",
"bootstrap": "^5.0.1",
"core-js": "^3.13.0",
"intersection-observer": "^0.12.0",
"vue": "^3.0.0",
"vuex": "^4.0.0-0",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-arrow-functions": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/preset-env": "^7.14.2",
"#babel/preset-typescript": "^7.13.0",
"#types/bootstrap": "^5.0.15",
"#types/core-js": "^2.5.4",
"#types/lodash": "^4.14.170",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/eslint-plugin-tslint": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"#vue/cli-plugin-babel": "~4.5.13",
"#vue/cli-plugin-typescript": "~4.5.13",
"#vue/cli-plugin-vuex": "~4.5.13",
"#vue/cli-service": "4.5.13",
"#vue/compiler-sfc": "^3.0.11",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"babel-loader": "^8.2.2",
"babel-preset-typescript-vue3": "^2.0.12",
"clean-webpack-plugin": "^3.0.0",
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-jsdoc": "^35.0.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.9.0",
"fork-ts-checker-webpack-plugin": "^3.1.1",
"html-webpack-plugin": "^5.3.1",
"prettier": "^2.3.0",
"terser-webpack-plugin": "^5.1.2",
"ts-loader": "^9.2.2",
"tslint": "^6.1.3",
"typescript": "^4.3.2",
"typescript-tslint-plugin": "^1.0.1",
"vue-loader": "^16.2.0",
"webpack": "^5.37.1",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.0",
"webpack-merge": "^4.1.4"
}
}
If all vulnerabilities are coming only from those 4 packages - ie. vue/cli, than you can safely ignore it as only place where this code will be executed is on your own machine during development and build. If we agree that we trust the creators of Vue CLI that they do not use those vulnerable packages in a way harmful to their customers (developers using Vue CLI), we can safely ignore those warnings as no code from these packages will be included in the app bundle....
What interests you is only vuln. of packages included in dependencies part of package.json as this is code that will make it to the final app bundle and will be downloaded and executed by our users/customers
Use this command instead: npm audit --only=prod
npm prune worked for me!
I had an extraneous package installed with npm install #vue/cli -g called subscriptions-transport-ws which was no longer maintained and used a bunch of deprecated packages.
After the prune, I checked and it was gone using npm ls subscriptions-transport-ws. I also had no vulnerabilities anymore.
For anyone getting vulnerability warnings from #vue/cli:
#vue/cli is now in maintenance mode and it is recommended to create projects using create-vue
From their site:
⚠️ Vue CLI is in Maintenance Mode!
For new projects, it is now recommended to use create-vue to scaffold Vite-based projects. Also refer to the Vue 3 Tooling Guide for the latest recommendations.
$ npm create vue#3
This should properly deal with the npm audit warnings at which point you should have none from vue.
Does this happens when you are trying to create the project if so, check system environment variables in windows, my problem was that only one path was added but you need two paths. One under User varables for "YourUser" under path.
C:\Program Files \nodejs\
And second path under System variables also under path
C:\Program Files \nodejs\
This resolved problem for me, hope it helps!
This is for a group project, those with me put up some code on github and I cloned it. Did npm install and ran it with npm start. But this error keeps on coming:
https://i.imgur.com/ZrCoWJk.png
I've tried to delete the node_modules folder and reinstall it. Tried to do npm install --save react-router-dom.
The package.json file:
...
"history": "^4.9.0",
"node-sass": "^4.11.0",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.5",
"react-helmet": "^5.2.0",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
...
Since the group have already done so much I'd expect to see the progress and not this error message :(
Fixed by finding the module folder in node_modules, deleting it, adding it again with npm install --save and then it worked as it should!
Looks like that the issue is with "history". Try change it's version.
I have tried over and over and over to find a solution, but I seriously can not understand what is going on.
$ npm -v
6.5.0
$ node -v
v10.10.0
My package.json pulls in the followin dependencies:
{
"private": true,
"scripts": {
"dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"tests": "phpunit --testdox"
},
"devDependencies": {
"laravel-mix": "^3.0.0",
"lodash": "^4.17.11",
"purifycss-webpack": "^0.7.0",
"tailwindcss": "^0.7.2",
"webpack": "^3.12.0"
},
"dependencies": {
"#bugsnag/js": "^5.1.0",
"#bugsnag/plugin-vue": "^5.1.0",
"axios": "^0.17.1",
"babel-preset-es2015": "^6.24.1",
"blueimp-md5": "^2.10.0",
"clientjs": "^0.1.11",
"css-loader": "^0.28.11",
"dotenv": "^6.2.0",
"glob-all": "^3.1.0",
"js-cookie": "^2.2.0",
"laravel-echo": "^1.4.1",
"libphonenumber-js": "^1.6.9",
"md5": "^2.2.1",
"moment": "^2.22.2",
"postcss-import": "^11.1.0",
"purgecss-webpack-plugin": "^1.4.0",
"purify-css": "^1.2.6",
"pusher-js": "^4.3.1",
"qs": "^6.6.0",
"vee-validate": "^2.1.3",
"vue": "^2.5.17",
"vue-i18n": "^8.3.2",
"vue-router": "^2.8.1",
"vue-wysiwyg": "^1.7.2",
"vuex": "^3.0.1"
}
}
I can do an npm run dev 'x' times without any issue, when all of a sudden, without ever having ran another npm command, or pulled in new dependencies, or whatever, it can all of a sudden complain about a missing modules.
Module build failed: Error: Cannot find module 'es-to-primitive/es6'
This is just an example; it has been other modules as well.
My solution to this is basically:
$ rm -f -R ./node_modules/*
$ npm install
$ npm run dev
This always fixes the issue. I just don't understand why. The dependency should have been installed prior because my previous builds ran just fine. I'm running on a Macbook Pro, and I seriously have no idea what might be causing this behaviour.
On my last run, I checked node_modules/es-to-primitive and there was no es6.js file, so I understand the error, but after doing the above fix, it got that file installed. I guess I just don't understand how it can 'disappear' again after a while...
Anything I'm doing wrong or don't understand properly?
Thanks!
I hope I am not too late, but I had the exact same problem and it was driving me absolutely insane. I had to delete the node_modules directory and reinstall everything up to several times a day, and nothing I did made any difference. It then crossed my mind that iCloud Drive syncing may be causing the problem, as I had my project directory saved in ~/Documents. I tried to delete the directory from iCloud Drive and let it completely sync, and it made it somewhat better but there still were issues with some of the modules. I asked myself, there must be a way to exclude a directory from syncing? And yes, it is!
Apparently, adding .nosync to the name of a file or directory will exclude it from syncing to iCloud Drive. Earlier you could add a blank file named .nosync to any directory to exclude it, but it seems this no longer works, at least not for me on macOS 10.15.2.
With that said, I am very happy to share that renaming the node_modules directory to node_modules.nosync, and adding a link to the new directory to keep npm from complaining, seems to have solved the issue:
$ mv node_modules node_modules.nosync/ && ln -s node_modules.nosync node_modules
After doing this, I have not had to delete and reinstall the modules even once! Everything just works, just as it should.
I downloaded a react-native application from a git repository. Inside it, there is a file called package.json that looks like this:
"dependencies": {
"expo": "^27.0.0",
"invariant": "^2.2.4",
"react": "16.3.1",
"react-native": "^0.55.0",
"react-native-iphone-x-helper": "^1.0.2",
"react-navigation": "link:../..",
"react-navigation-header-buttons": "^0.0.4",
"react-navigation-material-bottom-tabs": "0.1.3",
"react-navigation-tabs": "^0.5.1"
}
Do I need to use npm to install all these libraries or will the app download them automatically?
Thanks!
Yes, you need to npm install in the terminal, from the project root directory, to download and install the dependencies, as #gaback suggested in a comment.
Alternatively, if you prefer using yarn, you can yarn install from the same directory to install the dependencies.
Below is my package.json file.
{
"name": "test",
"version": "1.0.0",
"description": "web_app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Brad",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.9.0",
"browser-sync": "^2.13.0",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-changed": "^1.3.0",
"gulp-cssnano": "^2.1.2",
"gulp-file-include": "^0.13.7",
"gulp-htmlmin": "^2.0.0",
"gulp-if": "^2.0.1",
"gulp-sass": "^2.3.2",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.3",
"gulp-uncss": "^1.0.5",
"gulp-useref": "^3.1.0",
"htmlmin": "0.0.6",
"run-sequence": "^1.2.1"
},
"dependencies": {
"rxjs-es": "^5.0.0-beta.9"
}
}
When in run 'npm install' I get the following errors:
npm WARN deprecated minimatch#2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs#3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated minimatch#0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated lodash#1.0.2: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
npm WARN deprecated graceful-fs#1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated minimatch#0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch#1.0.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global node-gyp#3.3.1 should be installed with -g
As I don't have modules like 'minimatch' in my package.json file I'm assuming that other modules depend on it. So I installed all the outdated modules globally. This didn't remove the error messages. If I try and run say a gulp task it will work, however, if I restart my computer and then try and run the same gulp task, it will say modules are missing, even though they are in the node_modules folder. Any ideas?
Yes, your dependencies are using deprecated packages.
Try running npm ls to find which dependencies are referencing old packages.
Update minimatch to latest version 3.0.2 by running following command
npm update -g minimatch#3.0.2