Can't build NextJS application with library react-draft-wysiwyg

Question

all.

I'm trying implement library react-draft-wysiwyg in my nextjs application. This is my code (by this solution):

import dynamic from 'next/dynamic'
import { EditorProps } from 'react-draft-wysiwyg'
const ReactDraftWysiwyg = dynamic<EditorProps>(() => import('react-draft-wysiwyg').then((mod) => mod.Editor), {
  ssr: false,
})
export default ReactDraftWysiwyg

But when I run npm run build, I obtain this error:

Type error: Argument of type '() => Promise<ComponentClass<EditorProps, any> | FunctionComponent<EditorProps> | ComponentModule<EditorProps> | typeof Editor>' is not assignable to parameter of type 'DynamicOptions<EditorProps> | Loader<EditorProps>'.
  Type '() => Promise<ComponentClass<EditorProps, any> | FunctionComponent<EditorProps> | ComponentModule<EditorProps> | typeof Editor>' is not assignable to type '() => LoaderComponent<EditorProps>'.
    Type 'Promise<ComponentClass<EditorProps, any> | FunctionComponent<EditorProps> | ComponentModule<EditorProps> | typeof Editor>' is not assignable to type 'LoaderComponent<EditorProps>'.
      Type 'ComponentClass<EditorProps, any> | FunctionComponent<EditorProps> | ComponentModule<EditorProps> | typeof Editor' is not assignable to type 'ComponentType<EditorProps> | ComponentModule<EditorProps>'.
        Type 'typeof Editor' is not assignable to type 'ComponentType<EditorProps> | ComponentModule<EditorProps>'.
          Type 'typeof Editor' is not assignable to type 'ComponentClass<EditorProps, any>'.
            Types of property 'contextType' are incompatible.
              Type 'import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").Context<any> | undefined' is not assignable to type 'React.Context<any> | undefined'.
                Type 'import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").Context<any>' is not assignable to type 'React.Context<any>'.
                  The types of 'Provider.propTypes' are incompatible between these types.
                    Type 'import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").WeakValidationMap<import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").ProviderProps<any>> | undefined' is not assignable to type 'React.WeakValidationMap<React.ProviderProps<any>> | undefined'.
                      Type 'import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").WeakValidationMap<import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").ProviderProps<any>>' is not assignable to type 'React.WeakValidationMap<React.ProviderProps<any>>'.
                        Types of property 'children' are incompatible.
                          Type 'import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").Validator<import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").ReactNode> | undefined' is not assignable to type 'React.Validator<React.ReactNode> | undefined'.
                            Type 'import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").Validator<import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").ReactNode>' is not assignable to type 'import("/home/iblasterus/projects/coral/frontend/node_modules/@types/prop-types/index").Validator<React.ReactNode>'.
                              Type 'import("/home/iblasterus/projects/coral/frontend/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").ReactNode' is not assignable to type 'React.ReactNode'.
                                Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
                                  Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

I'm in a quandary. Help is needed. Thank you.

Aleksandr Chernyi · Accepted Answer · 2023-10-16 06:26:44Z

0

This was because I use yarn for load dependencies for my application. When I used npm instead, this problem solved and my application sucefully builded.

answered Oct 16, 2023 at 6:26

Aleksandr Chernyi

3407 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Can't build NextJS application with library react-draft-wysiwyg

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related