uiwjs/react-baidu-map

'document is not defined' in next.js

haiifeng opened this issue · 9 comments

haiifeng commented

在nextjs项目中使用该组件，会报'document is not defined' in '/@uiw/react-baidu-map/lib/cjs/utils'。
加了'if (process.browser)'条件后，报' _interopRequireDefault is not a function' in 's@uiw\react-baidu-map\lib\cjs\APILoader\index.js'
所以现在有点不知所措了，大佬有什么解决办法来兼容ssr后端渲染的不？

jaywcjlove commented

@haiifeng 需要安装 @babel/runtime >= 7.13.7

haiifeng commented

@haiifeng 需要安装 @babel/runtime >= 7.13.7

装了"@babel/runtime": "7.13.7",,还是报相同的错
image

jaywcjlove commented

@haiifeng Upgrade + @uiw/react-baidu-map@1.18.7

xionglongxiang commented

@haiifeng Upgrade + @uiw/react-baidu-map@1.18.7

我升级到1.18.7了。但是还是报这个错。ReferenceError: document is not defined

ReferenceError: document is not defined
at /Users/xlx/test/mmxios/node_modules/@uiw/react-baidu-map/lib/cjs/utils/requireScript.js:10:3
at Object. (/Users/xlx/test/mmxios/node_modules/@uiw/react-baidu-map/lib/cjs/utils/requireScript.js:12:2)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (/Users/xlx/test/mmxios/node_modules/@uiw/react-baidu-map/lib/cjs/index.js:297:22)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at eval (webpack-internal:///@uiw/react-baidu-map:1:18)

jaywcjlove commented

@haiifeng Upgrade + @uiw/react-baidu-map@1.18.8

你可以提供一个可以运行的示例我测试一哈。

haiifeng commented

@haiifeng Upgrade + @uiw/react-baidu-map@1.18.8

你可以提供一个可以运行的示例我测试一哈。

老哥，提了一个PR，兼容了下SSR的情况。

项目刚开始开发，暂时没示例，辛苦老哥跑一下试试：https://www.nextjs.cn/docs/getting-started，跑好demo直接引入地图就行

jaywcjlove commented

#133 Upgrade + @uiw/react-baidu-map@1.18.9

jaywcjlove commented

https://codesandbox.io/s/react-baidu-map-for-nextjs-qsy5t?file=/pages/index.js

@haiifeng

import Link from "next/link";
import { Map, APILoader } from '@uiw/react-baidu-map'
import { useEffect, useState } from "react";

export default function IndexPage() {
  const [maps, setMaps] = useState()
  useEffect(() => {
    setMaps(
      <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
        <Map />
      </APILoader>
    )
  }, [])
  return (
    <div>
      Hello World.{" "}
      <Link href="/about">
        <a>About</a>
      </Link>
      <div style={{ width: '100%', height: '300px' }}>
        {maps}
      </div>
    </div>
  );
}