create-react-app项目下，组件render（）方法中return返回html元素报错，问题分析与解决

最新推荐文章于 2025-06-04 07:23:59 发布

原创最新推荐文章于 2025-06-04 07:23:59 发布 · 4.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #create-react-app #render(return(); #前端 #bug记录

Error 专栏收录该内容

2 篇文章

订阅专栏

本文解决了一个在Create-React-App项目中，自定义组件在index.js中引用时报错的问题。错误源于组件文件未放置在src目录下，导致babel-react转换器未能处理。通过将组件移动至src目录下，问题得以解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天准备写一个比较复杂点的前端，为了结构清晰明了，就在create-react-app创建的项目下新建了两个包，一个component存放组件的包，一个styles的样式包，但是我在index.js中引用我自己新建的组件时竟然报错了，报错如下：

Error in ./components/LoginComponent.js
Module parse failed: /home/t04886/VScode-worksplace/demo1/components/LoginComponent.js Unexpected token (7:13)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:13)
 @ ./src/index.js 13:22-61

代码删减至最简单时还报错。代码如下：

import React ,{Component}from 'react';
import '/antd/dist/antd.css';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
class LoginComponent extends Component{

    render(){
      return(<div>111</div>);
    }
}

export default LoginComponent;

仔细看了一下，报错在return（）这一行，只要return返回html元素就报错。但是react组件不返回html元素，怎么在浏览器上显示内容呢？

网上搜了一下，都是说return只能返回一个html元素，多个html元素需要用div包起来（....这么简单错我应该是不会犯得...），最后扒拉扒拉react的源码，发现react组件return的结果会被创建为一个html元素，这中间会经过一个createEment操作。所以说我们写的return（<div>xxxx</div>）是错的，但是create-react-app中的例子App.js就是这样写的啊，为什么App.js不会报错，本着打破砂锅问到底的倔性，又扒拉扒拉create-react-app的源码，发现create-react-app尽然偷偷的使用babel-react 给我们的代码转换过！（这也是为什么我们可以在组件代码中使用ES6语法，node.js对ES6语法尚不完全支持，比如说最大的难题import）。转换就转换呗，可是create-react-app只转换项目下src文件下的代码，由于我存放组件的包不在src文件下而是与src平级，所以不会被转换，所以才会报错。

解决办法很简单，将组件包移动到src文件下，就ok了（需要修改引用组件时的导入路径）。为了方便，我讲styles样式包也放在src目录下了，这样其实挺好的，所有的开发代码都在src下，不会显得那么乱。