_jsxDevRuntime.jsxDEV is not function

报错原因

项目中存在多个版本的react，某些第三方库使用了jsx runtime，编译成jsxDev, 而项目中使用的是react版本不支持jsx runtime

_jsxDevRuntime.jsxDEV is not function

React编译

从本质上讲，JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖

但真正在浏览器查看编译结果时发现 JSX 没有完全和 React.createElement(component, props, ...children) 画等号，实际上编译结果有可能是两个

• React.createElement(component, props, ...children)
• JSX runtime

JSX runtime

JSX runtime 是一种新的 JSX 转换, react默认是将 JSX 编译成 React.createElement 的形式

编译区别:

// React.createElement
return /*#__PURE__*/ React.createElement(
  "div",
  null,
  "count:" + count,
  /*#__PURE__*/ React.createElement(
    "button",
    {
      onClick: handleClick,
    },
    "click + 1"
  )
);

// JSX runtime
return /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(
  "div",
  {
    children: [
      "count:" + count,
      /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(
        "button",
        {
          onClick: handleClick,
          children: "click + 1",
        }
      ),
    ],
  }
);

解决

使用@babel/preset-react

// .babelrc
// React.createElement
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "classic"
    }]
  ]
}

// .babelrc
// JSX runtime
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

使用jsxFactory

设置 "jsxFactory": "React.createElement" 统一编译