remarkjs / react-markdown

Markdown component for React
https://remarkjs.github.io/react-markdown/
MIT License
12.49k stars 849 forks source link

Usage of `Object.hasOwn` breaks web pages on iPad OS (iPad Air, Safari & Chrome) #804

Closed grisha87 closed 5 months ago

grisha87 commented 5 months ago

Initial checklist

Affected packages and versions

react-markdown

Link to runnable example

No response

Steps to reproduce

You would need to create a web page using react-markdown and open it on an iPad Air. Both Safari and Chrome for iOS crash on this particular ssie

Expected behavior

The react based page should load correctly.

Actual behavior

The react app gets broken (displays a white page instead of any content) and the logs point out to the fact that Object.hasOwn is not defined.

AS per https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn, it's supported from Safari 15. I'd like to make use of react-markdown, but it's not usable for my users that would run Safari 14 as a browser.

Runtime

Other (please specify in steps to reproduce)

Package manager

No response

OS

macOS

Build and bundle tools

No response


I could contribute the relevant change from Object.hasOwn to Objet.prototype.hasOwnProperty if that's OK with the maintainers.

wooorm commented 5 months ago

Hey! Modern tools can indeed not be usable in older browsers depending on what you choose to target. Our target (Node 16) is made clear in the docs. A major release is used to update it.

Use tools such as esbuild or babel to target your particular users. Or use older versions.

github-actions[bot] commented 5 months ago

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

ktalebian commented 2 months ago

@wooorm what does "older browser" mean here? What browsers/OS versions are considered old?

ChristianMurphy commented 2 months ago

Again @ktalebian this project targets Node 16.

The closest browser equivalent is Chrome version 90+. All browsers will need some build tools. The older the browser the more polyfills you will need.

Nitpicking at the definition of "new" versus "old" for platforms we don't offer a support matrix for is a waste of time. You can make it work on practically any JS runtime with the right compiler target and polyfills. If you have a question on usage ask it in a Q&A discussion post https://github.com/orgs/remarkjs/discussions/new?category=q-a

joebnb commented 4 weeks ago

same issue happened,is any progress about it?

ChristianMurphy commented 4 weeks ago

@joebnb see the comment before yours. There's nothing to fix at the library level, configure your build tool to work for your browser matrix.

If you have a question on usage ask it in a Q&A discussion post https://github.com/orgs/remarkjs/discussions/new?category=q-a