'document is not defined' in next.js

[haiifeng]

在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]

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

[haiifeng]

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

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

[jaywcjlove]

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

[xionglongxiang]

@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]

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

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

[haiifeng]

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

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

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

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

[jaywcjlove]

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

[jaywcjlove]

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>
  );
}

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341