From 815e24cb78db95a02a4a884d8288e706072bb8d8 Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Thu, 28 Mar 2024 22:24:48 +0800
Subject: [PATCH] docs: about ReferenceError: Element is not defined

---
 src/doc/tutorials/en/012-About debugging.tid          | 11 +++++++++++
 ...5\205\263\344\272\216\350\260\203\350\257\225.tid" | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/doc/tutorials/en/012-About debugging.tid b/src/doc/tutorials/en/012-About debugging.tid
index 6e11fe2..932e93e 100644
--- a/src/doc/tutorials/en/012-About debugging.tid	
+++ b/src/doc/tutorials/en/012-About debugging.tid	
@@ -26,3 +26,14 @@ tags: $:/tags/test-spec
 The `$:/tags/test-spec` tag will mark this tiddler as a test and will be executed when you run `pnpm run test`.
 
 Note that writing tests in the `wiki/tiddlers/tests` folder can only be done with JS; writing tests in plugins can be done with TS, but the tests will be packaged into the plugin, increasing its size.
+
+!! Frequently Asked Questions
+
+!!! Error at startup `ReferenceError: Element is not defined`
+
+This is because one of the libraries you are using only supports browser-side rendering, and you need to make sure that the logic that uses it only runs on the browser side.
+
+You can refer to the whiteboard plugin for this:
+
+# Change the type of the Widget to `module-type: library` [[source|https://github.com/tiddly-gittly/tiddlywiki-whiteboard/blob/master/src/tw-whiteboard/widget.ts.meta]]
+# Write a loader of type Widget `module-type: widget` that loads the plugin when it determines that it's a browser environment [[source|https://github.com/tiddly-gittly/tiddlywiki-whiteboard/blob/master/src/tw-whiteboard/widget-loader.js]]
diff --git "a/src/doc/tutorials/zh/012-\345\205\263\344\272\216\350\260\203\350\257\225.tid" "b/src/doc/tutorials/zh/012-\345\205\263\344\272\216\350\260\203\350\257\225.tid"
index 33fe2b1..28a566e 100644
--- "a/src/doc/tutorials/zh/012-\345\205\263\344\272\216\350\260\203\350\257\225.tid"
+++ "b/src/doc/tutorials/zh/012-\345\205\263\344\272\216\350\260\203\350\257\225.tid"
@@ -26,3 +26,14 @@ tags: $:/tags/test-spec
 `$:/tags/test-spec` 标签会将这个条目标记为测试，并在你执行 `pnpm run test` 的时候被执行。
 
 注意在 `wiki/tiddlers/tests` 文件夹里写测试只能用 JS；在插件里写测试可以用 TS 但是测试会被打包进插件，增大插件体积。
+
+!! 常见问题
+
+!!! 启动时报错 `ReferenceError: Element is not defined`
+
+这是因为你使用的某个库只支持浏览器端渲染，你需要确保使用它的逻辑只在浏览器端运行。
+
+可以参考白板插件的做法：
+
+# 将微件的类型改成 `module-type: library` [[源码|https://github.com/tiddly-gittly/tiddlywiki-whiteboard/blob/master/src/tw-whiteboard/widget.ts.meta]]
+# 写一个加载器，类型是微件 `module-type: widget`，在判断是浏览器环境时再加载插件 [[源码|https://github.com/tiddly-gittly/tiddlywiki-whiteboard/blob/master/src/tw-whiteboard/widget-loader.js]]
\ No newline at end of file