cssinjs / cssinjs/jss

TypeError: Cannot read properties of null (reading 'deleteRule')

Open
#1,640 0 comments 6 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

In cypress in UI mode, after a test has finished hovering on some of the commands restores a snapshot of the dom. This often causes this error to be thrown:

```
TypeError: Cannot read properties of null (reading 'deleteRule')
at DomRenderer.replaceRule (jss.esm.js:2000:1)
at StyleSheet.replaceRule (jss.esm.js:1146:1)
at Array.onProcessStyle (jss-plugin-nested.esm.js:87:1)
at PluginsRegistry.onProcessStyle (jss.esm.js:1313:1)
at PluginsRegistry.onProcessRule (jss.esm.js:1303:1)
at StyleSheet.replaceRule (jss.esm.js:1135:1)
at Array.onProcessStyle (jss-plugin-nested.esm.js:87:1)
at PluginsRegistry.onProcessStyle (jss.esm.js:1313:1)
at PluginsRegistry.onProcessRule (jss.esm.js:1303:1)
at StyleSheet.replaceRule (jss.esm.js:1135:1)
```

It seems related to this line:
https://github.com/cssinjs/jss/blob/6d17e19e4f54051ddecf0d1c51c5299fc7d26022/packages/jss/src/DomRenderer.js#L418

The `sheet` property of the element has been set to `null` by the browser. A simple null check here to exit early might well fix the issue.

From what I can tell it originates from MUI's `makeStyles` that changes styles based on props e.g.

```js
makeStyles({
// run when props changes but because of cypress the expected stylesheet has gone...
root: (props) => ({
color: props.a ? '#000' : '#fff'
})
})
```

We are using JSS 10.9.2 from MUI 4.11.4

Thanks
Dave

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.