Next.js中使用jsvectormap遇‘Element is not defined’错误求助

问题原因 #

即使组件标记了'use client'，Next.js在服务器端预渲染阶段仍会解析组件顶层的模块导入。而jsvectormap的核心代码在导入时会直接访问浏览器专属的Element对象，服务器端环境中不存在这个对象，因此触发错误。开发环境下应用能正常运行是因为客户端hydration后会覆盖服务器端的错误状态，但生产构建时服务器端的错误会导致构建失败。

解决方案 #

方案一：在useEffect中动态导入模块

将jsvectormap和地图文件的导入逻辑放到useEffect内部，确保只有在客户端环境下才加载这些模块：

'use client';

import "./WorldMap.css";
import { useEffect } from "react";

export default function WorldMap() {
  useEffect(() => {
    const initMap = async () => {
      // 动态加载jsvectormap核心库
      const jsVectorMap = (await import("jsvectormap")).default;
      // 动态加载世界地图数据
      await import("jsvectormap/dist/maps/world.js");
      
      // 初始化地图
      new jsVectorMap({
        selector: "#map",
        map: 'world',
      });
    };

    initMap();
  }, []);

  return (
    <div className='bg-gray-100 h-[500px]'>
      <div id={'map'}></div>
    </div>
  );
}

方案二：用dynamic导入组件并禁用SSR

在引用WorldMap组件的地方，使用Next.js的dynamic函数导入，并设置ssr: false，让组件完全在客户端渲染：

// 在父组件或页面中
import dynamic from 'next/dynamic';

// 禁用SSR，组件仅在客户端加载
const WorldMap = dynamic(() => import('./WorldMap'), { ssr: false });

// 正常使用组件
export default function Home() {
  return (
    <div>
      <WorldMap />
    </div>
  );
}

此时WorldMap组件可以保留你原来的代码，但这种方式会让整个组件跳过服务器端渲染，适合不需要SEO的场景。

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