react-markdown支持83版本的Chrome，解决Object.hasOwn is not a function问题

已于 2023-12-05 22:35:29 修改
阅读量2.1k 收藏
点赞数 1
文章标签： react.js javascript 前端
于 2023-10-31 09:29:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013113491/article/details/134133190
版权
博客讲述了在旧版Chrome 83浏览器中，react-markdown使用ES2022的api报错的问题。作者参考相关信息想用bable转换语法但未成功，后查看MarkDown源码，直接修改源码，删除.umi的cache重新编译后，在该版本浏览器上运行正常。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

旧版浏览器支持

react-markdown用了一个ES2022的api，Object.hasOwn测试的时候一切正常，当我切换到生成环境的旧版的83的Chrome之后，发现会报Object.hasOwn is not a function这个错误。

https://github.com/remarkjs/react-markdown/issues/772
在这里插入图片描述

根据作者和报告这个问题的大哥说需要用到bable进行语法的转换。对于我这种菜鸡还是在antd的环境下，搞了一晚上也没明白bable怎么用。所以我看了一下MarkDown的源码，发现他就只有一个位置用到了Object.hasOwn，那就测试直接修改源码

把

if (Object.hasOwn(options, deprecation.from)) {

替换成

if (Object.prototype.hasOwnProperty.call(options, deprecation.from)) {

在这里插入图片描述
删除掉.umi的cache重新编译后，在83的版本上运行正常~

llsxily
关注
【Uncaught(in promise)TypeError:0bject.hasOwn is not a function 报错解决、polyfill 支持Object.hasOwn 低版本浏览器】
weixin_56048772的博客
09-11 936
在项目开发完成后，进行版本测试过程中，更换了浏览器，遇到报错控制台： 报错定位：报错由该项目中使用的插件导致，hasOwn是es2022新语法，旧浏览器不支持。提案方法 与 具有相同的行为。直接修改插件中的源码，相当于去修改了模块，你下次再时还是会被重新覆盖的，当然也可以去搜索如何优雅的修改中的代码而不被覆盖。但此方案，治标不治本。polyfill 支持在不支持的浏览器中，我们需要使用一些回退方式。我们利用 与 的相同行为实现支持方案： 将此js文件放在项目入口文件index.js中，项目初始化时执
Object.hasOwn is not a function
杨晓风 迷迭香的记忆
04-18 2634
web技术兼容性
react-markdown与华为部分手机白屏问题
最新发布
sghu8023的博客
04-11 232
的语法Object.hasOwn报错，原因hasOwn是es6新语法，旧浏览器不支持。
Uncaught(in promise)TypeError:0bject.hasOwn is not a function 报错解决 、polyfill支持
Zhang_DonL的博客
03-11 380
Uncaught(in promise)TypeError:0bject.hasOwn is not a function 报错解决
Object(...) is not a function
qq_42356513的博客
02-28 1176
问题描述 vue项目中发送网络请求的时候,有时候会报错Object(...) is not a function 解决思路 看一下你封装的网络请求的那个模块是不是没ctrl+s保存,也就是你代码是不是没保存？
已解决 Bug: TypeError: Object(...) is not a function (React Hooks) 问题
从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！
09-24 2670
大家好，我是猫头虎博主。在前端开发的世界中，我们时常会遇到各种各样的 Bug。这些 Bug 不仅仅会影响我们代码的执行，而且会消耗我们大量的时间和精力去查找和修复。今天，我将和大家分享一个关于 React Hooks 中遇到的常见错误的解决方法。通过本文，你将了解到这个错误的原因，解决方法，以及如何避免在未来的开发中再次遇到类似的问题。通过深入分析，我们了解了错误的原因，找到了解决方法，并探讨了如何避免在未来遇到类似的问题。
使用gulp 报错 解决办法 TypeError: require.extensions.hasOwnProperty is not a function
YinXiaobo
06-28 4654
使用ES6 做了一个小项目，在使用 gulp 时，报了 TypeError: require.extensions.hasOwnProperty is not a function 检查几遍代码都没有问题，我当时使用的是 8.9.3 的 node ,怀疑是 node 版本造成的问题，科学上网插了一下，有人把 node 降为 6.11.0 解决了问题，就尝试的使用 nvm 又装了一个 6.11.0 ...
react-markdown-editor：一个带有预览的markdown编辑器，由React.js和TypeScript实现
02-04
import MarkdownEditor from ' @uiw/react-markdown-editor ' ; import React from ' react ' ; import ReactDOM from ' react-dom ' ; const Dome = () => ( < MarkdownEditor value = { this . state . ...
react-markdown-remark-directive
04-10
这是react-markdown的插件。 它使用指令格式通过remark-directive轻松地将自定义功能添加到您的markdown中。 如果标记是包含的组件之一，它将呈现元素 使用时，只需在调用ReactMarkdown时添加包含的插件并渲染即可...
create-react-app和electron报错fs.existsSync is not a function
zoepriselife316的博客
05-07 2万+
将create-react-app与electron创建出的一个项目中。React中无法使用electron 当在React中使用require(‘electron’)时就会报 TypeError: fs.existsSync is not a function的错误。 因为React中无法使用Node.js的模块. 所以，百度了下：方案如下 创建renderer.js文件 global.el...
react + electron 使用 react-simplemde-editor 报错 Uncaught TypeError: string.split is not a function
qq_43477721的博客
07-18 1220
Uncaught TypeError: string.split is not a function at splitLinesAuto (codemirror.js:681) at Doc.splitLines (codemirror.js:6461) at Doc.<anonymous> (codemirror.js:6115) at Doc.setValue (codemirror.js:3942) at EasyMDE.push../node_mo
控制台报错object is not a function的解决方法
12-02
今天反馈过来一个BUG，说一个页面的功能用不了。打开控制台发现报错：object is not a function。 感觉很奇怪，这块的功能最新没动过怎么会突然出问题了呢？上线时主流浏览器都测试过了呀。 虽然奇怪，但是还的解决问题。看着代码发现一个radio对象的name属性和一个function name重名了。代码如下： <body> <input type="radio" name="test" onclick="test();"/> <br> <form action=""> <input type="radio" name="test" onclick="test();"/>
React Markdown Preview：将Markdown文本预览转化为React组件
gitblog_00669的博客
12-28 392
React Markdown Preview：将Markdown文本预览转化为React组件 react-markdown-preview React component preview markdown text in web browser. The minimal amount of CSS to replicat...
vue 报错 Object(...) is not a function
热门推荐
Zheng_xinle的博客
08-30 5万+
解决 vue 报错 Object(…) is not a function 在做vue项目的时候 报错TypeError: Object(...) is not a function 找了半天找到了问题所在： 报错描述： 报错原因： 1、data中的数据和methods中的方法重名，解决办法：将名字修改即可 2、引入axios方法时如果没有加双括号{ }也会出现这种错误 错误代码： 正确代码 ： ......
Object.hasOwn“替代“in”操作符
lb6514052的博客
04-15 2651
JavaScript在不断地升级迭代，越来越多的新特性让我们的代码写起来变得简洁有趣，这篇文章会介绍5个新特 1.# 使用"Object.hasOwn"替代“in”操作符 有时，我们想知道对象上是否存在某个属性，一般会使用“in”操作符或“obj.hasOwnProperty”，但它们都有各自的缺陷。 in 如果指定的属性位于对象或其原型链中，“in”运算符将返回true。 const Person = function (age) { this.age = age } Person.pro
vue报错 Object（...）is not a funtion
m0_49789433的博客
09-14 1万+
Object(...) is not a function表示的就是这个对象不是一个函数的意思，这时候我们就要好好检查一下如下细节： 1、函数命名是否是错误的 2、当前界面调用别的引用文件的时候大小写是不是写错了 3. 先去看你用的这个方法是不是一个promise对象，不是promise的话不能.then !! http.post或者http.get都是promise对象 重点:如果不知道如何看的话，直接console.log()一下这个方法就可以知道是否为promise对象 如： ...
object is not afunction错误
soos的博客
12-14 1883
页面执行不了，控制台显示Uncaught TypeError:object is not a function错误，这是很有可能是某个元素的name属性值与函数的函数名重名了，修改一下name值即可。
React markdown 编辑器
且听风吟的博客
04-26 7192
`react-markdown` 是一款 `github` 上开源的适用于 `react` 的 `markdown` 组件，可以基本实现 `markdown` 的功能，且可以根据自己实际应用定制的 `remark` 组件。
基于react的三款稳定好用Markdown格式渲染成HTML插件
weixin_44405693的博客
05-16 4923
最近项目上遇到了展示"大纲文本"内容的需求，前端从后端接收的文本内容为markdown格式，需要转换成HTML格式在页面渲染，具体效果如下：考虑到项目只需要渲染简单的纯色文本格式，并且只渲染展示，不可编辑，所以选择插件的时候，我尽量从稳定、轻量化方向考虑最终选择了三款【react-remarkable】、【marked】、 【react-markdown】，并且对这三款插件作了一个详细的比较，用到这个功能的小伙伴可以自行选择。
react-markdown-editor-lite：轻量级React Markdown编辑器功能解析
React-markdown-editor-lite是一个轻量级的Markdown编辑器组件，它专门为React应用设计，提供了Markdown编辑和实时预览的功能。该编辑器的特点包括轻巧、支持TypeScript、可定制的解析器和可插拔的功能栏，同时还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值