Question

我尝试了很多方法，我搜索了stackoverflow，仍然无法解决。我是新手。

错误：

ERROR in ./public/js/index.jsx
Module parse failed: /home/m/react/r-chat/front/public/js/index.jsx Line  3: Unexpected token
You may need an appropriate loader to handle this file type.
| /*'use strict';*/
| 
| import React, { Component, ProTypes } from 'react';
| import { Router, Route, IndexRoute, browserHistory, hashHistory } from   'react-router';
| import Avatar from './components/avatar.jsx';

我的webpack文件：

var webpack = require('webpack');

module.exports = {
    entry:  './public/js/index.jsx',
    output: {
    path: './build',
    filename: "bundle.js"
},
module: {
    loaders: [
        {
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015','react']
            }
        }
    ]
},
plugins: [
    new webpack.NoErrorsPlugin()
]
};

Answer 1

您需要.jsx的加载程序。由于您使用的是.jsx文件，因此.js加载器不起作用。

更改

{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015','react']
            }
        }

到

{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015','react']
            }
        }

Answer 2

你在webpack配置的加载器中看到你正在测试js吗？你需要为JSX添加它并为它使用适当的加载器。

babel可以通过babel-loader为您完成此任务：https://github.com/babel/babel-loader

您需要做的就是将x作为测试，如下所示：

loaders: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['es2015','react']
        }
    }
]

webpack错误：您可能需要一个合适的加载程序来处理此文件类型

2 个答案: