Develop Reference

Getting error "babel" is not recognized as an internal or external command,

I have a simple tests.js file that I wish to follow up with a source map file. I have tried initiating the dependencies yet the prompt shows the error. If anyone could specify the problem and the solution would be grateful ^^
tests.js
var add = (...arr) => {
return arr.reduce((sum, el) =>{
return sum+el;
}, 0)
}
console.log(add(1,2,3));
I've tried these commands at first
npm install -g babel-cli
npm install babel-preset-es2015
babel tests.js --out-file tests.dist.js --source-maps --presets=es2015
But received the same error. I have followed another solution from the community but it still didn't work. The solution was to remove node_modules and reinitiate the dependencies.
npm install --save-dev #babel/core #babel/cli #babel/preset-env #babel/node
and add "start": "nodemon --exec babel-node index.js", in the dependencies.
I checked the node_modules and it had the existence of these files too.
node_modules/.bin/babel-node
node_modules/.bin/babel-node.cmd - windows only
node_modules/#babel/node/bin/babel-node.js
The solution I followed Still, I couldn't figure out how to solve this issue. This is my first time working with node and babel. My node version is v16.13.1
Edited
Folder Structure
Y:.
| index.html
| package-lock.json
| package.json
| tests.js
| tree.txt
|
\---node_modules
| .package-lock.json
|
+---.bin
| babel
.....
It's huge!
package.json
{
"dependencies": {
"#babel/cli": "^7.16.8",
"#babel/core": "^7.16.12",
"#babel/preset-env": "^7.16.11"
}
}
.babelrc
{
"presents": [
"#babel/preset-env"
]
}
./node_modules/#babel/cli/bin/babel.js
require("../lib/babel");
After using bash for the command -
./node_modules/#babel/cli/bin/babel.js example.js --out-file main.dist.js
The error
Error: Unknown option: .presents. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
at throwUnknownError (Y:\babel work\node_modules\#babel\core\lib\config\validation\options.js:133:27)
at Y:\babel work\node_modules\#babel\core\lib\config\validation\options.js:118:5
at Array.forEach (<anonymous>)
at validateNested (Y:\babel work\node_modules\#babel\core\lib\config\validation\options.js:94:21)
at validate (Y:\babel work\node_modules\#babel\core\lib\config\validation\options.js:85:10)
at Y:\babel work\node_modules\#babel\core\lib\config\config-chain.js:209:34
at cachedFunction (Y:\babel work\node_modules\#babel\core\lib\config\caching.js:60:27)
at cachedFunction.next (<anonymous>)
at evaluateSync (Y:\babel work\node_modules\gensync\index.js:251:28)
at sync (Y:\babel work\node_modules\gensync\index.js:89:14) {
code: 'BABEL_UNKNOWN_OPTION'
}

Hyy,
[update]
installing babel locally
npm i #babel/core #babel/cli #babel/preset-env
Inside package.json add npm script
"scripts": {
"start-babel": "babel example.js --out-file main.dist.js"
},
You need .babelrc file for all you configuration
// basic need
{
"presets": [
"#babel/preset-env"
]
}
Run script by npm run start-babel this will create main.dist.js js transpiled file
You need .babelrc file with some configuration
if you have installed #bable/core #babel/cli #bable/preset-env locally
Then you have to use the path of of babel.js of node_modules like this
if you installed it globally using -g then you don't need a path just use babel

The command 'npm run dev' is not working, what should I do?

I'm trying npm run dev in the cmd and it's throwing an error I've tried a lot of things but it doesn't seem to work.
Here is my package.json file:
{
"name": "project",
"version": "1.0.0",
"description": "project",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}
Here is my wepack.config.js:
const path = require('path');
module.export = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.js'
},
mode: 'development'
};
I updated my npm, tried npm cache clean --force but and many other things but nothing seems to work. Please help.
This is the error I get:
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
Hash: c1735700111314ac598b
Version: webpack 4.43.0
Time: 62ms
Built at: 05/25/2020 1:24:29 PM
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\usman\Desktop\coding\Forkify'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! forkify#1.0.0 dev: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the forkify#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\usman\AppData\Roaming\npm-cache\_logs\2020-05-25T08_24_29_792Z-debug.log.

I uninstalled webpack cli using PowerShell as administrator and installed it using PowerShell too, it worked perfectly for me. It is an administration problem so make sure to download cli using PowerShell. These were the commands that I used:
npm uninstall webpack webpack-cli
And for installation:
npm install webpack webpack-cli --save-dev
I hope I am being helpful. Thanks

can you try to change your webpack.config.js like this :
const path = require("path");
module.exports = {
entry: "./src/js/index.js",
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js",
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
publicPath: "/js/",
},
};
and also modify the scripts object inside package.json file like below :
"scripts": {
"serve": "webpack-dev-server --mode development"
},
and finally run this command : npm run serve

Splitting up project with react & webpack4; html tags are unexpected tokens

Background
I'm using react, babel, webpack4, and es6(or maybe es7)
I have some modules that are reused by multiple react projects. For this reason I've created a 'Standard' folder that contains these modules so that they are kept separate from any specific project.
Problem
In my react project I edited my webpack.config.js to contain
resolve: {
extensions: ['.css', '.js', '.jsx'],
alias: {
Standard: '/Path/To/Standard',
}
}
Then to import a module from it I call
import MyModule from 'Standard/MyModule.js'
When I do this, it looks like the html tags aren't recognized within the files in my Standard folder
Error Messages
For webpack-dev-server --inline
ERROR in /Path/To/Standard/MyModule.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Path/To/Standard/MyModule.js: Unexpected token (13:8)
11 | var MyModule = (props) => {
12 | return (
> 13 | <header id='Header' className={props.className}>
For webpack
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! default#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the default#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Debugging attempts
I've tried to create a webpack.config.js and package.json inside my standard folder(in addition to my project folder), but nothing really seems to help
I tried some npm installs to install babel, because that seemed like the most obvious solution, and is used on this answer in an older webpack version, but I still get the same problems
npm install --save react
npm install --save babel #babel/cli #babel/core #babel/preset-env #babel/preset-react
npm install --save babel-core babel-loader babel-cli babel-preset-env babel-preset-react webpack
Also it looks like this post which is a reply to this blog might be related, but this solution didn't work for me.
package.json
{
"scripts": {
"webpack": "webpack",
"start": "http-server"
},
"dependencies": {
"react": "^16.8.6"
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.1",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.5.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"webpack": "^4.28.0"
}
}
webpack.config.js
var webpack = require('webpack');
const config = {
mode: 'development', // set mode option, 'development' or 'production'
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
},
resolve: {
extensions: ['.css', '.js', '.jsx'],
}
}
module.exports = config;
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}

You're 1st problem here is that babel is not parsing code from you're packages (error say that it try to exec not transpiled jsx code).
Maybe the babel presets is not accessible in you're package directory.
You can try copying them or set them directly in the webpack config
{
loader : 'babel-loader',
options: {
presets : [
['#babel/preset-env',
{// here the presets params
}],
'#babel/preset-react'
],
plugins : [
['#babel/plugin-proposal-class-properties', {
"loose": true
}]
]
}
},
Possibly the exclude regexp of babel exclude the packages from where you want importing scripts :
exclude: /(node_modules|bower_components)/,
So you can use a custom function like that :
exclude: {test:(pathName)=>(isInternalCode(pathName))),
Or use negative lookahead in the reg exp like :
/(node_modules(?!\b(?:OneFolder|AnotherIncluded))|bower_modules)/
That's said the usual way is to compile independently you're packages ( by externalizing all theirs deps from the builds & adding them to "peerDependencies" or "dependencies" )
Also; there a plugin to make "inheritable" packages; layer-pack.
It allow making "inheritable" projects, & deal with node_modules & webpack to make inheritable "code layers" & even work when compiling node scripts or using monorepo structure
Using it you can simply put you're components in a shared inheritable package
it come with some nice features like glob resolving, which help including an unknown number of files.
There is samples here & doc here
Hope it help :)

Installing Babel V6.x ES7 Async/Await on Node.js v6.2.0 with Nodemon

Man is this a pain to setup! I've followed the installation instructions here clicking on the nodemon box:
https://babeljs.io/docs/setup/#installation
npm install babel-cli babel-preset-es2015 --save-dev
.babelrc in root directory:
{
"presets": ["es2015"],
"plugins": ["transform-async-to-generator"]
}
package.json (I've installed more babel stuff as seen):
...
"devDependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-plugin-transform-async-to-generator": "^6.8.0",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-node6": "^11.0.0",
"babel-register": "^6.11.6"
},
"scripts": {
"startn": "nodemon app.js",
"babel-node": "babel-node --presets=es2015 --ignore='foo|bar|baz'",
"babel-dev": "nodemon --exec npm run babel-node -- experiment/socketio/test.js"
},
...
test.js:
(async function () { // <-- error occues here
const value = await 123;
console.log(value);
})().then(() => {
console.log('Done');
});
I run the command run-script babel-dev as seen below. Error:
karl#karl-ux303ln:~/dev/sketch$ npm run-script babel-dev
> sketch#0.0.1 babel-dev /home/karl/dev/sketch
> nodemon --exec npm run babel-node -- experiment/socketio/test.js
[nodemon] 1.10.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `npm run babel-node experiment/socketio/test.js`
> sketch#0.0.1 babel-node /home/karl/dev/sketch
> babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"
/home/karl/dev/sketch/node_modules/babel-core/lib/transformation/file/index.js:591
throw err;
^
SyntaxError: /home/karl/dev/sketch/experiment/socketio/test.js: Unexpected token (1:7)
> 1 | (async function () {
| ^
2 | const value = await 123;
3 | console.log(value);
4 | })().then(() => {
at Parser.pp.raise (/home/karl/dev/sketch/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/home/karl/dev/sketch/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.expect (/home/karl/dev/sketch/node_modules/babylon/lib/parser/util.js:83:33)
at Parser.pp.parseParenAndDistinguishExpression (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:582:12)
at Parser.pp.parseExprAtom (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:481:19)
at Parser.pp.parseExprSubscripts (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:277:19)
at Parser.pp.parseMaybeUnary (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:257:19)
at Parser.pp.parseExprOps (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:188:19)
at Parser.pp.parseMaybeConditional (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:165:19)
at Parser.pp.parseMaybeAssign (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:128:19)
npm ERR! Linux 3.19.0-65-generic
npm ERR! argv "/home/karl/.nvm/versions/node/v6.2.0/bin/node" "/home/karl/.nvm/versions/node/v6.2.0/bin/npm" "run" "babel-node" "experiment/socketio/test.js"
npm ERR! node v6.2.0
npm ERR! npm v3.8.9
npm ERR! code ELIFECYCLE
npm ERR! sketch#0.0.1 babel-node: `babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sketch#0.0.1 babel-node script 'babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sketch package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs sketch
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls sketch
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/karl/dev/sketch/npm-debug.log
[nodemon] app crashed - waiting for file changes before starting...
I've also tried switching to node v4.4.7 and upgrading npm to 3.10.6. still same error.

1) remove all babel modules (remove everything, this is a little buggy I've found out)
2) install the following:
npm install --save-dev babel-polyfill babel-preset-es2015 babel-preset-stage-3 babel-register
3) fix .babelrc file:
{
"presets": [
"es2015",
"stage-3"
]
}
4) check to see if it works (-r flag is to preload modules):
node -r babel-register -r babel-polyfill experiment/socketio/test.js
To fix nodemon:
nodemon -r babel-register -r babel-polyfill experiment/socketio/test.js

Async/await is handled in babeljs by the plugin transform-async-to-generator, which is included in the stage-3 preset. It's not included by default in the es2015 preset, so you'll have to add either the plugin itself or the stage-3 preset explicitly. To do that on the command line, change this line in package.json:
"babel-node": "babel-node --presets=es2015 --ignore='foo|bar|baz'",
to read:
"babel-node": "babel-node --presets=es2015,stage-3 --ignore='foo|bar|baz'",
adding the stage-3 preset. The same could also be achieved like so:
"babel-node": "babel-node --presets=es2015 --plugins=transform-async-to-generator --ignore='foo|bar|baz'",
However, it's generally recommended practice to use the .babelrc configuration file, which could be as simple as:
{
"presets": ["es2015", "stage-3"]
}
or
{
"presets": ["es2015"],
"plugins": ["transform-async-to-generator"]
}
and then the line in your package.json could just be:
"babel-node": "babel-node --ignore='foo|bar|baz'",
(original answer for comment context)
You need to add:
"plugins": ["transform-async-to-generator"]
to your .babelrc, as I don't believe async/await is included in any of the standard presets (since it can be implemented in multiple ways)

Error: Cannot resolve module 'babel-loader'

I'm trying to run webpack on my postinstall script in my package.json when I push to heroku but I am getting the following error.
ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /tmp/build_6cb4b10367d9382367ab72f2e2f33118
When I run the command locally I get no issues. Below is my webpack config - i have tried using resolveLoader to fix the resolving issue but to no avail?
var path = require('path');
var webpack = require('webpack');
var config = {
entry: path.resolve(__dirname, './app/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.less$/,
loader: 'style!css!less'
}]
},
resolve: {
extensions: ['', '.js', '.jsx', '.less'],
modulesDirectories: [
'node_modules'
]
},
resolveLoader: {
root: path.resolve(__dirname, 'node_modules')
},
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
]
};
module.exports = config;
Any suggestions? Thanks

I found out why. I didn't have babel or babel-core in my package.json. Add them fixed the error.
"devDependencies": {
"babel": "^5.8.23",
"babel-core": "^5.0.0",
"babel-loader": "^5.3.2"
}

In my case, I had mis-spelled the loader while installing it, so make sure you install
babel-loader
NOT
bable-loader

In my case, I tried the command:
$ npm install babel-loader --save
and continued to fix the rest based on the reminder from the console, and it fixed the issue:
"ERROR in Entry module not found: Error: Can't resolve 'babel-loader'"

I had a similar error when working on a Rails 6 application.
I think the issue was that the Babel-loader node package wasn't installed properly or the executable couldn't be located by the application.
All I had to do was to upgrade the node packages in the application by running:
yarn upgrade
Here's my devDependencies in my package.json file:
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0
Note: I didn't have to include Babel-loader node package in the list of devDependencies for it to work.

I'm using yarn and webpacker for a rails + react project.
I know not everyone can upgrade all their dependencies without breaking things, but for me, adding running yarn upgrade fixed this error.
That was with only #babel/core in my dependencies config, since babel-loader is included as a dependency of webpacker.

In some cases, when deploying to production (for example with Rails Webpacker), dev dependencies are not loaded. So having babel-loader in devDependencies will not work.
In fact, it makes sense that babel-loader would be placed in dependencies, not devDependencies, because it's used in the production code itself. The only packages that should be in devDependencies are those that are run in development, such as tests and linters.

I had mine in devDependencies and it didn't work, I switched it to dependencies and it finally worked!

I deleted the yarn.lock and node_modules folder then omit babel-loader in your devDependencies in package.json, then i rerun yarn, and it works.

When using yarn 2, webpack 4 is unable to resolve the loader. or update to webpack 5
I had to use PnPify to make it work.
yarn pnpify webpack

In my case react-scripts was importing babel-loader as dependency. It worked for a while because it was in package-lock.json. If you have react-scripts in your deps, try removing node_modules, package-lock.json and do npm install again.