OfficeJS getOoxml Example Throws Vague Error

I am trying to run this exact code sample for the range.getOoxml method detailed here from within a TypeScript React App loaded as a Word Add-On.

example.js (example code from Word OfficeJS Docs)

// Run a batch operation against the Word object model.
Word.run(function (context) {

    // Queue a command to get the current selection and then
    // create a proxy range object with the results.
    var range = context.document.getSelection();

    // Queue a command to get the OOXML of the current selection.
    var ooxml = range.getOoxml();

    // Synchronize the document state by executing the queued commands,
    // and return a promise to indicate task completion.
    return context.sync().then(function () {
        console.log('The OOXML read from the document was:  ' + ooxml.value);
    });
})
.catch(function (error) {
    console.log('Error: ' + JSON.stringify(error));
    if (error instanceof OfficeExtension.Error) {
        console.log('Debug info: ' + JSON.stringify(error.debugInfo));
    }
});

Running that code produces the following errors that are too vague for me to know what to do with them.

errors.log

Error: {"name":"RichApi.Error","code":"GeneralException","traceMessages":[],"innerError":null,"debugInfo":{"code":"GeneralException","message":"GeneralException","errorLocation":"Range.getOoxml","statement":"selection.getOoxml();","surroundingStatements":["var root=context.root;","var selection=root.getSelection();","// Instantiate {selection}","// >>>>>","selection.getOoxml();","// <<<<<"],"fullStatements":["var root=context.root;","var selection=root.getSelection();","// Instantiate {selection}","selection.getOoxml();"]},"line":24,"column":243848,"sourceURL":"https://appsforoffice.microsoft.com/lib/1.1/hosted/word-mac-16.00.js"}
instrument.js:110

Debug info: {"code":"GeneralException","message":"GeneralException","errorLocation":"Range.getOoxml","statement":"selection.getOoxml();","surroundingStatements":["var root=context.root;","var selection=root.getSelection();","// Instantiate {selection}","// >>>>>","selection.getOoxml();","// <<<<<"],"fullStatements":["var root=context.root;","var selection=root.getSelection();","// Instantiate {selection}","selection.getOoxml();"]}
instrument.js:110

What is going wrong? How can I get this to work?

This same thing was working in my codebase not too long ago when I created this SO answer, but now neither that or this example snippet are working.

so-answer.ts (linked SO answer post)

Word.run(async (context: RequestContext) => {
  const range: Range = context.document.getSelection();
  const ooxml: ClientResult<string> = range.getOoxml();
  context.load(range);
  await context.sync();

  const ooxmlVal = ooxml.value;
  if (ooxmlVal) {

    const lowered = ooxmlVal.toLowerCase();
    const isChart = lowered.includes("excel") && lowered.includes("chart");
    if (isChart) {
      console.log("CURSOR IS ON CHART");
    }
  }
});

That is throwing the following error:

Unhandled Promise Rejection: RichApi.Error: GeneralException
instrument.js:110

Again, super vague, totally unhelpful. So now I just litter the snippet with context.sync() calls wrapped in try/catchs in a last ditch effort to get this to work and it looks like:

littered.ts

    Word.run(async (context: RequestContext) => {
        try {
            await context.sync();
        } catch (e) {
            console.log(e);
        }

        const range: Word.Range = context.document.getSelection();
        try {
            await context.sync();
        } catch (e) {
            console.log(e);
        }

        const ooxml: ClientResult<string> = range.getOoxml();
        context.load(range);

        try {
            await context.sync();
        } catch (e) {
            console.log(e);
        }

        const ooxmlVal = ooxml.value;
        if (ooxmlVal) {

            const lowered = ooxmlVal.toLowerCase();
            const isChart = lowered.includes("excel") && lowered.includes("chart");
            if (isChart) {
                console.log("CURSOR IS ON CHART");
            }
        }
    });

This returns:

littered.logs

[Log] GeneralException: GeneralException (app.618b84ff7477d6aeb4f7.js, line 225089)
[Error] Unhandled Promise Rejection: RichApi.Error: The value of the result object has not been loaded yet. Before reading the value property, call "context.sync()" on the associated request context.
    (anonymous function) (word-mac-16.00.js:24:309999)
    promiseReactionJob
[Log] GeneralException: GeneralException (app.618b84ff7477d6aeb4f7.js, line 225089)
[Error] Unhandled Promise Rejection: RichApi.Error: The value of the result object has not been loaded yet. Before reading the value property, call "context.sync()" on the associated request context.
    (anonymous function) (word-mac-16.00.js:24:309999)
    promiseReactionJob

What am I supposed to do with this?!

EDIT

FURTHERMORE, I have performed a sanity check of sorts by creating a completely new Office/Word project with the Yeoman generator and simply added the example snippet from the Word docs to the click handler. When this is run it gets the EXACT SAME ERRORS.

This proves this is not specific my project/repo.

You can test it yourself with the repo here

EDIT 2

I've now tested across both Mac and Windows and this appears to be a bug introduced in a recent version update. I have now moved to reopen an issue that seems to address this but was closed for inactivity from the initial issue creator. You can monitor that at the url below:

https://github.com/OfficeDev/office-js/issues/998#issuecomment-607394484

Since this has still not been officially declared a bug by OfficeJS team I will leave this SO post open for now.

EDIT 3

OfficeJS team still has not reopened the issue thread I tacked onto so I've created a new one here: https://github.com/OfficeDev/office-js/issues/1097.