svelte / sapper : ReferenceError: IntersectionObserver is not defined
svelte / sapper : ReferenceError: IntersectionObserver is not defined
我正在使用 svelte-intersection-observer 模块尝试使用 sapper 设置进行延迟加载。当站点首次从节点库介绍页面加载演示代码时，它会在主视图上显示此错误：
500
IntersectionObserver is not defined
ReferenceError: IntersectionObserver is not defined
at eval (webpack:///./node_modules/svelte-intersection-observer/src/IntersectionObserver.svelte?:47:2)
at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1268:22)
at eval (webpack:///./src/routes/index.svelte?:48:175)
at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1268:22)
at Object.default (webpack:///./src/node_modules/@sapper/internal/App.svelte?:35:417)
at eval (webpack:///./src/routes/_layout.svelte?:23:38)
at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1268:22)
at eval (webpack:///./src/node_modules/@sapper/internal/App.svelte?:33:152)
at $$render (webpack:///./node_modules/svelte/internal/index.mjs?:1268:22)
at Object.render (webpack:///./node_modules/svelte/internal/index.mjs?:1276:26)
如果我单击任何其他选项卡并返回到使用交叉点观察器的页面，它会完美运行。我只是不知道如何修复它以使其与 sapper 一起工作。谢谢！
在 Sapper 中，浏览器中加载的第一个页面是 SSR，因此您的代码是在 Node 中执行的。随后的页面更改在浏览器中呈现。因此，如果它在第一页崩溃但在随后的页面更改中起作用，那么看起来您的库在 Node 中不起作用——如果它是一个测量屏幕上的东西的库，这似乎也是意料之中的。在这种情况下，解决方案是将仅浏览器代码放在组件的 onMount 挂钩中，以便它仅在浏览器中运行。
这是 svelte-intersection-observer 中的一个错误 — 需要对其进行修改，使其可以在服务器端渲染中使用而不会崩溃。我建议在 tracker.
上提出问题
我正在使用 svelte-intersection-observer 模块尝试使用 sapper 设置进行延迟加载。当站点首次从节点库介绍页面加载演示代码时，它会在主视图上显示此错误：
500
IntersectionObserver is not defined
ReferenceError: IntersectionObserver is not defined
at eval (webpack:///./node_modules/svelte-intersection-observer/src/IntersectionObserver.svelte?:47:2)
at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1268:22)
at eval (webpack:///./src/routes/index.svelte?:48:175)
at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1268:22)
at Object.default (webpack:///./src/node_modules/@sapper/internal/App.svelte?:35:417)
at eval (webpack:///./src/routes/_layout.svelte?:23:38)
at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1268:22)
at eval (webpack:///./src/node_modules/@sapper/internal/App.svelte?:33:152)
at $$render (webpack:///./node_modules/svelte/internal/index.mjs?:1268:22)
at Object.render (webpack:///./node_modules/svelte/internal/index.mjs?:1276:26)
如果我单击任何其他选项卡并返回到使用交叉点观察器的页面，它会完美运行。我只是不知道如何修复它以使其与 sapper 一起工作。谢谢！
在 Sapper 中，浏览器中加载的第一个页面是 SSR，因此您的代码是在 Node 中执行的。随后的页面更改在浏览器中呈现。因此，如果它在第一页崩溃但在随后的页面更改中起作用，那么看起来您的库在 Node 中不起作用——如果它是一个测量屏幕上的东西的库，这似乎也是意料之中的。在这种情况下，解决方案是将仅浏览器代码放在组件的 onMount 挂钩中，以便它仅在浏览器中运行。
这是 svelte-intersection-observer 中的一个错误 — 需要对其进行修改，使其可以在服务器端渲染中使用而不会崩溃。我建议在 tracker.
上提出问题