From afefd41a592d6ae57e2c5860fdd85f4b720daaf0 Mon Sep 17 00:00:00 2001
From: NotNite <hi@notnite.com>
Date: Tue, 8 Oct 2024 09:15:38 -0400
Subject: [PATCH] Document more pitfalls

---
 src/content/docs/ext-dev/pitfalls.md | 32 ++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/content/docs/ext-dev/pitfalls.md b/src/content/docs/ext-dev/pitfalls.md
index 1e0a6aa..0c4a225 100644
--- a/src/content/docs/ext-dev/pitfalls.md
+++ b/src/content/docs/ext-dev/pitfalls.md
@@ -79,3 +79,35 @@ Because of this, you need to make sure the React variable is in scope. `react` i
 const React = require("react");
 const myElement = <span>Hi!</span>;
 ```
+
+## Using the wrong moonlight global
+
+What moonlight global exists depends on the entrypoint:
+
+- Web: `moonlight`
+- Node: `moonlightNode`
+- Host: `moonlightHost`
+
+## Each Webpack module is an entrypoint
+
+Say you were writing a Webpack module that shared some state:
+
+```ts title="myWebpackModule.ts"
+export const someState = 1;
+```
+
+and you wanted to use it in another Webpack module. Do not directly import the Webpack module as a file:
+
+```ts title="otherWebpackModule.ts"
+import { someState } from "./myWebpackModule";
+```
+
+as it will make a copy of the module, duplicating your state and causing issues. Each Webpack module is treated as its own entrypoint, and all imports will be duplicated between them. Instead, import it through the `@moonlight-mod/wp` namespace or use `require`:
+
+```ts title="otherWebpackModule.ts"
+import { someState } from "@moonlight-mod/wp/extension_myWebpackModule";
+// or
+const { someState } = require("extension_myWebpackModule");
+```
+
+See [the page on ESM Webpack modules](/ext-dev/esm-webpack-modules) for how to type the import statement.