升级至React 16.2.0后React.Fragment使用报错问题咨询

我将React版本升级至16.2.0后，使用React.Fragment包裹部分组件，代码如下：

import React from 'react';
const CustomerSearch = () => (
  <React.Fragment>
    <Field id="lastname" name="lastname" floatingLabelText="ΕΠΩΝΥΜΟ" floatingLabelStyle={styles.floatingLabelStyle} floatingLabelFocusStyle={styles.floatingLabelFocusStyle} underlineStyle={styles.underlineStyle} underlineFocusStyle={styles.underlineFocusStyle} component={InputTextField} />
    <br />
    <Field id="firstname" name="firstname" floatingLabelText="ΟΝΟΜΑ" floatingLabelStyle={styles.floatingLabelStyle} floatingLabelFocusStyle={styles.floatingLabelFocusStyle} underlineStyle={styles.underlineStyle} underlineFocusStyle={styles.underlineFocusStyle} component={InputTextField} />
    <br />
    <Field id="companyName" name="companyName" floatingLabelText="ΟΝΟΜΑ ΕΤΑΙΡΕΙΑΣ" floatingLabelStyle={styles.floatingLabelStyle} floatingLabelFocusStyle={styles.floatingLabelFocusStyle} underlineStyle={styles.underlineStyle} underlineFocusStyle={styles.underlineFocusStyle} component={InputTextField} />
    <br />
    <Field id="mobile" name="mobile" floatingLabelText="ΚΙΝΗΤΟ" floatingLabelStyle={styles.floatingLabelStyle} floatingLabelFocusStyle={styles.floatingLabelFocusStyle} underlineStyle={styles.underlineStyle} underlineFocusStyle={styles.underlineFocusStyle} component={InputTextField} />
    <br />
    <Field id="generatorSN" name="generatorSN" floatingLabelText="GENERATOR SN" floatingLabelStyle={styles.floatingLabelStyle} floatingLabelFocusStyle={styles.floatingLabelFocusStyle} underlineStyle={styles.underlineStyle} underlineFocusStyle={styles.underlineFocusStyle} component={InputTextField} />
    <br />
  </React.Fragment>
)
export default CustomerSearch

但出现报错：Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of CustomerSearch.
此前使用div包裹组件一切正常，请问该报错原因是什么？

报错原因分析 #

这个错误的核心是**React.Fragment在当前运行环境中是undefined**，导致React无法识别这个组件类型。结合你的场景，大概率是以下两种情况之一：

1. React版本未实际升级到16.2.0
   虽然你说已经升级，但可能存在依赖缓存、版本锁定文件（package-lock.json/yarn.lock）未更新，或者安装过程出错的情况。React.Fragment是16.2.0版本才正式内置到React核心库的，低于这个版本的话React.Fragment会直接返回undefined，自然会触发这个报错。

2. Babel配置未支持Fragment语法
   即使React版本达标，如果你的Babel配置没跟上，也会导致无法解析React.Fragment。比如旧版的babel-preset-react（6.x系列低于6.24.1的版本）没有包含Fragment的语法支持，或者Babel 7的@babel/preset-react未正确配置。

解决方案 #

1. 确认并修复React版本

先在项目根目录执行命令，查看实际安装的React版本：

# npm用户
npm list react
# yarn用户
yarn list react

如果版本低于16.2.0，重新安装指定版本：

npm install react@16.2.0 react-dom@16.2.0 --save
# 或者yarn
yarn add react@16.2.0 react-dom@16.2.0

安装完成后记得删除node_modules和锁定文件，重新安装依赖确保版本生效。

2. 检查并更新Babel配置

• 如果你用的是Babel 6，确保babel-preset-react版本至少为6.24.1：

  npm install babel-preset-react@^6.24.1 --save-dev
  

• 如果你用的是Babel 7，直接安装最新的@babel/preset-react：

  npm install @babel/preset-react --save-dev
  

然后确认你的.babelrc或babel配置文件中包含了react预设：

{
  "presets": ["react"] // Babel 6
  // Babel 7则写：["@babel/preset-react"]
}

3. 临时替代方案

如果暂时无法解决版本或配置问题，可以先用Fragment的短语法<>替代React.Fragment（同样需要React 16.2.0+和支持的Babel），或者继续用<div>包裹组件（虽然会多一层DOM节点，但能快速恢复正常运行）。

内容的提问来源于stack exchange，提问作者RamAlx