Node SSR中MutationObserver垫片失效问题求助

核心原因 #

Node的ES模块导入是静态预解析的——不管你代码里写的import顺序如何，Node会先扫描所有import语句，把所有依赖模块提前加载、解析完毕，才会开始执行当前模块的代码。

你现在的写法是先导入./app/server-rendering.ts再导入lit-labs-ssr，但实际执行顺序是：

• Node先扫描到所有import，优先加载lit-labs-ssr模块，此时该模块内的代码会尝试访问MutationObserver，但全局还没挂载垫片
• 之后才会执行./app/server-rendering.ts里的垫片代码，这时候已经晚了

解决办法 #

方法1：用动态导入保证执行顺序 #

把lit-labs-ssr的导入改成动态导入，这样它的加载会等到垫片代码执行完之后才触发：

// 先执行垫片代码
import './app/server-rendering.ts';

// 动态导入lit-labs-ssr，确保垫片已生效
(async () => {
  const { render } = await import('lit-labs-ssr');
  // 这里执行render相关逻辑
})();

方法2：直接在入口文件最顶部写垫片 #

把垫片逻辑直接放到入口文件的最开头，跳过模块导入的预解析问题：

// 入口文件最顶部直接定义垫片
globalThis.MutationObserver = class MutationObserver {
  constructor(callback: MutationCallback) {}
  observe(target: Node, options: MutationObserverInit) {}
  disconnect() {}
  takeRecords(): MutationRecord[] { return []; }
};

// 再导入lit-labs-ssr
import { render } from 'lit-labs-ssr';
// 后续逻辑

内容的提问来源于stack exchange，提问作者Desperado