Leaflet是在一个导入到客户端组件的文件中导入的,那么为什么服务器运行它并抛出这个错误呢?
它实际上在重试后工作,并最终呈现网站罚款。
我尝试在useEffect
中使用动态导入。不行。
ReferenceError: window is not defined
at eval (webpack-internal:///(sc_client)/./node_modules/leaflet/dist/leaflet-src.esm.js:305:17)
at Object.(sc_client)/./node_modules/leaflet/dist/leaflet-src.esm.js (path/to/app.next/server/app/page.js:473:1)
at __webpack_require__ (path/to/app.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(sc_client)/./src/js/index.js:5:89)
at Object.(sc_client)/./src/js/index.js (path/to/app.next/server/app/page.js:1845:1)
at __webpack_require__ (path/to/app.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(sc_client)/./src/components/Foo.jsx:9:70)
at Object.(sc_client)/./src/components/Foo.jsx (path/to/app.next/server/app/page.js:1834:1)
# more logs ...
// app/page.js
import Foo from '@components/Foo';
export default function Base() {
return (
<main>
<Foo />
</main>
);
}
// components/Foo.jsx
'use client';
import { useEffect } from 'react';
import { test } from '../js/index.js';
export default function Foo() {
useEffect(() => {
test();
}, []);
return <div>foo</div>;
}
// js/index.js
// Error thrown here cause calling window
import * as L from 'leaflet/dist/leaflet-src.esm.js';
const test = () => {
console.log(L);
};
export { test };
1条答案
按热度按时间lvjbypge1#
客户端组件中服务器错误的原因在Next.js存储库讨论中的注解中有很好的描述:
客户指令有点混乱。这意味着该组件也在客户端运行。我看到很多材料都说只有。相反,客户端组件就像我们之前写的组件一样。为了从服务器发送一个完整的HTML框架,客户端组件也在服务器上运行!
当您尝试动态导入时,是否指定了
ssr: false
选项?以下是Next.js文档中“没有SSR”一章的例外:要在客户端动态加载组件,可以使用ssr选项禁用服务器呈现。如果外部依赖项或组件依赖于像
window
这样的浏览器API,这很有用。