Webpack. Почему возникает ошибка «Module parse failed You may need an appropriate loader to handle this file type»?

Question

[KnightForce]

Запускаю webpack, в консоли выводится:

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

Comments

[dmitry-toster]

KnightForce нашел ваш вопрос через поиск. как решили проблему?

[KnightForce]

dmitry-toster, это было так давно что я уже не помню.

[descrybe]

Возможно, тут проблема в
module: {
rules: [
{
test: /\.js?$/, <----тут поменять на test: /\.(js|jsx)$/,
include: /\/frontend/,
loader: "babel-loader",
options: {
presets: [['es2015', {modules: false}], "es2016", "es2017", "react"],
plugins: ['transform-runtime'],
}
},

Answer 1

[Andrey Dyrkov]

Возможно вы используете новую версию webpack, но конфиг написан по старому.

module:{
  rules:[...]
}

используйте

module:{
   loader: [...]
}

Comments

[Николай Домбровский]

В новом как раз

module:{
  rules:[...]
}