Skip to content

Bug: when used with jsdom-jscore-rn, importing react-dom crashes #25920

@jsnajdr

Description

@jsnajdr

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions