[英]Webpack Module Parse Error with React
when I try and run my Webpack config it fails with the following errors: 当我尝试运行Webpack配置时,它失败并显示以下错误:
$ webpack
Hash: 826e21c818de1882d366
Version: webpack 1.13.1
Time: 53ms
[0] ./public/js/react/swap-shop.js 0 bytes [built] [failed]
ERROR in ./public/js/react/swap-shop.js
Module parse failed: /Users/work/Development/group-2/public/js/react/swap-shop.js Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (23:6)
at Parser.pp.raise (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.unexpected (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
at Parser.pp.parseExprAtom (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:333:12)
at Parser.pp.parseExprSubscripts (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19)
at Parser.pp.parseMaybeUnary (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17)
at Parser.pp.parseExprOps (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19)
at Parser.pp.parseMaybeConditional (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19)
at Parser.pp.parseMaybeAssign (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19)
at Parser.pp.parseParenAndDistinguishExpression (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:376:28)
at Parser.pp.parseExprAtom (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:307:19)
at Parser.pp.parseExprSubscripts (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19)
at Parser.pp.parseMaybeUnary (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17)
at Parser.pp.parseExprOps (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19)
at Parser.pp.parseMaybeConditional (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19)
at Parser.pp.parseMaybeAssign (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19)
at Parser.pp.parseExpression (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:88:19)
at Parser.pp.parseReturnStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1872:26)
at Parser.pp.parseStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1737:19)
at Parser.pp.parseBlock (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2009:21)
at Parser.pp.parseFunctionBody (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:610:22)
at Parser.pp.parseMethod (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:579:8)
at Parser.pp.parseClassMethod (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2155:23)
at Parser.pp.parseClass (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2140:10)
at Parser.pp.parseStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1733:19)
at Parser.pp.parseTopLevel (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
at Parser.parse (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
at Object.parse (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/Users/work/Development/group-2/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/Users/work/Development/group-2/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/Users/work/Development/group-2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
I'm unsure why this might be happening, here is my config: 我不确定为什么会发生这种情况,这是我的配置:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./public/js/react/swap-shop.js",
output: {
path: __dirname + "/dist",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Then I have my React components that I am actually trying to bundle, here is the swap-shop.js file 然后我有实际上要捆绑的React组件,这是swap-shop.js文件
import VehicleList from './components/vehicle-list.js';
class VehicleContainer extends React.Component {
constructor(props) {
super(props);
this.state = { vehicles: [] };
}
componentWillMount() {
// Make a request for vehicle data
axios.get('/api/models')
.then(response => this.setState({ vehicles: response.data }))
.catch(error => console.log(error));
}
render() {
console.log(this.state.vehicles);
return (
<VehicleList vehicles={this.state.vehicles}/>
)
}
};
ReactDOM.render(
<VehicleContainer />,
document.getElementById('swap-shop-range').getElementsByClassName('react-target')[0]
);
Then I have my VehicleList component: 然后我有我的VehicleList组件:
// Vehicle List Componen
import VehicleDetail from './vehicle-detail';
// Create our component
let VEHICLES = [
{make: 'Volkswagen', model: 'Golf', image: 'https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/a4a40021d1661b474e42ad3aa0419d940601b27f.png'}
];
const VehicleList = (props) => {
// Just add props.vehicle to access API data instead of static
const RenderedVehicles = VEHICLES.map(vehicle =>
<VehicleDetail key={vehicle.make} vehicle={vehicle} />
);
return (
<div className="row-flex center-xs">
{RenderedVehicles}
</div>
);
};
// Export our component
export default VehicleList;
And finally my VehicleDetail component: 最后是我的VehicleDetail组件:
// Vehicle Description Component
const VehicleDetail = (props) => {
return (
<div className="col-flex-md-3 col-flex-sm-4 col-flex-xs-6 col-flex-media-query">
<div className="vehicle-container">
<img src={props.vehicle.image} />
<h4 className="vehicle-title">
{props.vehicle.make}
<span>{props.vehicle.model}</span>
</h4>
<div className="row-flex">
<div className="col-flex-xs-6 btn-container">
<a href="/offers/citigo-colour-edition" className="learn-more-btn">Learn More</a>
</div>
<div className="col-flex-xs-6 btn-container">
<a href="/offers/citigo-colour-edition/make-enquiry" className="test-drive-btn">Test Drive</a>
</div>
</div>
</div>
</div>
);
};
// Export our component
export default VehicleDetail;
My React component hierarchy: 我的React组件层次结构:
public/js/react/
swap-shop.js
components/
vehicle-detail.js
vehicle-list.js
Then I simply include React, ReactDOM and Babel into my page just above the script tag that includes my React code. 然后,我只需在包含我的React代码的脚本标签上方的页面中添加React,ReactDOM和Babel。 When I paste all of the components into my actual html page with one inline script tag they seem to work however when I try to bundle them with webpack I get this error for some reason.
当我使用一个内嵌脚本标签将所有组件粘贴到我的实际html页面中时,它们似乎可以工作,但是当我尝试将其与webpack捆绑在一起时,由于某种原因会出现此错误。 Any idea why this might be happening?
知道为什么会这样吗?
You may need babel-loader, babel-preset-es2015 and babel-preset-react 您可能需要babel-loader,babel-preset-es2015和babel-preset-react
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./public/js/react/swap-shop.js",
output: {
path: __dirname + "/dist",
filename: "scripts.min.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })]};
Read more https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html 阅读更多https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.