Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'document is not defined' in next.js #130

Closed
haiifeng opened this issue May 12, 2021 · 9 comments
Closed

'document is not defined' in next.js #130

haiifeng opened this issue May 12, 2021 · 9 comments

Comments

@haiifeng
Copy link

在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
Copy link
Member

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

@haiifeng
Copy link
Author

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

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

jaywcjlove added a commit that referenced this issue May 12, 2021
jaywcjlove added a commit that referenced this issue May 12, 2021
@jaywcjlove
Copy link
Member

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

@xionglongxiang
Copy link

@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 added a commit that referenced this issue May 12, 2021
jaywcjlove added a commit that referenced this issue May 12, 2021
@jaywcjlove
Copy link
Member

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

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

@haiifeng
Copy link
Author

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

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

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

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

@jaywcjlove
Copy link
Member

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

@jaywcjlove jaywcjlove pinned this issue May 14, 2021
@jaywcjlove
Copy link
Member

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
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants