Ref not working with SSR

[matiastucci]

I'm using Next.js and importing the component with dynamic and ssr: false. Everything works nice but I'm having an issue with ref.

When I do mdEditor.current.getMdValue() I get TypeError: mdEditor.current.getMdValue is not a function. I tried my code in a regular React app and it works fine, but when I use SSR it's not working.

console.log(mdEditor.current) shows {retry: ƒ} 🤔

Do you know how can I fix it? Thanks

[sylingd]

See this like: https://github.com/vercel/next.js/issues/4957

[matiastucci]

I'm still having the problem. The next.js issue is not exactly like this because in that example the component they are importing is a custom component, in my case I'm importing yours. But I guess it should be fine too...

This is what I'm doing:

import { useRef, forwardRef } from 'react'

const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
  ssr: false,
})

const ForwardedRefComponent = forwardRef((props, ref) => {
  return <MdEditor {...props} ref={ref} />
})

function Test() {
  const mdEditor = useRef(null)
  const mdParser = new MarkdownIt()

  <ForwardedRefComponent
    ref={mdEditor}
    style={{ height: '400px' }}
    value={content}
    onChange={onContentChange}
    renderHTML={(text) => mdParser.render(text)}
  />
}

Do you see anything wrong? Thanks!

[grvv]

did anyone find any solution?

[matiastucci]

I'm doing this: https://github.com/vercel/next.js/issues/4957#issuecomment-783482041 and it's working fine