Cannot destructure property 'scrollWidth' of 'i.current' as it is null.

[jcubic]

Got this error from Sentry, because in hook useCodeWordWrap you don't check if the ref is not null. The code even uses ! to disable the check in TypeScript.

 const {scrollWidth, clientWidth} = codeBlockRef.current!;

https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts#L80-L82

The hook is used in theme/CodeBlock/Content/CodeBlockString that I swizzled, but the ref is included in the DOM. I only changed the style attribute of the code when specific language is included.

Any clue why the error is happening? From my understanding, this should throw every time, but it doesn't throw when I tested my website.

Is there a possibility of adding a null check to that hook?

The error happen on Android and mobile Chrome. I was not able to reproduce it.

[slorber]

From my understanding, this should throw every time

IMHO this is not supposed to happen, we expect the ref to be set before the mutation observer fires

Is there a possibility of adding a null check to that hook?

We could but the goal is not to swallow problems and burry. If we add that check, then nobody will ever report us problems we might have, like you did here. Apart from an annoying Sentry warning, does it cause any harm? If not, then you can safely ignore the Sentry warning and just report us a possible bug.

Since the ref being set is an expectation we have, instead of using !, I'm more likely to add the following to fail fast with a clearer error message

if (!codeBlockRef.current) {
  throw new Error("unexpected, the ref isn't set while it should be");
}

It wouldn't solve the Sentry error though, and would just provide a clearer error.

---

It's quite difficult to analyze this bug, but the very first step would probably be to check all your swizzled components. Did you swizzle anything in @theme/CodeBlock/* for example?

[jcubic]

As I said, I swizzled theme/CodeBlock but I only modified CodeBlockString to fix an issue with syntax highlighting on a home page. But the code related to hook and ref didn't change.

I didn't see an option to swizzle just a single file.

From sentry, it looks like the error happen when the user scrolls the code snippet.

[slorber]

CodeBlockString is actually the component I had in mind behind this question, considering it's this component that applies the ref.

Your issue is likely to happen if you don't apply the ref, or if you render the code block element conditionally. Try removing your swizzled code and see if the issue happens again.

I didn't see an option to swizzle just a single file.

You can swizzle CodeBlock/Content/String. If you swizzle more, you can also delete all the files you don't override.