You may need an appropriate loader to handle this file type with babel/webpack2/react

Question

I'm currently trying to get webpack 2 working with babel and react.

Heres my webpack.config.js:

'use strict';

module.exports = [
  {
    entry: './src/client/app/private.jsx',
    output: {
      path: './',
      filename: './src/client/private/bundle.js'
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
      rules: [
        {
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['es2015', { modules: false }],
                  ['es2016', { modules: false }],
                  'react'
                ],
              }
            },
          ],
          exclude: /node_modules/
        }
      ]
    }
  }
];

.babelrc:

{
  "presets": [
    "es2015",
    "es2016",
    "react"
  ],
  "plugins": [
    "transform-react-jsx",
    "transform-regenerator"
  ]
}

And the error:

ERROR in ./src/client/app/private.jsx
Module parse failed: /home/karl/dev/node/project/src/client/app/private.jsx Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| import Index from './containers/Index/index.jsx';
| 
| ReactDOM.render(<Index />, document.getElementById('root'));

Answer 1

My suggestion would be to clone this starter: https://github.com/alicoding/react-webpack-babel and then identify the variances. Also, not sure if it's as simple as removing the enclosing square brackets in your module.exports, but I've never seen that before. It's usually just

module.exports = {
    //...
}

Answer 2

You have omitted the test property of your rule

rules: [
  {
    test: /\.jsx$/,
    use: [
      {
        loader: 'babel-loader',
        /*
          your loader options
        */
      },
    ],
    exclude: /node_modules/
  }
]

That might be the main issue but there are also others you may want to consider:

On output property you should use path for the path to output bundle, and filename only for the name of the bundle, as it indicates so.

output: {
  path: path.resolve(__dirname, src/client/private),
  filename: 'bundle.js'
},

You also have to remove the empty string '' from your resolve.extensions . In webpack 2 it's not required anymore.

resolve: {
  extensions: ['.js', '.jsx']
},

If you want to export multiple configurations for different targets you can use an array of config objects, otherwise you should export your single config object.

module.exports = {
...
}

You can find more information on migrating to v2 here: Migrating from v1 to v2