I have a small react jsx file that needs to be compiled to js.
I install babel and the presets like so in the directory with the js file
npm -g install babel-cli
npm install babel-preset-es2015 babel-preset-react
My script does this
babel --presets es2015,react input.js -o output.js
Everything works.
Reboot the machine and re-run the build. It fails.
Each time I reinstall babel and the presets to get it to work.
I am not a js dev and looking up the similar questions list and a google search for this issue returns 25 different ways of "fixing" the issue. This seems like a basic task, why is there so much noise around it and what is the right way to add this to a larger non-javascript build process .
You have to install the presets globally.
Do this
Create a new folder and move you input.js to that folder
Do npm init
Do npm i babel without -g
Do npm install babel-preset-es2015 babel-preset-react
Open the console at that location
Run ./node_mudules/.bin/babel --presets es2015,react input.js -o output.js
Related
I have a asp.net core react app and using webpack for bundling .I have installed required dependencies but when build application it shows an error.
How could i resolve this error.
I have installed required dependencies so many times done npm cache clean and restarted a machine.still its showing not installed in vs solution explorer.
webpack installed in requied folder.
IN vs solution
when try to restore package inside solution explorer,its not installed.
webpack-cli is missing
You doing wrong in your npm install
Should be this command for global
npm i -g webpack-cli
or this command for local
npm i -D webpack-cli
You can not mix up between -D -g flag
If that didn't work for you try to right click on that package and click restore
Update:
Try to delete package-lock.json then run npm i -D webpack-cli again
Every time I create a create-react-app project it throws this error:
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.4"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
/Users/dalegrant/Desktop/hyberchat-dashboard/client/node_modules/babel-loader (version: 8.0.5)
I have tried downgrading to 8.0.4,
I've tried installing 8.0.5
I've even made sure all my dependencies for babel rely on a 8.0.5!
I have no idea what to do from here as the error persists for every create react app I now build!
This must be a common problem, does anybody have an idea on how to get around this?!
In your machine user folder there is a node_modules directory and package-lock.json remove them using rm -rf User/node_modules and rm -rf User/package-lock.json after that delete node_module directory and pack-lock.json file in your project run npm install again then it's works
Remove the babel-loader package (also globally):
npm uninstall babel-loader
npm uninstall babel-loader -g
Then run create-react-app again, it should install the correct dependency.
If you use the babel-loader somewhere else, pin the dependency there to ensure this problem does not happen again.
you probably installed node_modules in your main folders before. Search for them and remove.
In my case i have installed node_modules on my Home folder. When i removed files from this directory problem disapeared
I installed lodash and several other libraries this way:
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-testem --save-dev
npm install sinon --save-dev
npm install -g phantomjs
npm install lodash --save
npm install jquery --save
When I run testem using grunt (or directly), I found the following problem
ReferenceError: _ is not defined
Digging into the issue, I found the issue in the mode following line
module.exports = require('./lodash');
(I have to point that the ./ is added by the installer. I even tried to remove it, but the error persist)
This is located on index.js, inside the node_modules/lodash folder
I think this is an issue of installation, but no matter what I do, it continue failing. I update npm, I remove node_modules and install all over again, but this continue happens.
Any advice or clue will be greatly appreciate
You don't need to pass the relative path of modules that are inside the node_modules directory, just passing the module name will do the trick:
require('lodash');
Now node.js will automatically look inside the node_modules directory for you, simple as that <3.
I want to transpile several js files that are in ES6 to be compatible with chrome, but it seems the docs in http://babeljs.io/docs/usage/cli/ are not accurate.
After doing the first few steps I type in the console: babel and get:
You have mistakenly installed the babel package, which is a no-op in
Babel 6. Babel's CLI commands have been moved from the babel package
to the babel-cli package.
npm uninstall babel
npm install --save-dev babel-cli
See http://babeljs.io/docs/usage/cli/ for setup instructions.
And even if I run those two commands it mention, I still get the same error.
So my question is how are you supposed to transpile files with Babel and CLI?
A bit old question, but in case someone ended here through Google like me:
I had the same problem, just ran
npm install --save-dev babel-cli
in a new and completely empty directory in order to test something and could not transpile when calling babel through npx with the same error. I didn't have Babel installed globally, but after a while I noticed npm didn't create the package.json file. So I deleted everything, created empty package.json with just
{
}
installed babel-cli again (npm now added dev dependency to the json file) and now it works fine.
I created a new project
I npm install -g browserify
I tested using the cmdline, browserify app.js > bundle.js. Cool.
I want to minify so I npm install uglifyify --save-dev
I tested using the cmdline, browserify -g uglifyify app.js > bundle.js. Great.
Now I want to do this with code, but I get Error: Cannot find module 'browserify'
This is my code, basically to replace the cmdline
var browserify = require('browserify')
var fs = require('fs')
var bundler = browserify('./app.js')
bundler.transform({
global: true
}, 'uglifyify')
bundler.bundle()
.pipe(fs.createWriteStream('./bundle.js'))
It seems I would need to again install browserify locally to this project?
Installing an npm module like browserify allows you to use browserify as a command on the command line. To use the module within your project's code, you must install the module as a dependency. In other words, yes, is must be installed locally within the project's ./node_modules folder and referenced in the package.json file.
From the npm documentation:
Local install (default): puts stuff in ./node_modules of the current package root.
Global install (with -g): puts stuff in /usr/local or wherever node is installed.
Install it locally if you're going to require() it.
Install it globally if you're going to run it on the command line.
If you need both, then install it in both places, or use npm link.
As said in the other answer, one way to solve this is that you can install browserify locally instead of globally, like: npm install --save browserify uglifyfy. Then you can add a script in package.json:
...
"scripts": {
"build": "browserify app.js > bundle.js",
...
},
...
Now, npm run-script build will know how to find local browserify, which is going to be in your node_modules/ directory. And your require('browserify') will work, since browserify is now local.
Another way you could solve this is NODE_PATH env variable. Set this variable in your bashrc or equivalent like this:
export NODE_PATH=$NODE_PATH:$HOME/.nvm/versions/node/v4.2.6/lib/node_modules
Adjust the path to wherever your global node_modules are. Then you can require() whatever you installed with -g flag in your code.
However this is suboptimal, as it can lead to errors and misunderstandings. But if it's for some quick-and-dirty scripts, it can help.