.babelrc not working

I have folled a very simple tutorial to set up webpack, babel and react, but get an error with the presets when I use a .babelrc file.

webpack.config.js:

var path = require('path');

module.exports = {
    entry: './src/index.js', // Bundle all assets from this location together
    output: {
        filename: 'bundle.js', // Output to this file
        path: path.resolve( __dirname, 'dist' ) // In this location
    },
    module: {
        rules: [
            { 
                test: /\.(js|jsx|mjs)$/, 
                loader: 'babel-loader',
                exclude: /node_modules/,

            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist")
    }
};

.babelrc:

{
  "presets": ["env", "react"]
}

Gets me the following error:

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (17:12)

  15 |     render() {
  16 |         return (
> 17 |             <div style={ { textAlign: 'center' } }>
     |             ^

If I change my webpack.config.js file to this instead it works:

var path = require('path');

module.exports = {
    entry: './src/index.js', // Bundle all assets from this location together
    output: {
        filename: 'bundle.js', // Output to this file
        path: path.resolve( __dirname, 'dist' ) // In this location
    },
    module: {
        rules: [
            { 
                test: /\.(js|jsx|mjs)$/, 
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist")
    }
};

From my understanding having the options object or a .babelrc file should do the same thing. But only one of them works.

I don’t have a "babel": {} block within my package.json so I really don’t see why it seems that the .babelrc file is not recognized.

[lalitmee]

I have this code in my .babelrc and its working for me.

• .babelrc

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

For more, I have my

• webpack.config.js

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin("semantic/semantic.min.css");

const config = {
  entry: "./app/app.js",
  output: {
    path: path.resolve(__dirname, "public", "js"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: ["babel-loader"],
        exclude: /node_modules/
        // query: {
        //   presets: ["es2015", "react", "stage-0"]
        // }
      },
      {
        test: /\.jsx?$/,
        loaders: ["babel-loader"],

        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader"
            },
            {
              loader: "postcss-loader"
            }
          ]
        })
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000"
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin("styles.css"),
    new webpack.LoaderOptionsPlugin({
      debug: true
    })
  ]
};

module.exports = config;

and

• package.json

{
  "name": "electron-react",
  "productName": "Electron React",
  "version": "1.0.0",
  "description": "Electron React",
  "main": "main.js",
  "scripts": {
    "test": "npm test",
    "start": "electron .",
    "electron": "webpack",
    "watch": "watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose"
  },
  "dependencies": {
    "axios": "^0.9.1",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "classnames": "^2.2.3",
    "css-loader": "^0.28.9",
    "electron-prebuilt": "^0.36.0",
    "electron-reload": "^0.2.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "jquery": "^2.2.3",
    "postcss-loader": "^2.1.0",
    "react": "^0.14.8",
    "react-autocomplete": "^1.0.0-rc2",
    "react-dom": "^0.14.7",
    "react-sound": "^0.4.0",
    "semantic-ui-css": "^2.2.14",
    "semantic-ui-react": "^0.78.2",
    "soundmanager2": "^2.97.20150601-a",
    "style-loader": "^0.20.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0"
  }
}

• for this to workin I have an extra file in my root directory named postcss.config.js which is
• postcss.config.jss

module.exports = {};

I would like to tell you that I am using React with Semantic-ui-react and this configuration is rocking. You can try. If you face any error tell me.

[al-the-x]

From spelunking the same code, it appears that options: { babelrc: true } will also trigger the default behavior. I have no idea why that would not be the default, but hey.