babel-loader: babel-loader does not transpile es6 scripts to es5

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.

By the way, I have used Arch Linux.

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

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 3
  • Comments: 23 (6 by maintainers)

Commits related to this issue

Most upvoted comments

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'],
      }
    }]
  }
};

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

@Miss-Git

test: '/\.js$/',

should be

test: /\.js$/,

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

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

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

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"

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.

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.