forwardRef error when dynamically importing a module

[matiastucci]

I'm trying to use forwardRef on an external component but ref.current is not the actual ref. Not sure if I'm missing something.

I'm doing:

const Editor = dynamic(() => import("react-markdown-editor-lite"), {
  ssr: false
});

const ForwardedRefEditor = forwardRef((props, ref) => (
  <Editor {...props} ref={ref} />
));

-----

const editorRef = useRef(null);
<ForwardedRefEditor
  ref={editorRef}
  value={content}
  onChange={({ text }) => setContent(text)}
/>

Full code: https://codesandbox.io/s/objective-benz-qh4ec?file=/pages/index.js:63-73

More info: #4957

[matiastucci]

I'm still trying to fix this. Any ideas?

[parkjoon]

hey can you try this for me:

const Editor = dynamic(() => import("react-markdown-editor-lite"), {
  ssr: false
});

const ForwardedRefEditor = forwardRef((props, ref) => (
  <Editor {...props} ref={el => ref = el} /> // <- this is the only line i changed
));

-----

const editorRef = useRef(null);
<ForwardedRefEditor
  ref={editorRef}
  value={content}
  onChange={({ text }) => setContent(text)}
/>

It MIGHT work if you set ref as a function. I had a similar problem and this change worked for me.

If it works can you let me know :)

[matiastucci]

hi! I just tried that and editorRef.current is null 😞

[apecollector]

I'm hitting the same issue

[geminiyellow]

the error is still happen

[1hachem]

getting the same error