视乎不支持ssr，服务端渲染报window is not defined

[liumin1128]

如题

[Caldis]

谢谢反馈，后续会修复这个问题

[urnotzane]

还没有支持ssr吗

[himadrinath]

@Caldis yes i tired but not supported yet. when will be supported?

[repairearth]

import React, {useRef} from 'react'
import ReactDOM from 'react-dom'
import useMount from 'react-use/lib/useMount'
import Zmage from 'react-zmage'

/**
 * Zmage 不支持 ssr（代码用到 window 和 document），gatsby 构建时会报错，所以包装一下，在 Mount 里面渲染
 * https://www.gatsbyjs.org/docs/debugging-html-builds/
 * @param {*} props
 */
export default function ZmageWrapper(props) {
  const wrapper = useRef(null)

  useMount(() => {
    ReactDOM.render(
      <Zmage {...props} />,
      wrapper.current
    )
  })

  return <div ref={wrapper} />
}

SSR 临时解决方案

[hjtgzh]

1、let CustomZmage 2、componentDidMount(){ CustomZmage=require('react-zmage') } 3、在render里面使用：<CustomZmage />

[StinsonZhao]

Thanks for your info. @repairearth

I use import and it works in gatsby:

import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
import useMount from 'react-use/lib/useMount'

const ImageComp = (props) => {
  const imgwrapper = useRef(null)

  useMount(() => {
    import('react-zmage').then(({ default: Zmage }) => {
      ReactDOM.render(
        <Zmage {...props} />,
       imgwrapper.current
      )
    })
  })

  return <div ref={imgwrapper} />
}

[noodv]

import React, {useRef} from 'react'
import ReactDOM from 'react-dom'
import useMount from 'react-use/lib/useMount'
import Zmage from 'react-zmage'

/**
 * Zmage 不支持 ssr（代码用到 window 和 document），gatsby 构建时会报错，所以包装一下，在 Mount 里面渲染
 * https://www.gatsbyjs.org/docs/debugging-html-builds/
 * @param {*} props
 */
export default function ZmageWrapper(props) {
  const wrapper = useRef(null)

  useMount(() => {
    ReactDOM.render(
      <Zmage {...props} />,
      wrapper.current
    )
  })

  return <div ref={wrapper} />
}

SSR 临时解决方案

ReferenceError: window is not defined 大哥，还是报这个错误啊

[hjtgzh]

import React, {useRef} from 'react'
import ReactDOM from 'react-dom'
import useMount from 'react-use/lib/useMount'
import Zmage from 'react-zmage'

/**
 * Zmage 不支持 ssr（代码用到 window 和 document），gatsby 构建时会报错，所以包装一下，在 Mount 里面渲染
 * https://www.gatsbyjs.org/docs/debugging-html-builds/
 * @param {*} props
 */
export default function ZmageWrapper(props) {
  const wrapper = useRef(null)

  useMount(() => {
    ReactDOM.render(
      <Zmage {...props} />,
      wrapper.current
    )
  })

  return <div ref={wrapper} />
}

SSR 临时解决方案

ReferenceError: window is not defined 大哥，还是报这个错误啊

试下我上面写的那个方案