HTMLElement is not defined

LittleYe233 · November 13, 2024, 8:29am

Hi, I am trying to put a bundled JS library into a plugin. The library uses some HTMLElements and TiddlyWiki complains about it is not defined. I use the latest stable version of TW.

The error message is like below:

Error executing boot module $:/plugins/LittleYe233/TW5-MaterialDesign3/bundle.min.js: ReferenceError: HTMLElement is not defined

ReferenceError: HTMLElement is not defined
    at $:/plugins/LittleYe233/TW5-MaterialDesign3/bundle.min.js:17:701
    at $:/plugins/LittleYe233/TW5-MaterialDesign3/bundle.min.js:1916:259
    at $:/plugins/LittleYe233/TW5-MaterialDesign3/bundle.min.js:1918:4
    at $tw.utils.evalGlobal ($:/boot/boot.js:642:12)
    at $tw.utils.evalSandboxed ($:/boot/boot.js:649:19)
    at $tw.modules.execute ($:/boot/boot.js:931:15)
    at require ($:/boot/boot.js:878:24)
    at $:/plugins/LittleYe233/TW5-MaterialDesign3/widgets/checkbox.js:4:14
    at $:/plugins/LittleYe233/TW5-MaterialDesign3/widgets/checkbox.js:34:3
    at $:/plugins/LittleYe233/TW5-MaterialDesign3/widgets/checkbox.js:35:4

I am a bit confused because HTMLElement exists in the Web APIs (at least it has a page at MDN web docs) and it should be defined in web browsers. So how does it happen and is there any way to fix it?

linonetwo · November 13, 2024, 8:42am

Only run it only on browser:

using

title: $:/plugins/linonetwo/tw-whiteboard/widget-loader.js
type: application/javascript
module-type: widget

(function registerWidgetIIFE() {
  if (!$tw.browser) {
    return;
  }
  try {
    const components = require('$:/plugins/xxx/yyy/widget.js');
    const { widgetClass } = components;
    exports.widgetName = widgetClass;
  } catch (error) {
    console.error('Error loading xxx widget', error);
  }
})();

github.com

tiddly-gittly/tiddlywiki-whiteboard/blob/cd4f0afcb187c7de3e00d196f26c99837fb19bff/src/tw-whiteboard/widget-loader.js

/* eslint-disable @typescript-eslint/no-unsafe-assignment */
(function whiteboardWidgetIIFE() {
  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
  if (!$tw.browser) {
    return;
  }
  // separate the widget from the exports here, so we can skip the require of react code if `!$tw.browser`. Those ts code will error if loaded in the nodejs side.
  try {
    const components = require('$:/plugins/linonetwo/tw-whiteboard/widget.js');
    const { whiteboard } = components;
    /* eslint-disable @typescript-eslint/no-unsafe-member-access */
    exports.whiteboard = whiteboard;
    exports['edit-whiteboard'] = whiteboard;
  } catch (error) {
    console.error('Error loading tw-whiteboard widget', error);
  }
})();

Will also fix “Document is not defined” “can’t read property localStorage of undefined”

LittleYe233 · November 14, 2024, 9:23am

Thanks for your prompt reply. My problem has been solved perfectly after using your solution.