Issue with the type of dynamic imports for React components

Question

Issue with the type of dynamic imports for React components

Imagine having a dynamic import of a component named PersonalDetailsForm within a multi-step registration component called RegistrationFormSteps.

During the loading process of PersonalDetailsForm, there is a need to access its nested component known as PersonalDetailsForm.Loading to display the loading state.

PersonalDetailsForm.Loading.

const PersonalDetailsForm = () => <h1>Test</h1>;
const PersonalDetailsFormLoader = () => {
  return <>loading...</>;
};

PersonalDetailsForm.Loading = PersonalDetailsFormLoader;
export default PersonalDetailsForm

This component is then imported into the RegistrationFormSteps Component

const PersonalDetailsForm = dynamic(() => import("./personal-details-form"), {
  ssr: false,
  loading: () => <PersonalDetailsForm.Loading />,
});

const loaders = [<TypeSelectionForm.Loading />, <PersonalDetailsForm.Loading />];

In both scenarios, an error message appears:

 
Property 'Loading' does not exist on type 'ComponentType<{}>'.
Property 'Loading' does not exist on type 'ComponentClass<{}, any>'.

UPDATE

The error only arises when components are imported dynamically. Regular imports allow successful referencing of the <Loading/> nested component.

typescript next.js import dynamic

Answer 1

Answer №1

After reviewing your code, it appears that you are trying to display a component based on the current status. To achieve this functionality according to the provided status, you can use the following implementation.

 import React from "react";    
const PersonalDetailsForm = ({ status }) => {
      const PersonalDetailsFormLoader = () => <div>Loading...</div>;
      const PersonalDetailsFormError = () => <div>Error occurred!</div>;
      const PersonalDetailsFormSuccess = () => <div>Success!</div>;
    
      const components = {
        loading: <PersonalDetailsFormLoader />,
        error: <PersonalDetailsFormError />,
        success: <PersonalDetailsFormSuccess />,
      };
    
      return <div>{components[status]}</div>;
    };
    
    export default PersonalDetailsForm;

You can include the above component in your RegistrationFormSteps as shown below.

<PersonalDetailsForm status={"loading"} />

Answer 2

After reviewing your code, it appears that you are trying to display a component based on the current status. To achieve this functionality according to the provided status, you can use the following implementation.

 import React from "react";    
const PersonalDetailsForm = ({ status }) => {
      const PersonalDetailsFormLoader = () => <div>Loading...</div>;
      const PersonalDetailsFormError = () => <div>Error occurred!</div>;
      const PersonalDetailsFormSuccess = () => <div>Success!</div>;
    
      const components = {
        loading: <PersonalDetailsFormLoader />,
        error: <PersonalDetailsFormError />,
        success: <PersonalDetailsFormSuccess />,
      };
    
      return <div>{components[status]}</div>;
    };
    
    export default PersonalDetailsForm;

You can include the above component in your RegistrationFormSteps as shown below.

<PersonalDetailsForm status={"loading"} />

Issue with the type of dynamic imports for React components

Answer №1

Similar questions

Is there a feature in Nextjs similar to the Javascript window.onload function that ensures a webpage is fully loaded before being displayed?

Comparison of URL parameter with property in a filtered array - Next.js/JavaScript

Receive notification indicating that the function is of void type

Connecting one page to another on the same page using Next.js

Updating the state of Formik

Ways to access the req.user object within services

Transform ECMAScript Observable / Zen Observable into RXJS Observable

Troubleshooting Error in Converting a JSX File with Tailwind CSS and Typescript

Jest: Test fails due to import statement in node_module dependency

Guide to generating a dropdown menu and linking it with data received from a server

The 'string[]' type cannot be assigned to the 'string | ParsedUrlQueryInput | null | undefined' type in Next.js and Typescript

Assistance with Optimizing TypeScript - "The depth of type instantiation is overly excessive, potentially leading to an infinite loop. (Error code:

Different methods to efficiently import directives into multiple components without repeating the code

Anonymous function's return type

To effectively manage the form, I must carefully monitor any modifications and update the SAVE button accordingly in an Angular application

Angular2 has encountered a malfunction with the chart feature

Deliver the commitment to the data source connection settings in TypeORM

Exploring Polymorphism in Typescript through Data Model Interfaces

What could be the reason for tsc providing such confusing error messages upon revealing transitive implementation types?

Tips for enabling custom object properties in Chrome DevTools