Can't resolve 'react/jsx-runtime'无法解析jsx-runtime

原因：

react17以前jsx是通过React.createElement编译，17以后引入了jsx-runtime新型编译，在17版本后会自动引入

优势：

可以自行去官网看：

• 使用全新的转换，你可以单独使用 JSX 而无需引入 React。
• 根据你的配置，JSX 的编译输出可能会略微改善 bundle 的大小。

解决：

1. 升级react，react-dom到17，
2. tsconfig配置："jsx": "react-jsx"，

{"jsx": "react-jsx"}

如果还有问题可能就是某些17版本解析脚本有问题，解决办法：

• 升级18，18版本内部添加的webpack的配置（不推荐，可能会影响其他依赖，依赖冲突等等），可以自行去react18源码查看

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 2b1b3bb..745ef7e 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -318,6 +318,10 @@ module.exports = function (webpackEnv) {
         .map(ext => `.${ext}`)
         .filter(ext => useTypeScript || !ext.includes('ts')),
       alias: {
+        // https://github.com/facebook/react/issues/20235
+        // https://github.com/facebook/create-react-app/issues/11769
+        "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
+        "react/jsx-runtime": "react/jsx-runtime.js",
         // Support React Native Web
         'react-native': 'react-native-web',

• webpack配置（推荐）

resolve.fallback={ 
      'react/jsx-runtime':'react/jsx-runtime.js',
      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js'