next 中报错 window is undefined

[Shunjun]

APILoader 的 defaultProps 中，从 window 上获取 protocol 会导致在 next ssr 时报 window is undefined。 能否添加一个 window 的判断再获取 protocol

[jaywcjlove]

@Shunjun 你可以参考 https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341 类似的解决方法。

[lhr0909]

@Shunjun 提供一个可行的NextJS (v12.2) 加载方法：

// components/react-amap-api-loader.ts

import { ComponentType } from 'react';
import { APILoaderConfig } from '@uiw/react-amap-api-loader';
import dynamic from 'next/dynamic';

export const APILoader: ComponentType<APILoaderConfig> = dynamic(
  () => import('@uiw/react-amap-api-loader').then((mod: any) => mod.APILoader),
  { ssr: false },
);

引入的时候注意需要避免引入整个包，不然api-loader的export又会被加载了。

不需要安装 next-remove-imports。目前NextJS默认可能会用swc编译，所以插件可能会不可用。

[yejinghun]

请问您这个问题解决了吗，我目前也出现了window is undefined.

[yejinghun]

我按照他的方式，还是会出现这个问题。 https://github.com/uiwjs/react-amap/issues/231#issuecomment-1214305089

[jaywcjlove]

@yejinghun https://github.com/uiwjs/next-remove-imports/blob/08f217d11019904074a2ebe99554d7a5262c3d0d/example/esm/pages/index.js#L8-L16 类似的方式处理就好了

[yejinghun]

@jaywcjlove 谢谢，已解决～