在 Next.js 中使用动态渲染组件时出现错误

Question

我正在尝试Leaflet使用 Typescript 在 Next.js 中渲染地图。我读到需要禁用 ssr 以避免“窗口未定义”问题，但在尝试生成地图时：

import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";

export const Leaflet: React.FC = () => {
  return (
    <MapContainer center={{ lat: 48.71291, lng: 44.52693 }} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright%22%3EOpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
};

这是渲染它的：

const Home: NextPage = () => {
  const MapWithNoSSR = dynamic(() => import("../components/Leaflet"), {
    ssr: false,
  });

  return (
    <>
      <MapWithNoSSR/>
    </>
    );
  };

export default Home

TypesSript 给我这个错误：

'() => Promise<typeof import("/src/components/Leaflet")>' 类型的参数不可分配给 'DynamicOptions<{}> | 类型的参数 加载器<{}>'。类型 '() => Promise<typeof import("/src/components/Leaflet")>' 不可分配给类型 '() => LoaderComponent<{}>'。

并且浏览器给出了这个错误：

错误：元素类型无效。收到的承诺解析为：[对象模块]。惰性元素类型必须解析为类或函数。

这里有没有人经历过类似的事情并有一些关于如何解决它的建议？

Answer 1

您收到这些错误是因为您的Leaflet组件是一个命名模块，并且您尝试像默认模块一样访问它。将您的代码更改为如文档所述：

\n

import { NextPage } from "next";\nimport dynamic from "next/dynamic";\n\n// \xe2\x9a\xa0\xef\xb8\x8f: .then() is needed because the component is not exported with the default keyword\nconst MapWithNoSSR = dynamic(\n  () => import("../components/Leaflet").then((module) => module.Leaflet),\n  {\n    ssr: false,\n  }\n);\n\nconst Home: NextPage = () => {\n  return (\n    <>\n      <MapWithNoSSR />\n    </>\n  );\n};\n\nexport default Home;\n

\n

另外，请注意我将动态导入推到了Home.

\n