I'm new to using Babel but have installed it according to the Installation guide here https://babeljs.io/setup#installation
It says at the end that you need to install plugins in order for it to work:
Now, out of the box Babel doesn't do anything ... You will need to add plugins for Babel to do anything.
I want to use this plugin: https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator to fix some Internet Explorer 11 issues as described here: async function declaration expects ';' in Internet Explorer
I've created a file in the root of my project called babel.config.json and added the following to it.
{
"plugins": ["#babel/plugin-transform-async-to-generator"]
}
My package.json contains this:
"scripts": {
"build": "babel webroot/js -d webroot/js/babel"
},
"devDependencies": {
"babel-cli": "^6.0.0"
},
When I execute npm run build from my project root it gives the following error messages.
Error: Cannot find module '#babel/plugin-transform-async-to-generator' from '/Users/andy/my-project'
Prior to creating babel.config.json I was able to run npm run build without getting any errors. As per the quote this doesn't really do anything other than output the same JavaScript as I had before transpiling it. But I knew that the process worked - in my case the input files are in webroot/js and it outputs the equivalent transpiled files to webroot/js/babel.
I don't understand how to fix this error. Is this some issue with my config file or is additional setup needed?
I've read the documentation on Babel Config Files at https://babeljs.io/docs/en/config-files and found this incredibly convoluted. My goal is to have a configuration file per project, which is why I opted for babel.config.json
npm version is 6.13.4, node version is 12.16.1.
babel-cli is outdated, you should install #babel/cli instead. It also has a peer dependency on #babel/core which you need to install as well. #babel/plugin-transform-async-to-generator plugin needs to be installed separately.
Summarizing:
Uninstall outdated babel-cli:
npm uninstall --save-dev babel-cli
Install the required packages:
npm install --save-dev #babel/cli #babel/core #babel/plugin-transform-async-to-generator
Regarding your problem with IE 11. #babel/plugin-transform-async-to-generator won't fix your issue. IE 11 doesn't support yield.
If you want to use the latest ECMAScript features and still support a wide range of browsers you should instead use #babel/preset-env. You can check out the docs on the official website: #babel/preset-env.
For async to work in IE 11 you will also need to setup polyfills. #babel/preset-env won't use them with default settings. Look under useBuiltIns option for instructions.
Additionally, there's a problem with your build script, specifically with this line: babel webroot/js -d webroot/js/babel.
With such a command babel will process whole webroot/js directory (including subdirectories) and place transpiled files to webroot/js/babel. This means that after you run this command again it will process not only your original source files but also transpiled source files because webroot/js/babel is a subdirectory of webroot/js.
I think you need to install #babel/plugin-transform-async-to-generator. More here: https://www.npmjs.com/package/#babel/plugin-transform-async-to-generator#install
npm install --save-dev #babel/plugin-transform-async-to-generator
Related
This question already has answers here:
'npm start' returns error: "There might be a problem with the project dependency tree"
(24 answers)
Closed 12 months ago.
PS C:\Users\joshm\Downloads\SMARTcontract\~\metaplex\js\packages\candy-machine-ui> yarn start
yarn run v1.22.17
$ react-scripts start
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-eslint": "^10.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:
C:\Users\joshm\node_modules\babel-eslint (version: 10.0.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if C:\Users\joshm\node_modules\babel-eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Create a .env file in your project directory, and add the following code:
SKIP_PREFLIGHT_CHECK=true
Then, remove the node_modules folder, yarn.lock file and reinstall your node modules with
npm install
I have a package (package-a) that depends on another package (package-b) which is not published to npm but is on my file system. When I run npm install from package-a, package-b's dependencies are not installed. I have to navigate to package-b's directory and run npm install manually. Is there a way to install both packages' dependencies with a single npm command?
Here's my directory structure:
/
...
shared/
...
javascript/
...
package-b/
package.json
package-a/
package.json
Per the docs, I placed the following in package-a/package.json. (I'm using npm 5+)
dependencies: {
package-b: "file:../shared/javascript/package-b",
}
When I navigate to /package-a and run npm install, it installs all of package-a's dependencies like normal and also copies the package-b directory to package-a/node_modules. This is presumably what lets me type require('package-b') instead of require('../shared/javascript/package-b') .
However, as I stated before, package-bs dependencies are not installed, so if I try to use package-a, I get an error when package-b is required because it is trying to use dependencies that do not exist locally.
Once again, to solve this, I can navigate to package-b and run npm-install, but I'm hoping there's a better solution as I may have many such sub packages and I'd like to avoid having to write a shell script to go install all my dependencies if I can do this with an npm command. (perhaps I just did something wrong and npm install should be working?)
Follow up question: when I run npm install from package-b's directory, the packages are installed there, but not in the version of package-b that got copied to /package-a/node_modules during the first npm install, yet everything still works. So now it seems like when I require('package-b') it is actually resolving to /shared/javascript/package-b and NOT /package-a/node_modules/package-b. So what's the point of copying the file in the first place?
Update
It turns out this is a bug in npm 5. It only occurrs when installing from a package-lock.json file. (Github Issue)
The files are (probably) not being copied, they're being symbolically linked (symlink). This essentially creates an alias/shortcut that looks like a real directory, but points to another path.
This is how the older npm link feature worked. The reason is the code stays "live"; Changes in the linked module are reflected whenever you run the module that's referencing them, meaning you don't have to npm update all the time.
This is an excerpt from my package.json:
"dependencies": {
[...]
"jquery": "2.2.3",
[...]
}
According to the package.json documentation ("must match version exactly") it should get jQuery with version 2.2.3 when you do npm install.
So I was surprised when I found that in my node_modules/jquery/dist folder there is a jquery.js file which says: jQuery JavaScript Library v3.0.0 (Which, of course, broke some of my code)
What happened here? Is this a bug? Is this intended behaviour because some other dependency has a jQuery#3.0.0 sub-dependency?
Same occurs when I put the caret in front of the version number ("jquery": "^2.2.3"). Could not find anything about this in the docs, on SO or on google, so any help will be appreciated.
Do you have a npm-shrinkwrap.json file, which makes npm ignore all changes to your package.json dependencies (devDependencies are not affected) and has a hardcoded jquery#3.0.0 version?
Delete that file and run npm install again.
If you need to, run npm shrinkwrap again afterwards to re-create the shrinkwrap file with the new version numbers.
See documentation here: https://docs.npmjs.com/cli/shrinkwrap
I am deploying my node.js app to Appfog but since their install script cannot parse npm-shrinkwrap.json the whole deploy process fails.
An example dependency in shrinkwrap.json today looks like this
"async": {
"version": "0.2.10",
"from": "async#0.2.10", <--- This line breaks install script at appfog
"resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
},
I went through the whole shrinkwrap file and removed the "from" part from each dependency declaration and i managed to upload my application, and it works.
So my question is , how do i use an older version of npm shrinkwrap so i can get the version of shrinkwrap.json that i need?
Appfog support told me i need to use version 1.1.21 but i have not succeeded in installing it.
Please ask if some info is missing.
if you just want to use an older version of npm, you can install it via npm (i know that sounds strange, but its possible)
npm install npm#1.1.21
edit: so you try to install a version of npm which does not exist. just run
npm view npm
and take a look at the property version, to see which versions you could install via npm.
you will see that 1.1.21 does not exist in the registry, which means that you should try to install it via github (see answer by #sakai).
but then you see the next problem. you are using node#0.10.26, and npm 1.1.21 is probably not compatible with node#0.10.x.
so i for myself see basically 2 possible solutions:
Solution 1:
use n (or maybe nvm for switching node-versions back and forth. you could try to install a node#0.8.x version and try to install npm#1.1.21 there, and when done with shrinkwrapping switch back to your current node version.
Solution 2
you could setup some kind of grunt/gulp-task (i hope you use one of them) to run grunt/gulp shrinkwrap, which generates your shrinkwrap.json (via npm shrinkwrap) and when done cleans up your shrinkwrap.json
Try this:
npm install https://github.com/npm/npm/archive/v1.1.21.tar.gz
node ./node_modules/npm/bin/npm-cli.js shrinkwrap
Another—possibly simpler—solution is to just include node_modules into your repo.
Related: Should I check in node_modules to git when creating a node.js app on Heroku?
I love Bundler, it's great at dependency management. I love npm, installing node packages is easy! I have a nodejs app and would love to be able to specify my apps dependencies and easily install / update them wherever I deploy my app. This isn't a library I'm releasing, it's a full fledged web-app.
I'm aware of the npm bundle command, but that just seems to simply override the directory where packages are installed.
I'm used to using bundler in this fashion:
# Gemfile
gem "rails", "3.0.3"
Installs rails v3.0.3 and any other required gems on the host machine only if it doesn't already exist
> bundle install
How can I achieve something similar with npm?
As of npm 1.0 (which is now what you get by default if you follow the steps in the README file), "bundle" is no longer a segregated thing -- it's just "how it works".
So:
Put a package.json file in the root of your project
List your deps in that file
{ "name" : "my-project"
, "version" : "1.0.0"
, "dependencies" : { "express" : "1.0.0" } }
npm install Since you're calling this with no args, and not in global mode, it'll just install all your deps locally.
require("express") and be happy.
Edit: This only applies to npm versions < 1.0
It was quite difficult to figure this out, but NPM makes this possible.
You need three components
A subdirectory in your repository (i.e. deps/)
A package.json file in the above directory that lists dependencies
An index.js file in the above directory that requires your dependencies
Example
Imagine that express is your only dependency
deps/package.json
note: Increment the version # each time you modify the dependencies
{
"name": "myapp_dependencies",
"version": "0.0.1",
"engines": {
"node": "0.4.1"
},
"dependencies":{
"express": "2.0.0beta2"
}
}
deps/index.js
export.modules = {
express: require('express')
//add more
}
Now you should be able to install your dependencies using npm. You could even make this part of your deployment process
cd deps
npm install
Then within your app code you can get access to your specific version of express like this:
var express = require('myapp_dependencies').express;
You should read these two articles from Isaacs(author npm) blog. I think they are really good, and I believe tell you how to achieve your goal:
http://blog.izs.me/post/1675072029/10-cool-things-you-probably-didnt-realize-npm-could-do
http://foohack.com/2010/08/intro-to-npm/
I believe link #1(point #11) explains this:
11: Bundle all your dependencies into the package itself
When you use the
npm bundle command, npm will put all
your dependencies into the
node_modules folder in your package.
But it doesn’t stop there.
If you want to depend on something
that’s not on the registry, you can do
that. Just do this:
npm bundle install
http://github.com/whoever/whatever/tarball/master
This will install the contents of that
tarball into the bundle, and then you
can list it as a dependency, and it
won’t try to install it when your
package gets installed.
This also is handy if you have your
own fork of something, and would
prefer not to change the name.
In fact, you can run almost any npm
command at the bundle. To see what’s
inside, you can do npm bundle ls. To
remove something, do npm bundle rm
thing. And, of course, you can install
multiple versions and activate the one
you want.
As of Npm version 1.1.2 , there's a new command npm shrinkwrap which creates an npm-shrinkwrapped.json file, analogous to Gemfile.lock. It's important to make one, to prevent software rot (see Bundler's rationale). Particularly as Nodejs has such a fast moving community.
While bundle install creates a Gemfile.lock automatically, npm install won't create npm-shrinkwrapped.json (but will use it when it exists). Hence you need to remember to use npm shrinkwrap.
Read a full guide at http://blog.nodejs.org/2012/02/27/managing-node-js-dependencies-with-shrinkwrap/
It seems to me that the simplest solution is to use a package.json file with the private flag (added to npm just last month) set to true. That way, you can run npm install or npm bundle to grab your project's dependencies, but you prevent anyone from accidentally publishing your non-public project.
Here's an example package.json:
{
"name": "yourProject"
,"version": "1.0.0"
,"dependencies": { "express" : ">=2.1.0" }
,"private": true
}
Running npm install will install express on the local system if it doesn't already exist; running npm publish gives an error because of the "private": true.
You and your team can use the version tag internally to track dependency changes over time—each time you change a dependency, bump the version. To see which version you've installed, use npm ls installed.
Publish your app with npm as well, and list its dependencies in your package.json file.
When someone uses npm to install your package, npm will take care of resolving its dependencies.
Packages spec: http://wiki.commonjs.org/wiki/Packages/1.0