React Hooks Todo List练习报错：CodeSandbox中找不到'react/jsx-runtime'模块问题咨询

嘿，我之前做React练习的时候也碰到过一模一样的问题！这个报错本质上和React的JSX转换机制以及版本兼容有关，下面给你拆解原因和解决办法：

错误原因 #

• React版本过低：react/jsx-runtime是React 17版本才正式引入的模块，用来实现新的自动JSX转换逻辑。如果你的CodeSandbox项目里安装的React版本低于17，系统自然找不到这个模块。
• JSX转换配置未更新：即使你已经用了React 17+，但如果Babel配置（比如@babel/preset-react）里还停留在runtime: 'classic'的旧设置，也会触发这个错误——因为旧模式不会去调用react/jsx-runtime来处理JSX。
• CodeSandbox模板过时：如果是直接用了比较老旧的React模板新建项目，模板默认的依赖版本和配置可能没跟上React的更新，导致出现兼容性问题。

解决办法 #

• 升级React依赖：打开CodeSandbox的「Dependencies」面板，找到react和react-dom，把版本号改成17.x及以上的稳定版（比如17.0.2或者最新的稳定版本），等待依赖安装完成后刷新页面，报错应该就消失了。
• 调整Babel配置：如果你的项目有自定义Babel配置文件（比如.babelrc或babel.config.json），确保@babel/preset-react的配置里设置了runtime: 'automatic'，示例配置如下：

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

• 重新创建项目：如果觉得上面的步骤麻烦，直接新建一个CodeSandbox的React项目，选最新的React模板（默认就是17+版本），再把你的待办事项代码迁移过去，这样最省心。

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