babel-loader does not transpile es6 scripts to es5

[suzuki-shunsuke]

Recently I have used Babel and Webpack but I have noticed babel-loader does not transpile es6 scripts to es5.
On the other hand, the babel command transpiles es6 scripts to es5 correctly.

I have investigated with some sample codes and I posted them to Gist.
Please check them and tell me what is wrong.

https://gist.github.com/suzuki-shunsuke/76aee488e2641114f8f8dd9acacbbae7

I have checked using node v4.4.4 and v6.2.0.

• index.js is a source script
• build-babel.js has been created by npm run babel command
• build-webpack.js has been created by npm run webpack command
• commands I have executed are written in command

By the way, I have used Arch Linux.

How can I transpile es6 scripts to es5 with the webpack command?

[suzuki-shunsuke]

Today I have solved this problem.
I'm sorry but this problem had nothing to do with babel-loader.
webpack.config.babel.js that I have written has been wrong.

Wrong

module.exports = {
  entry: './src/app.js',
  output: {
    path: './bin',
    filename: 'app.bundle.js'
  }

  // This is wrong
  loaders: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
      presets: ['es2015'],
    }
  }]
};

Correct

module.exports = {
  entry: './src/app.js',
  output: {
    path: './bin',
    filename: 'app.bundle.js'
  }

  // correct
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015'],
      }
    }]
  }
};

[ldskywalker]

Thank you, the same issue brought me here. But my situation was I mess the loaders: [] as loaders: {}.

Basically it will cause the loaders won't work but it doesn't throw out any errors.

[shepelevstas]

if I change babel-loader to babel, using webpack 3, I get:

ERROR in Entry module not found: Error: Can't resolve 'babel' in ...
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'babel-loader' instead of 'babel',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-exten
sion-removed

and with babel-loader ES6 is not converted to ES5!
Could anyone have the answer to that popular problem. I've been googling and testing different solutions for several hours, but babel is sure I need es6, while UglifyJs does not understand it.

[loganfsmyth]

That error shows you've misspelled it as bable. If you're having issues with babel-loader being a no-op, you've likely either configured it in the wrong place, configured it quickly, or forgotten to enable any particular Babel presets.

[shepelevstas]

Sorry, the typo is here, when I retyped it here from my console, in console I have proper babel. I'll fix my previous post.

[shepelevstas]

I have a feeling that babel or babel-loader (i'm new to it and not sure), it just ignores my options: { presets: ['es2015']}

[Miss-Git]

I am having the same issue.
My webpack.config.js file:
```
const path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
},
module: {
rules: [
{
use: 'babel-loader',
test: '/.js$/',
exclude: /node_modules/
}
]
}
};

module.exports = config;
````

and my .babelrc file:
{ "presets": ["babel-preset-env"] }

And the dev-dependencies are:
"babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "webpack": "^2.2.0-rc.0"

[loganfsmyth]

@Miss-Git

test: '/\.js$/',

should be

test: /\.js$/,

[Miss-Git]

OOPS! thank you

[elpdrc]

For me, when I have changed webpack config where the babel-loader was used from module.loaders to module.rules the es2015 conversion started working

[wilfredFrancis]

Above solutions isnt working for me..

my weback.config
`const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: ['babel-polyfill', './src/js/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
`
getting the following error. can someone helpout pls
./src/js/views/searchView.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (F:\Programs\Complete JavaScript\10-forkify\node_modules\@babel\traverse\lib\scope\index.js:867:13)
at convertBlockScopedToVar (F:\Programs\Complete JavaScript\10-forkify\node_modulesbabel-plugin-transform-es2015-block-scoping\lib\index.js:139:13)
at PluginPass.VariableDeclaration (F:\Programs\Complete JavaScript\10-forkify\node_modulesbabel-plugin-transform-es2015-block-scoping\lib\index.js:26:9)
at newFn (F:\Programs\Complete JavaScript\10-forkify\node_modules\@babel\traverse\lib\visitors.js:193:21)
at NodePath._call (F:\Programs\Complete JavaScript\10-forkify\node_modules\@babel\traverse\lib\path\context.js:53:20)
at NodePath.call (F:\Programs\Complete JavaScript\10-forkify\node_modules\@babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (F:\Programs\Complete JavaScript\10-forkify\node_modules\@babel\traverse\lib\path\context.js:88:12)
at TraversalContext.visitQueue (F:\Programs\Complete JavaScript\10-forkify\node_modules\@babel\traverse\lib\context.js:118:16)
at TraversalContext.visitSingle (F:\Programs\Complete JavaScript\10-forkify\node_modules\@babel\traverse\lib\context.js:90:19)
at TraversalContext.visit (F:\Programs\Complete JavaScript\10-

forkify\node_modules\@babel\traverse\lib\context.js:146:19)

[loganfsmyth]

@wilfredFrancis That error implies that you're using one of Babel 6's plugins/presets on Babel 7.x.

[wilfredFrancis]

Hi @loganfsmyth I somehow managed to fix the above issue. However, I am now facing a diff error. Pls see below. Can someone help me pls..

my webpack.config

package.jason

[loganfsmyth]

I'm not sure. Perhaps your dependencies are in package.json but haven't been installed?

[wilfredFrancis]

everything is in order in package.json as you can see..

[loganfsmyth]

Totally, but if you look in node_modules is babel-loader in there? Maybe it was added to dependencies but never actually installed.

[wilfredFrancis]

Yeah, I see it. Its there.

Sent from Mail for Windows 10

From: Logan Smyth
Sent: Wednesday, August 29, 2018 11:00 AM
To: babel/babel-loader
Cc: wilfredFrancis; Mention
Subject: Re: [babel/babel-loader] babel-loader does not transpile es6 scriptsto es5 (#249)

Totally, but if you look in node_modules is babel-loader in there? Maybe it was added to dependencies but never actually installed.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[loganfsmyth]

I'm not sure what to say then.

[wilfredFrancis]

Its ok logan, thanks for your time though..

Sent from Mail for Windows 10

From: Logan Smyth
Sent: Wednesday, August 29, 2018 11:04 AM
To: babel/babel-loader
Cc: wilfredFrancis; Mention
Subject: Re: [babel/babel-loader] babel-loader does not transpile es6 scriptsto es5 (#249)

I'm not sure what to say then.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[delino12]

var path = require('path');
var webpack = require("webpack");

module.exports = {
  entry: './src/js/app.js',
  devtool: 'source-map',
    mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'main.min.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015'],
      }
    }]
  }
};

This is up to date webpack config 2018

[nrjchnd2]

@ wilfredFrancis
Did u find any way to solve your issue. I am facing the same.

[wilfredFrancis]

Yes I've fixed the issue. Pls see my bable config and package.json here https://github.com/wilfredFrancis/forkify

[liesahead]

I have a feeling that babel or babel-loader (i'm new to it and not sure), it just ignores my options: { presets: ['es2015']}

But es2015 is the same as es6