What is the correct way to use forwardRef in a dynamic import in Next.js?

Question

What is the correct way to use forwardRef in a dynamic import in Next.js?

I've been trying to incorporate the forwardRef in my code, but I'm facing some difficulties. Can anyone help me out with this? I'm encountering the following errors:

Property 'forwardedRef' does not exist on type '{}'.
Type '{ forwardedRef: MutableRefObject; }' is not assignable to type 'IntrinsicAttributes'. Property 'forwardedRef' does not exist on type 'IntrinsicAttributes'.

    import type { NextPage } from "next";
    import dynamic from "next/dynamic";
    import { useRef } from "react";
    
    import "react-quill/dist/quill.snow.css";
    
    const ReactQuill = dynamic(
      async () => {
        const { default: RQ } = await import("react-quill");
    
        return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
      },
      {
        ssr: false,
      }
    );
    
    const Home: NextPage = () => {
      const quillRef = useRef(null);
    
      return <ReactQuill forwardedRef={quillRef} />;
    };
    
    export default Home;

typescript next.js typescript-typings

Answer 1

Answer №1

import type { NextPage } from "next";
import dynamic from "next/dynamic";
import { LegacyRef, useRef } from "react";
import ReactQuill from "react-quill";

import "react-quill/dist/quill.snow.css";

interface IWrappedComponent {
  forwardedRef: LegacyRef<ReactQuill>;
}

const QuillNoSSRWrapper = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");

    const QuillJS = ({ forwardedRef, ...props }: IWrappedComponent) => (
      <RQ ref={forwardedRef} {...props} />
    );
    return QuillJS;
  },
  { ssr: false }
);

const HomePage: NextPage = () => {
  const quillNode = useRef<ReactQuill>(null);

  return <QuillNoSSRWrapper forwardedRef={quillNode} />;
};

export default HomePage;

Answer 2

import type { NextPage } from "next";
import dynamic from "next/dynamic";
import { LegacyRef, useRef } from "react";
import ReactQuill from "react-quill";

import "react-quill/dist/quill.snow.css";

interface IWrappedComponent {
  forwardedRef: LegacyRef<ReactQuill>;
}

const QuillNoSSRWrapper = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");

    const QuillJS = ({ forwardedRef, ...props }: IWrappedComponent) => (
      <RQ ref={forwardedRef} {...props} />
    );
    return QuillJS;
  },
  { ssr: false }
);

const HomePage: NextPage = () => {
  const quillNode = useRef<ReactQuill>(null);

  return <QuillNoSSRWrapper forwardedRef={quillNode} />;
};

export default HomePage;

What is the correct way to use forwardRef in a dynamic import in Next.js?

Answer №1

Similar questions

Error encountered: NextJs Docker container unable to run due to permissions issue (sh: next: Permission denied

Eliminate all citation markers in the final compiled result

The index type '{id:number, name:string}' is not compatible for use

Sending a specific object and its corresponding key as parameters to a reusable component in Angular: T[K]

The functionality of ngModel is not functioning properly on a modal page within Ionic version 6

Create an array using modern ES6 imports syntax

Creating a robust setup for integrating nextjs and nestjs within an nx monorepo using pnpm package manager

React - the use of nested objects in combination with useState is causing alterations to the initial

SystemJS TypeScript Project

One-of-a-kind npm module for typescript

Exploring the versatility of adding multiple login pages using NextAuth and accessing specific API routes

Ways to receive a reply from EventEmitter

Troubleshooting: Unable to Open Page with Google Material Button in Angular 5

Is there an alternative method for categorizing dependencies to determine which ones should be included in the deployment?

What is the best way to merge multiple nested angular flattening operators together?

Encountering an issue when trying to download a PDF from an Angular 6 frontend using a Spring Boot API - receiving an error related to

Building upon the foundation: Extending a base component in Angular

Challenges with TypeScript build in DevOps related to Material UI Box Component

The perpetual loop in React context triggered by a setState function within a useEffect block

The useState set function does not seem to be reflecting changes in the variable's value