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:

  1. Property 'forwardedRef' does not exist on type '{}'.

  2. 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;

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;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with mui TextField label width not adjusting properly with font override

Whenever I change the font of the label, the width of the label does not adjust accordingly and the text appears to be outlined. For a demonstration, you can check out this example on CodeSandbox ...

Generating directory for application, only to find TypeScript files instead of JavaScript

While following a tutorial on setting up a react.js + tailwindcss app, I used the command npx create-next-app -e with-tailwindcss [app name]. However, instead of getting javascript files like index.js, I ended up with TypeScript files like index.tsx. You c ...

The not-found.js file in Next.js is displaying an empty page rather than showing a 404 error message

My current project involves using Next.js v13.4.19 with the app router mode. However, I seem to be facing an issue with the not-found.js page located in the app folder. Whenever a non-existing route is accessed, it does not render a 404 page as expected. ...

The dependency that was installed in the node_modules directory is now showing as missing the

I have encountered an issue with 2 TS packages. The first package, project-1, is installed as a dependency in the second package, project-2. While I am able to import and access all type definitions of project-1 in project-2, the dependencies (node_modules ...

How can I incorporate the 'client' application into the 'loading.js' file?

I implemented a Lottie component in my loading.js file. Utilizing the App router (Next13). This is the code for the lottie component: import { Player } from '@lottiefiles/react-lottie-player'; import LoadingLottie from '@/assets/loading.j ...

What is the reason behind TypeScript choosing to define properties on the prototype rather than the object itself?

In TypeScript, I have a data object with a property defined like this: get name() { return this._hiddenName; } set name(value) { ...stuff... this._hiddenName = value; } However, when I look at the output code, I notice that the property is on ...

After retrieving data successfully, the NextAuth Credentials function returns a null value

At this moment, I am facing challenges while integrating the next-auth credentials provider into my system. I am using axios (connecting to a different localhost) to validate the credentials (email & password). The Next.js system runs on http://localhost ...

Customized object property names for an array of generic object types

I am working with an object in Typescript that has a data property structured like this: type MyThing = { data: { options: { myKey: string, myValue: string }[], key: 'myKey', value: 'myValue' } } I want ...

Steps to eliminate the typescript template from create-react-app

Initially, I decided to incorporate TypeScript into my React project, which led me to run the command npx create-react-app my-app --template typescript. However, now I'm looking for a way to revert back and remove TypeScript from my setup. Is there a ...

Whenever I attempt to execute yarn build within next.js, an error always seems to occur

When attempting to compile my next.js project using the yarn build command, an error consistently occurs: Error: Export encountered errors on following paths: /settings at D:\web3\futnft\frontend\node_modules\next\ ...

What could be causing my react-lightbox to not expand to full screen in next.js?

I'm facing an issue in my next.js project where I am unable to view my gallery collection as expected. When clicking on an image, nothing happens as if it's just a regular component being used. Can someone please assist me with this problem? / ...

The Angular 2 UI is unable to successfully connect with the controller through the API call

When attempting to call a URL from Angular 2 using http.get(), an exception is being thrown and the debugger in the controller is not being hit. Although I have checked the proxy and routing, they are the same as my existing projects. This new project is c ...

Mastering the art of effectively capturing and incorporating error data

Is there a way to retain and add information to an Error object in typescript/javascript without losing the existing details? Currently, I handle it like this: try { // code that may throw an error } catch (e) { throw new Error(`Error while process ...

Upcoming authentication credentials

I've been attempting to implement credentials authentication using next-auth. I need to create a custom sign-in page, but after struggling with it for nearly a whole week, I still can't get it to work. Here is some of my code: // [...nextau ...

What steps can I take to prevent encountering a Typescript Error (TS2345) within the StatePropertyAccessor of the Microsoft Bot Framework while setting a property?

During the process of constructing a bot in Typescript, I encountered TS2345 error with Typescript version 3.7.2. This error is causing issues when attempting to create properties dynamically, even if they are undefined, or referencing them in the statePro ...

The error "date.isUtc is not a function" is being thrown by MomentAdapter.js

When setting an initial date value for the MUI DatePicker, I encountered the following error: value.isUTC is not a function ./node_modules/@mui/x-date-pickers/AdapterMoment/AdapterMoment.js/AdapterMoment/this.getTimezone@ The date being passed is: 2024-0 ...

What is the best way to utilize a React type as props for a custom component?

To make my component work properly, I am required to pass the inputmode as props from an external source. The acceptable values for <input inputMode=<valid values>> are outlined in the React types (node_modules@types\react\index.d.ts) ...

What is the preferred method for logging out: using window.location.replace('/') or setting window.location.href to window.location.origin?

When it comes to a logout button, which is the better option: window.location.replace('/') or window.location.href=window.location.origin? Can you explain the difference between these two methods? It's my understanding that both of them remo ...

The attempt to convert the value "[]" to an Array at the specified path "pathname" failed due to a "TypeError" issue

I'm currently building a social media project using next.js and I'm looking to add an unfollow feature to my application. Encountering the following error message --> CastError: Cast to Array failed for value "[]" (type Array) at p ...

Tips for converting a raw SQL query to Knex syntax

Recently delving into the world of development, I've come across knex for the first time. Issue: I have a raw SQL query that is functioning correctly. Now, I'm attempting to utilize knex for this query. To better understand how things operate, I ...