`forwardRef` error when dynamically importing a module in Next.js

Question

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: https://github.com/vercel/next.js/issues/4957

fcFn · Accepted Answer · 2021-02-23 10:37:29Z

23

You need to wrap your component in a custom component.

Using forwardRef:

Wrap your Editor component:

import React from "react";
import Editor from "react-markdown-editor-lite";

export default function WrappedEditor({ editorRef, ...props }) {
  return <Editor {...props} ref={editorRef} />;
}

And then import it dynamically:

import dynamic from "next/dynamic";
import { useRef, useState, forwardRef } from "react";

const Editor = dynamic(() => import("../WrappedEditor"), {
  ssr: false
});

const ForwardRefEditor = forwardRef((props, ref) => 
  <Editor {...props} editorRef={ref}/>
)

export default function IndexPage() {
  const editorRef = useRef(null);
  const [content, setContent] = useState("");

  console.log("editorRef", editorRef.current);

  return (
    <ForwardRefEditor
      ref={editorRef}
      value={content}
      onChange={({ text }) => setContent(text)}
    />
  );
}

CodeSandbox

You can also use the custom prop approach without using forwardRef.

Custom prop

Wrap your Editor component exactly as in the previous example:

import React from "react";
import Editor from "react-markdown-editor-lite";

export default function WrappedEditor({ editorRef, ...props }) {
  return <Editor {...props} ref={editorRef} />;
}

Pass the custom ref prop to the Editor component:

import dynamic from "next/dynamic";
import { useRef, useState } from "react";

const Editor = dynamic(() => import("../WrappedEditor"), {
  ssr: false
});

export default function IndexPage() {
  const editorRef = useRef(null);
  const [content, setContent] = useState("");

  console.log("editorRef", editorRef.current);

  return (
    <Editor
      editorRef={editorRef}
      value={content}
      onChange={({ text }) => setContent(text)}
    />
  );
}

CodeSandbox

edited Feb 23, 2021 at 10:37

answered Feb 22, 2021 at 18:01

fcFn

4366 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jayarjo Over a year ago

But why? Is there any explanation on why a different approach is required in this case?

Hardcodepunk Over a year ago

@jayarjo When a component is wrapped in next/dynamic the passed ref should be a ref to the imported component, not an instance of nossr.

Collectives™ on Stack Overflow

`forwardRef` error when dynamically importing a module in Next.js

1 Answer 1

Using forwardRef:

Custom prop

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using forwardRef:

Custom prop

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related