webpack. Why does the error "Module parse failed You may need an appropriate loader to handle this file type" occur?

Question

webpack

I run webpack and the console outputs:

ERROR in ./bundle.js
Module parse failed: D:\project\frontend\bundle.js Unexpected token (8:1)
You may need an appropriate loader to handle this file type.
|
| render(
| 1,
| document.getElementById('root')
| );

bundle.js :

//import 'babel-polyfill'
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import App, {store} from './App';

render(
  <Provider store={store}>
    <div>1</div>
  </Provider>,
  document.getElementById('root')
);

webpack.config.js :

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "[name].css",
});

module.exports = {
  devtool: 'cheap-source-map',
  context: path.join(__dirname, 'frontend'),
  entry: {
    bundle: "./bundle",
    common: "./common",
    style: './stylesheets/style.scss'
  },
  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js',
    publicPath: '/public/',
  },
  
  resolve: {
    modules: [path.resolve(__dirname, "node_modules"), ],
  },
  
  resolveLoader: {
         modules: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
    },

  module: {
    rules: [
      {
      	test: /\.js?$/,
      	include: /\/frontend/,
      	loader: "babel-loader",
            options: {
                presets: [['es2015', {modules: false}], "es2016", "es2017", "react"],
                plugins: ['transform-runtime'], 
            }
      },
      {
      	test: /\.scss$/,
            use: ["css-loader", "autoprefixer-loader", "sass-loader"],
      },
      {
      	test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
      use: "file?name=[name][hash].[ext]",
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      filename: "[name]",
      minChunks: 2,
    }),
    extractSass,
  ]
}

Answer 1

Perhaps you are using the new version of webpack, but the config is written in the old way.

module:{
  rules:[...]
}

use

module:{
   loader: [...]
}