babel-loader doesn't working, es6 code stay un-compiled

Created on 2 May 2017  Â·  6Comments  Â·  Source: babel/babel-loader

this is my config file

{
    entry: path.resolve(__dirname, '../app/index'),
    output: {
        path: path.resolve(__dirname, '../static/js'),
        publicPath: '/js/',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'es2015',
                        ]
                    }
                },
            }
        ]
    }
}

this is part of the result

/***/ function(module, exports) {

    import Vue from 'vue';
    import App from './app.vue';

    new Vue({
        el: '#app',
        render: h => h(App)
    });


/***/ }

And webpack reports no error.

Most helpful comment

@soykje test should be a RegEx, but you've put quotes around it so it will not match any files. You want test: /\.js$/, without the quotes.

All 6 comments

I had the same issue when I updated my build chain… weirdly placing a .babelrc in my folder fixed it…

{
  "presets": [["es2015"]]
}

But it seems weird to need that…

Hi,

I've got quite the same problem. Here is my _webpack.config.js_:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: "/\.js$/",
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env"]
          }
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, "dist")
  }
}

And here, part of my _package.json_:

"dependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.4.0",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  },

I can't figure what's wrong here. I tried the require.resolve tip, with no success, and several others with same result... :cry:

Thx in advance for helping!

@soykje test should be a RegEx, but you've put quotes around it so it will not match any files. You want test: /\.js$/, without the quotes.

OMG... I was looking everywhere but there :confused: Thank you so much @loganfsmyth !

@Jovi is, by chance, your entry file a .vue file instead of a .js? I'm just asking because I see that you're importing .vue files inside your code.

Thanks everyone! I've solve the problem already, it's because I install webpack both inside the project and globally, and accidentally use the wrong version. Just forgot to close the issue.

Was this page helpful?
0 / 5 - 0 ratings