Event and CustomEvent polyfills are missing after the Hermes migration?

[shamilovtim]

Description

In 0.69.0, @JoshuaGross added polyfills for W3C Event and CustomEvent.

Now, as of RN 0.71.8 we're using Hermes on iOS and none of the following works:

console.log(Event);
// undefined

console.log(global.Event);
// undefined

console.log(CustomEvent);
// undefined

console.log(global.CustomEvent);
// undefined

Furthermore, neither CustomEvent nor Event nor /EventPolyfill.js seem to be part of the exported namespaces in the type definitions or package discovery so I was unable to try to auto-import these with my editor to see if I can force the implementation of the polyfills from the project myself.

Some questions I have

• What happened to these polyfills? Did they get omitted on accident during the transition to Hermes?
• Is there any plan to bring them back? There seems to be a lot of work to get RN to be more web standards compliant (e.g.. @huntie's metro efforts) and it seems noteworthy that these are missing.
• Could anyone recommend any 3rd party polyfills that we could use in the mean time?

React Native Version

0.71.8

Output of npx react-native info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 21.36 GB / 64.00 GB
    Shell: 3.5.1 - /usr/local/bin/fish
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    Watchman: 2023.05.22.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /Users/admin/.rvm/gems/ruby-2.7.4/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK:
      API Levels: 28, 29, 30, 31, 33
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 33.0.0
      System Images: android-30 | AOSP ATD ARM 64 v8a, android-30 | ARM 64 v8a, android-30 | Google Play Intel x86 Atom, android-31 | Intel x86 Atom_64, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play ARM 64 v8a
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.10121639
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16.1 - /opt/homebrew/opt/openjdk@11/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.8 => 0.71.8
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Using Hermes on iOS:

console.log(Event);
// undefined

console.log(global.Event);
// undefined

console.log(CustomEvent);
// undefined

console.log(global.CustomEvent);
// undefined

Snack, code example, screenshot, or link to a repository

Using Hermes on iOS:

console.log(Event);
// undefined

console.log(global.Event);
// undefined

console.log(CustomEvent);
// undefined

console.log(global.CustomEvent);
// undefined

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.11. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[shamilovtim]

Update: I was able to resolve my situation using the following code:

global.event = require("react-native/Libraries/Events/EventPolyfill").default;

However, I would be interested to know why these aren't being exported and set by default in order to fully understand the tradeoffs of what I'm doing here.

[necolas]

They were added as part of an experimental prototype of support for the EventTarget API, but were recently removed because we're going to redo that API properly at some point in the future. Sorry, but they were not meant for external consumptions

[shamilovtim]

They were added as part of an experimental prototype of support for the EventTarget API, but were recently removed because we're going to redo that API properly at some point in the future. Sorry, but they were not meant for external consumptions

Thank you @necolas. Will these continue to be importable for community use until an alternative polyfill is provided? They've allowed us to move forward for now and I'm not aware of any bugs yet.

[necolas]

They've allowed us to move forward for now

What are you using them for?

[shamilovtim]

They've allowed us to move forward for now

What are you using them for?

A couple of critical sub dependencies were relying on Event / CustomEvent for us

[necolas]

Without the EventTarget dispatching system, how are those polyfills useful? I'm assuming you have a multi-platform app with web dependencies or have been using another JS env with EventTarget implemented? I still don't understand how you're using these polyfills in an RN app

[shamilovtim]

I'm assuming you have a multi-platform app with web dependencies or have been using another JS env with EventTarget implemented? I still don't understand how you're using these polyfills in an RN app

@necolas Unfortunately the implementation details of the sub-dependency that was relying on Event or CustomEvent were abstracted away from me inside of node_modules but now that I've looked at it I will try to explain the circumstances.

One of our dependencies depends on it-parallel created by @achingbrain. Inside of it-parallel on line 3 we see the following line of code:

const CustomEvent = globalThis.CustomEvent ?? Event;

This does indeed use the EventTarget API. This package looks like its intended for both browser and node. I'm not sure I understand why this package is necessary when native JS APIs can probably accomplish all of what this package is doing.

As for how we got away with using this without having EventTarget shimmed? Well it looks like it was necessary to get metro to bundle, but the codepath where EventTarget is undefined probably never gets hit. So you are correct that using this polyfill without EventTarget doesn't do much, other than allow us to compile with metro until the undefined bits get hit.

I appreciate your taking the time to look at this issue. In the mean time, it sounds like React Native users need to shim all of EventTarget rather than just Event. While I've got you, are you aware of an Event / CustomEvent / EventTarget polyfill for use on RN? I see this one: https://github.com/mysticatea/event-target-shim but wanted to tap your expertise if you have any opinions.

[necolas]

Your best option is to stop bundling this code in your native bundles.

[MaxAst]

Hey @shamilovtim, did you manage to use the event-target-shim package you linked? I'm also trying to use a package which relies on EventTarget API, but no success so far. My app instantly crashes with this error: ReferenceError: Property 'Event' doesn't exist, js engine: hermes.

[shamilovtim]

Hey @MaxAst I ended up using a community powered polyfill called event-target-polyfill