Reactjs 网页包错误："；您可能需要适当的加载程序来处理此文件类型；

我一直在和react建立一个个人项目，但遇到了一个我找不到答案的错误。Webpack不断发出以下错误消息：

ERROR in ./app/components/Home.js
Module parse failed: 
/Users/LandonKoo/projects/lktheprogrammer/app/components/Home.js Unexpected token (5:10)
You may need an appropriate loader to handle this file type.
| class Home extends Component{
|   render() {
|     return (<h1>Hey!!!! Home!!</h1>);
|   }
| }
@ ./app/src/index.js 11:12-44

我为此被困了好几个小时。任何评论都将不胜感激！

---

谢谢

您需要创建.babelrc文件

//./.babelrc
{
    "presets":[
        "es2015", "react"
    ]
}

或将预设指定为加载程序选项

{
    test : /\.(js|jsx)$/,
    include : APP_DIR,
    exclude : /node_modules/,
    loader : 'babel-loader',
    query: { presets: ['es2015', 'react']}
}

---

同时使用“反应热”加载器，

---

请参考

我的jsx文件有大写的jsx扩展名

测试：/（js | jsx）$/， 找不到大写的JSX，所以需要变成 测试：/（js | jsx | jsx | js）$/

---

或者将大写JSX文件扩展名重命名为小写JSX也可以

I have.babelrc文件，就像您提到的那样。我很抱歉漏掉了。你能想出造成这种情况的其他原因吗？感谢您的回复！：）我已经弄明白了。结果我把部件放错地方了。无论如何谢谢你@你能解释一下你是如何解决这个问题的吗。我也陷入了类似的境地。

//./.babelrc
{
    "presets":[
        "es2015", "react"
    ]
}

{
    test : /\.(js|jsx)$/,
    include : APP_DIR,
    exclude : /node_modules/,
    loader : 'babel-loader',
    query: { presets: ['es2015', 'react']}
}