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

[stefnoten-aca]

I'm getting following error:

TypeError: Cannot read properties of null (reading 'parentElement')
    at Array.Resolver (eval at compile (<projectdir>/node_modules/nwsapi/src/nwsapi.js:773:17), <anonymous>:3:151)
    at match_assert (<projectdir>/node_modules/nwsapi/src/nwsapi.js:1356:13)
    at Object._matches [as match] (<projectdir>/node_modules/nwsapi/src/nwsapi.js:1374:16)
    at exports.matchesDontThrow (<projectdir>/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
    at matches (<projectdir>/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
    at <projectdir>/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
    at Array.forEach (<anonymous>)
    at handleSheet (<projectdir>/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
    at Array.forEach (<anonymous>)
    at exports.forEachMatchingSheetRuleOfElement (<projectdir>/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:46:11)

This occurs in following generated code (see references to comments in the code):

• (1) fails because e is null
• e can be set to null at (3), because n may leak from (2) where it may be null if e.g. no ancestor fieldset is found

(function anonymous(s
) {
  'use strict';
  return function Resolver(c, f, x, r) {
    var e, n, o;
    e = c;
    if ((/(^|\s)mdc-checkbox__checkmark(\s|$)/.test(e.getAttribute('class')))) {
      n = e;
      while ((e = e.parentElement)) { // (1)
        if ((/(^|\s)mdc-checkbox__background(\s|$)/.test(e.getAttribute('class')))) {
          n = e;
          while ((e = e.previousElementSibling)) {
            if ((('form' in e || /^optgroup$/i.test(e.localName)) && 'disabled' in e && 
                     (e.disabled === true || (
                         n = s.ancestor('fieldset', e)) &&   // (2)
                         (n = s.first('legend', n)) && !n.contains(e))
                     )) {
              if ((/(^|\s)mdc-checkbox__native-control(\s|$)/.test(e.getAttribute('class')))) {
                n = e;
                while ((e = e.parentElement)) {
                  if ((/(^|\s)mdc-checkbox(\s|$)/.test(e.getAttribute('class')))) {
                    n = e;
                    while ((e = e.parentElement)) {
                      if ((/(^|\s)mat-mdc-list-option(\s|$)/.test(e.getAttribute('class')))) {
                        r = true;
                      }
                    }
                    e = n;
                  }
                }
                e = n;
              }
            }
          }
          e = n; // (3)
        }
      }
      e = n;
    }
    return r;
  };
});

This code seems to be generated from this CSS:

.mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
    color: #fff;
    color: var(--mdc-checkbox-disabled-selected-checkmark-color, #fff)
}

[owenallenaz]

I believe I'm hitting a very similar situation my rendered html is as follows:

<table>
<tbody>
<tr>
<td>
<span
   class="sc-kvZOFW sc-bbmXgH
   button
   normalButton
   size_medium
   variant_text
   sc-elJkPf gavsFt"
   data-mosaic-id="action_primary_archive"
>
    <button
       class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton- 
       textSizeMedium  css-1e6y48t-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
       type="button"
     >
        Archive
    </button>
</span>
</td>
</tr>
</tbody>
</table>

When I use the following selector it fails: tbody tr:nth-of-type(1) [data-mosaic-id='action_primary_archive'] button. I get the same TypeError: Cannot read properties of null (reading 'parentElement')

[dperini]

@owenallenaz / @stefnoten-aca can you please post a fully reproducible test case so I can fix this ? I need the minimal HTML code and the selector yielding the error to be able to spot and correct the bug. Please specify your environment too (browser, framework, operating system and version of each of these component). Thank you for your help.

[computnik]

@dperini i also have a case like the following

  &:disabled {
      svg path {
          fill: green
      } 
  }

if I use nwsapi, the generated functions reach a state that throws typeError like the one above. Adding a null check like I added in #78 bypasses the error, but it probably ain't the right fix!

[dperini]

@stefnoten-aca @computnik Thank you for reporting this bug. To improve, next time please include a code snippet showing the bug in browsers. This issue should have been resolved by commit 12f9f59c2