React/Webpack - “模块解析失败:意外令牌 - 您可能需要适当的加载器来处理此文件类型." [英] React / Webpack - "Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type."

问题描述

我正在尝试使用 Webpack 构建一个简单的 React 应用程序，但是在从 Webpack 开发服务器运行时，我收到以下错误:

I am trying to build a simple React app using Webpack, however during run time from the Webpack dev server I get the following error:

> ERROR in ./client/components/home.js Module parse failed: Unexpected
> token (8:3) You may need an appropriate loader to handle this file
> type. |   render(){ |         return( |           <h1>Hello World!</h1> |         ) |     } 
> @ ./client/app.js 13:12-43  @ multi
> (webpack)-dev-server/client?http://localhost:8080 ./client/app.js

这是我的 Webpack.config.js 文件内容:

Here is my Webpack.config.js file contents:

var path = require('path');
var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');


module.exports = {
    context: __dirname,
    devtool: debug ? 'inline-sourcemap' : null,
    entry: './client/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /(node_modules|bower_components)/,
            include: [path.resolve(__dirname, 'client/app.js')],
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-3'],
                plugins: ['transform-react-jsx']
            }
        }, {
            test: /\.scss$/,
            include: [path.resolve(__dirname, 'sass/style.scss')],
            loaders: ['style-loader' ,'css-loader' ,'sass-loader']
        }]
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: false,
            sourcemap: false
        }),
    ],
};

app.js 文件内容从反应"导入反应从'react-dom' 导入 ReactDOM从react-router-dom"导入 { Switch, BrowserRouter, Route }从'./components/home.js'导入主页

app.js file contents import React from 'react' import ReactDOM from 'react-dom' import { Switch, BrowserRouter, Route } from 'react-router-dom' import Home from './components/home.js'

ReactDOM.render((
     <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home}/>
        </Switch>
     </BrowserRouter>
     ),
     document.getElementById('app')
)

下面是我的文件夹结构如下:

And below is my folder structure as follows:

推荐答案

我认为这可能与您的加载器的 includes 属性有关:

I think it might have something to do with your includes property for your loader:

// Here you are telling babel to ONLY transpile client/app.js. One file.
include: [path.resolve(__dirname, 'client/app.js')]

应该是:

// Instead, it needs to transpile ALL .js files under /client
include: [path.resolve(__dirname, 'client')], 

这篇关于React/Webpack - “模块解析失败:意外令牌 - 您可能需要适当的加载器来处理此文件类型."的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！