Babel doesn't run from npm script - npm

I have the babel cli installed on my machine using:
npm install -g babel-cli
When I run this command I get the desired output. i.e out.js is created
babel script.js --out-file out.js
but when I try to run that command via npm I get an error saying
The CLI has been moved into the package `babel-cli`.
$ npm install -g babel-cli
Here's the package.json:
{
"name": "youtubeapiloader",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"compile": "babel -g src/youtube-api-loader.js --out-file youtube-api.js",
"prepublish": "npm run compile"
},
"devDependencies": {
"babel": "^6.1.18"
}
}

Have you tried installing babel-cli as a devDependency already?
I managed to get it working like this. Just do
npm install babel-cli --save-dev
Perhaps you might also need babel-core, but I can not remember correctly.
Note that if you want to run this using Travis CI you might still need to globally install babel-cli using a custom installation step within your .travis.yml. e.g.
language: node_js
sudo: false
node_js:
- "5.0"
install:
- npm install -g babel-cli
- npm install

Related

create-react-app dependency version issues with React 18

npx create-react-app my-project results in the following dependency errors:
npx version: 8.5.0
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-18#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
The command still produces a project directory, but running npm start in the created directory errors with web-vitals missing from node-modules.
Solutions tried
Running the same command with --force or --legacy-peer-deps as suggested by the above error message doesn't solve the problem.
Deleting node_modules and package-lock.json and running npm i also doesn't solve the problem.
Update
The problem has been fixed with the latest update of create-react-app. Now it creates a project without any problem.
Until this is fixed for now you can delete the node_modules folder and package-lock.json. Next, open package.json and change
"react": "^18.0.0" & "react-dom": "^18.0.0" to an earlier version e.g:
"react": "^17.0.2" & "react-dom": "^17.0.2".
Finally, you can run npm install.
Alternative Solution (Try this first!):
solution suggested by joooni1998):
delete both node_modules and package-lock.json
run npm i web-vitals --save-dev
run npm install
and then you can use npm run build and npm start again
Check here for the Github issue.
Here is a temporary workaround:
Install cra-template to a separate folder (other than your new
project app's folder) using "npm install cra-template"
Go to the installed cra-template package folder and in file "template.json" change the line '"#testing-library/react": "^12.0.0"' to '"#testing-library/react": "^13.0.0"'
Go back to your root folder and run npx create-react-app my-app (your app name) --template file:PATH_TO_YOUR_CUSTOM_TEMPLATE
Additionally, you can let the build fail, remove the node_modules folder as well as the package-json.lock file. Open the package.json file and change the react and react-dom to an earlier version.
For example:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
},
"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"
]
}
}
Delete reportWebVitals.js
Remove import reportWebVitals from './reportWebVitals'; from index.js
Remove reportWebVitals(); from the bottom of index.js
Finally run npm install
It worked for me by deleting both 'node_modules' folder and 'package-lock.json' file. Then, I changed both react and react-dom version to 17.0.2 instead of 18.0.0 inside the package.json file as suggested by Gavriel's answer https://stackoverflow.com/a/71836018/12490294. Then, inside the app folder, I ran
npm i web-vitals --save-dev
Then
npm start
The app started successfully
Or you can try this npx --legacy-peer-deps create-react-app my-appname or goto index.js and remove the usage of web vitals
or downgrade npm with npm install -g npm#8.3.0 and create react app.
You could use yarn add create-react-app your-app instead
Try running either with --force or with --legacy-peer-deps, both will install dependencies without problems.
If that doesn't work, then delete the node modules folder and start installing from scratch

Why do I receive an error when I try to run node-sass as package.json script using npm?

I have this package.json:
{
"name": "natours",
"version": "1.0.0",
"description": "Landing page for natours",
"main": "index.js",
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
},
"author": "Robert",
"license": "ISC",
"devDependencies": {
"node-sass": "^6.0.0"
}
}
When I try to run npm run compile:sass it gives me this error:
It worked for a while, but I updated the node version.
Also, if I run this command:
node-sass sass/main.scss css/style.css
From the command line, it works.
Node version: 14.17.0
npm version: 6.14.13
node-sass version: 6.0.0
To fix this I uninstalled node-sass using this commands:
npm uninstall -S node-sass
npm uninstall -D node-sass
npm uninstall -g node-sass
And then install it again globally, using:
npm install -g node-sass
Before installing globally, I tried to install it with -D flag to add it to dependencies or -S flag to add it to devDependencies but it still didn't work, not sure why.
Maybe it's an incompatibility between npm and node-sass versions. I believe it can also be fixed using nvm.

npm install package global and link in one cmd

I need to do npm install and link both in single cmd
So I am using
npm install -g NamPkg && npm link NamPkg
Is there any shorthand for this where I can mention NamPkg only once like :
npm install -g && npm link NamPkg
OR
npm install -g && link NamPkg
Bcoz I need to use this in Package.json
and when the list grows more mentioning the same package names twice may become lengthy
"scripts": {
"preinstall": "npm install -g NamPkg && npm link NamPkg"
Is there any shorthand where I can mention NamPkg only once
AFAIK there is no way of doing this either via npm scripts or bash.
I don't know if it fits your use case, but using a variable would save a little typing (in that you would only have to declare the package name once and could copy/paste the rest of the command).
"scripts": {
"preinstall": "pkg='whatever'; npm i $pkg && npm link $pkg"
},

npm install - how to trigger npm task as a post-install hook?

After npm install is run I would like to run
npm run jspm install
I have package.json
"scripts": {
"postinstall" : "npm run jspm install",
"jspm": "jspm"
},
This throws an error since npm run jspm install gets passed to node rather than npm. What's the correct way to do this?
There doesn't seem to be a reason to reference the jspm script. You can refer to jspm directly in the postinstall script:
"postinstall" : "jspm install",

How do I install bower using package.json and npm install?

How do I install bower using package.json and npm?
I have my package.json file setup like so..
{
"name": "myprogramname",
"version": "0.0.1",
"devDependencies": {
"bower": "1.2.6"
//other dependencies are listed as well
}
}
from the command line I run
npm install
It installs all of my dependencies in devDependencies except bower. Any reason for this?
Also,
which bower
returns nothing
Npm did actually install Bower but not globally. If you check your node_modules/ directory, it should be there.
Therefore, it IS accessible for other developers at this path:
node_modules/bower/bin/bower
A neater way to use a local install of bower is shown here.
Basically you need to use "npm run bower install" instead of "bower install" if you install bower through NPM locally and don't have it installed globally on your computer.