前言
在前端开发中，我们经常使用 Babel 来将 ES6+ 的语法转换成浏览器可识别的代码。而在使用 Babel 的 env preset 和 React preset 时，我们可能会遇到 warning 的问题。这篇文章将会介绍如何解决这个问题。
问题描述
使用 Babel 的 env preset 和 React preset 生成的代码中，可能会出现以下 warning：
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, or you might have mixed up default and named imports.
这个 warning 的原因是因为 Babel 的 env preset 和 React preset 都会将 jsx 转换成 React.createElement 的形式，并且默认情况下会添加一个 React 的 import 语句。而如果我们的代码中没有使用到 React，那么这个 import 语句就会被忽略，从而导致 React.createElement 的 type 参数为 undefined。
解决方法
解决这个问题的方法很简单，只需要在 Babel 的配置文件中添加一个 plugins，即可解决这个 warning。
-- -------------------- ---- -------
-
---------- -
--------------------- - ---------- ----- ---
---------------------
--
---------- -
---------------
-
-这个 plugins 的作用是在代码中自动添加一个 require('react') 语句，从而确保 React 的存在。
另外，如果你的代码中确实没有使用到 React，那么可以使用 @babel/preset-react 的 pragma 选项来禁用 React.createElement 的转换。例如：
{
"presets": [
["@babel/preset-env", { "modules": false }],
["@babel/preset-react", { "pragma": "h" }]
]
}这个配置将会将 jsx 转换成 h 函数的形式，从而避免了 React.createElement 的转换。
总结
在使用 Babel 的 env preset 和 React preset 时，可能会出现 React.createElement 的 type 参数为 undefined 的 warning。解决这个问题的方法是在 Babel 的配置文件中添加一个 react-require 的 plugins，或者使用 @babel/preset-react 的 pragma 选项禁用 React.createElement 的转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65efe7452b3ccec22f929037