ReferenceError: React is not defined 报错解决方法

今天使用 create-react-app 写 demo 的时候遇到了这个问题

还原事故现场:

create-react-app 创建项目后

执行 npm run eject 暴露配置

启动项目就报错了:

小鑫の随笔

搜索了一圈啥收获也没有,最终在官方的 issues 里找到了解决办法

原因是:

jsx 运行时的 webpack 配置会在 eject 时候被删除

所以需要在 package.json 把配置加回来

// package.json
{
  "babel": {
    "presets": [
      [
        "react-app",
        {
          "runtime": "automatic"
        }
      ]
    ]
  }
}

重新启动项目就欧了 没那个报错了

issues 详情:https://github.com/facebook/create-react-app/issues/9882

阅读原文:小鑫の随笔

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 3中,当你在代码中使用了React相关的内容时,会出现"ReferenceError: React is not defined"错误。这是因为Vue 3并不依赖于React,所以React相关的内容无法被识别。这个错误通常是因为你的代码中引入了React相关的库或语法,而Vue 3并不支持这些内容。 要解决这个问题,你可以按照以下步骤进行操作: 1. 检查你的代码,确保没有引入不支持的React相关内容,比如使用了React的组件或语法。 2. 查看你的项目配置文件babel.config.js,并确认是否正确配置了babel。在Vue 3中,不需要配置React相关的内容,可以删除或注释掉与React相关的配置。 3. 如果你使用了Vite来搭建项目,可以尝试添加`@vitejs/plugin-vue-jsx`插件来支持Vue 3中使用类似JSX语法的功能。安装插件可以通过运行`yarn add '@vitejs/plugin-vue-jsx'`命令来实现。 4. 在vite.config.ts文件中,确保已经添加了`vueJsx()`插件,这样就可以支持在Vue 3中使用类似JSX语法的功能。 总结一下,解决"ReferenceError: React is not defined"错误的步骤如下: 1. 检查代码,确保没有引入不支持的React相关内容。 2. 检查babel.config.js文件,删除或注释掉与React相关的配置。 3. 安装并配置`@vitejs/plugin-vue-jsx`插件,以支持在Vue 3中使用类似JSX语法的功能。 这样,你就可以解决"ReferenceError: React is not defined"错误,并成功在Vue 3中运行你的代码了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vite+vue3.0 jsx (tsx) 踩坑报错ReferenceError: React is not defined](https://blog.csdn.net/weixin_44441196/article/details/118727593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [ReferenceError: React is not defined报错解决方案](https://blog.csdn.net/weixin_44461275/article/details/122586214)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值