TypeScript Error: Argument Type Mismatch in dynamic Import of Editor Component in NextJS project.

[lalitdotdev]

Error Message:

Argument of type '() => Promise<typeof Editor>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.

Issue: Encountered a TypeScript error related to the dynamic import of the Editor component using the dynamic function.

Steps to Reproduce:

1. Attempt to dynamically import the Editor component using the dynamic function.
2. Observe the TypeScript error mentioned above.

Expected Behavior: The dynamic function should correctly infer the return type of the imported Editor component, ensuring compatibility with the specified parameter type.

Actual Behavior: Encountered a TypeScript error indicating a type mismatch between the return type of the dynamic import and the expected parameter type (DynamicOptions<{}> | Loader<{}>).

Environment:

• TypeScript version: 5.0.4
• Next JS Version : 14.1.0,
• React version: 18.2.0

Code Snippet:

const Editor = dynamic(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  { ssr: false },
);

[lalitdotdev]

Only workaround i found was letting TS not enforce strict typing rules on the dynamic import statement by casting the imported Editor component as any.

const Editor = dynamic<{}>(
    () => import("react-draft-wysiwyg").then((mod) => mod.Editor as any),
    { ssr: false },
) as any;

Closing the issue.