Webpack + React：模块解析失败：意外的令牌：您可能需要一个合适的加载器

Question

Stuck with simple ReactJs + Webpack structure initialization. Not sure where I missed but it should be something very silly.

Can someone please spot where is the error or what I am doing wrong?

Simple ReactJs Code: index.js

import React from "react";
import render from "react-dom";

class App extends React.Component {
    render() {
        return <p>hello world</p>;
    }
}

render(<App />, window.document.getElementById('app'));

Webpack Config

import ExtraneousFileCleanupPlugin from 'webpack-extraneous-file-cleanup-plugin';

import manifestPlugin from 'webpack-manifest-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import webpack from 'webpack';
import path from 'path';

let pathsToClean = [   
    'sp/common/css/*.css',
    'sp/common/js/*.js',
];

// the clean options to use
let cleanOptions = {
    root:     path.resolve( __dirname, '../public'),
    exclude:  [],
    verbose:  false,
    dry:      false
};

module.exports = {

    entry: {
        'common/js/index' : [
            './src/js/index.jsx',
        ],
        'common/js/vendor': [
            'react', 'react-dom', 'react-router','axios',
            'redux', 'react-redux', 'redux-logger', 'redux-thunk', 'redux-promise-middleware'
        ],
    },
    output: {
        path: path.resolve(__dirname, '../public/'),
        filename: 'sp/[name].[chunkhash].js'
    },
    module: {
        rules: [
            {

                test: /\.js?$/,
                include: path.resolve(__dirname, './src/js'),
                exclude: [
                    path.resolve(__dirname, './build/'),
                    path.resolve(__dirname, './node_modules/'),
                ],
                loader: 'babel',
                options:{
                    babelrc: false,
                    presets: ['env', 'es2015', 'react', 'stage-2'],
                },
            },
            {
                enforce: "pre",
                test: /\.js?$/,
                include: path.resolve(__dirname, '/../src/js'),
                exclude: [
                    path.resolve(__dirname, '/../build/'),
                    path.resolve(__dirname, '/../node_modules/'),
                ],
                loader: 'eslint-loader',
            },    
        ],
    },

    plugins: [

        new webpack.optimize.CommonsChunkPlugin({
            name: "common/js/common",
            filename: "/sp/common/js/common.[chunkhash].js"
        }),
        new ExtraneousFileCleanupPlugin({
            extensions: ['.js'],
            minBytes: 1000,
            manifestJsonName: '/public/sp.manifest.json',
            paths: [
                'sp/common/css',
                'sp/common/js',
            ]
        }),
        new manifestPlugin({
            'options': {
                writeToFileEmit: true,
            },
            fileName: 'sp.manifest.json',
        }),
        new CleanWebpackPlugin(pathsToClean, cleanOptions), // clean the folders after generating new file
    ],

};

Error :

RROR in ./src/js/index.js
Module parse failed: Unexpected token (13:15)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
|     render() {
|         return <p>hello world</p>;
|     }
| }
 @ multi ./src/js/index.js

Webpack Version: 3.10 React Version: 16.2 React-dom: 16.2

Answer 1

Solved it. My includ , exclude folder for babel-loader and eslint-loader was wrong. Corrected it and its working fine.