Next.js中的jsVectorMap和客户端组件中的“未定义元素”

0yg35tkg 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(95)

我尝试在我的新Next.Js应用程序中使用jsvectormap。这是导致错误“ReferenceError：元素在生产开发期间未定义”，并且在开发期间显示在终端中（但应用程序在运行npm run dev时工作）。

'use client';

// @ts-ignore
import jsVectorMap from "jsvectormap";
import "jsvectormap/dist/maps/world.js";
import "./WorldMap.css"
import {useEffect} from "react";

export default function WorldMap() {

    useEffect(() => {
        new jsVectorMap({
            selector: "#map",
            map: 'world',
           
        });
    }, [])
    return (
        <div className='bg-gray-100 h-[500px]'>
            <div  id={'map'}></div>
        </div>
    )
}

字符集
我原以为use client会解决浏览器元素的任何问题，但它似乎不起作用。我尝试使用dynamic，但它返回React组件，在这种情况下无法使用。
有什么想法吗

next.js

来源：https://stackoverflow.com/questions/76788067/jsvectormap-in-next-js-and-element-is-not-defined-in-client-component

1条答案

按热度按时间

8ulbf1ek1#

jsVectorMap似乎不是Next.js和服务器端渲染友好的。And yes, even a client component first renders on the server with Next.js。库似乎在导入时执行浏览器特定的代码。
您可以通过lazy loadingMap来修复您的问题，方法是将其移动到自己的文件中：

// app/page.js

import dynamic from "next/dynamic";

const WorldMap = dynamic(() => import("./WorldMap"), {
  ssr: false,
});

export default function Page() {
  return <WorldMap />;
}

个字符

赞(0）回复(0）举报 2023-08-04

我来回答

Next.js中的jsVectorMap和客户端组件中的“未定义元素”

1条答案

相关问题

热门标签

最新问答