反应-模块解析失败 [英] React - Module parse failed
本文介绍了反应-模块解析失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
从命令行运行webpack时,我整天都遇到此错误:
I've got this error all day when running webpack from command line:
ERROR in ./index.js
Module parse failed: /home/kuro/Workspace/ExpressJS/corate/src/index.js Line 10: Unexpected token <
You may need an appropriate loader to handle this file type.
| render:function(){
| return (
| <div>
| <div className="left">
| <img src={mac}/>
这是我在 index.js
var React=require('react');
var ReactDOM=require('react-dom');
var style=require('../public/css/style.css');
var mac=require('../public/images/img_landing_page_mac.png');
var chrome=require('../public/images/btn_get_chrome.png');
var Content=React.createClass({
render:function(){
return (
<div>
<div className="left">
<img src={mac}/>
</div>
<div className="right">
<h2 style={font-size: '33px', letter-spacing: '5px'}>
Organize <br>Modern Knowledge<br> for Mankind
</h2>
<p style={font-size: '20px', margin-top: '35px', letter-spacing: '4px'}>
Consume, Colect and Revisit <br>Knowledge at Your Fingertips
</p>
<a href="#" style={margin-top: '80px', display: 'inline-block', margin-left: '-17px'}>
<img src={chrome}/>
</a>
</div>
</div>
);
}
});
ReactDOM.render(<Content/>,document.getElementByClassName('container'));
并在 webpack.config.js
中进行配置:
module.exports={
context: __dirname+'/src',
entry:'./index.js',
output:{
path:__dirname+'/static',
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.png$/,
loader:'url?limit=10000'
},
{
test:/\.jpg$/,
loader:'url?limit=10000'
},
{
test:/\.css$/,
loader:'style!css'
}
]
}
}
我不知道这是怎么回事.我在这里想念什么吗?
I couldn't figure out what is wrong with it. Am I missing something here?
推荐答案
您需要添加 babel-loader
,其中带有 反应预设
,请执行以下步骤
You need add babel-loader
, with react preset
, do the following steps
npm i --save-dev babel-loader babel-preset-react babel-preset-es2015
-
添加到
babel-loader
的webpack.config.js
配置中(到loaders:[..]
部分)
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
更新:不建议使用 babel-preset-es2015
, babel-preset-react
,而建议使用
Update: babel-preset-es2015
, babel-preset-react
was deprecated in favor of using @babel/env
and @babel/preset-react
npm i --save-dev babel-loader @babel/core @babel/preset-react @babel/preset-env
- 添加到
babel-loader
的
webpack.config.js
配置中 rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
这篇关于反应-模块解析失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文