[英]React / Webpack - “Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type.”
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: 我正在尝试使用Webpack构建一个简单的React应用程序,但是在Webpack开发服务器上运行时,出现以下错误:
> 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
Here is my Webpack.config.js file contents: 这是我的Webpack.config.js文件的内容:
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 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' app.js文件内容从'react'导入React从'react-dom'导入ReactDOM从'react-router-dom'导入{Switch,BrowserRouter,Route}从'./components/home.js'导入Home
ReactDOM.render((
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home}/>
</Switch>
</BrowserRouter>
),
document.getElementById('app')
)
And below is my folder structure as follows: 下面是我的文件夹结构,如下所示:
I think it might have something to do with your includes
property for your loader: 我认为这可能与您的加载程序的includes
属性有关:
// Here you are telling babel to ONLY transpile client/app.js. One file.
include: [path.resolve(__dirname, 'client/app.js')]
Should be: 应该:
// Instead, it needs to transpile ALL .js files under /client
include: [path.resolve(__dirname, 'client')],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.