-
Notifications
You must be signed in to change notification settings - Fork 49.2k
Description
React version: 18.2.0
Steps To Reproduce
Install the jsdom-jscore-rn
and react-dom
packages locally and then run this Node.js script:
// create a document with primitive DOM implementation
const jsdom = require('jsdom-jscore-rn');
const document = jsdom.html( '', null, null );
// assign all the browser-ish globals
global.document = document;
global.window = { document };
global.navigator = { userAgent: '' };
// load react-dom and see it crash
require('react-dom');
Importing the react-dom
package will crash:
node_modules/react-dom/cjs/react-dom.development.js:8797
if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
^
TypeError: Cannot use 'in' operator to search for 'WebkitAnimation' in undefined
at getVendorPrefixedEventName (node_modules/react-dom/cjs/react-dom.development.js:8797:58)
at node_modules/react-dom/cjs/react-dom.development.js:8805:21
at Object.<anonymous> (node_modules/react-dom/cjs/react-dom.development.js:29867:5)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:94:18)
at Object.<anonymous> (node_modules/react-dom/index.js:37:20)
What happened? There is the jsdom-jscore-rn
package that provides a very bare-bones implementation of DOM (like jsdom
but much smaller), intended for React Native apps that need to have some DOM available. Typically to please libraries that depend on it, like the hpq
HTML parser lib. The mobile version of the Gutenberg editor uses jsdom-jscore-rn
.
The jsdom-jscore-rn
DOM doesn't support the .style
attribute on elements. Accessing an el.style
returns undefined
, not an instance of CSSStyleDeclaration
. But this confuses react-dom
's getVendorPrefixedEventName
code that will assign the undefined
value to the global style
variable and will try to access its properties with statements like styleProp in style
.
It would be nice if react-dom
could do one additional check on the el.style
attribute before assigning it to the global style
. It would make the package more compatible with--admittedly very strange, but realistic--environments that combine React Native, jsdom-jscore-rn
and react-dom
. Note that we don't even have to use anything from react-dom
to trigger the bug, we're merely importing it. Maybe in some test environment where there's nothing like tree shaking that would remove unused modules.