Dynamic import package throws error | Next.js | Page 1

barren bolt · 2023-01-04T20:57:33.705Z

``` const Toaster = dynamic(() => import('react-hot-toast').then(module => module.Toaster), { ssr: false });``` Why doesn't something like this work? The error is huge ```Type error: Argument of type '() => Promise | FunctionComponent | ComponentModule | FC >' is not assignable to parameter of type 'DynamicOptions | Loader '. Type '() => Promise | FunctionComponent | ComponentModule | FC >' is not assignable to type '() => LoaderComponent '. Type 'Promise | FunctionComponent | ComponentModule | FC >' is not assignable to type 'LoaderComponent '. Type 'ComponentClass | FunctionComponent | ComponentModule | FC ' is not assignable to type 'ComponentType | ComponentModule '. Type 'ComponentClass ' is not assignable to type 'ComponentType | ComponentModule '. Type 'ComponentClass ' is not assignable to type 'ComponentClass '. Types of property 'getDerivedStateFromProps' are incompatible. Type 'GetDerivedStateFromProps | undefined' is not assignable to type 'GetDerivedStateFromProps | undefined'. Type 'GetDerivedStateFromProps ' is not assignable to type 'GetDerivedStateFromProps '. Types of parameters 'nextProps' and 'nextProps' are incompatible. Type 'Readonly ' is not assignable to type 'never'.```

barren bolt Jan 4, 2023, 8:57 PM

#

    ssr: false
  });```

Why doesn't something like this work?

The error is huge
```Type error: Argument of type '() => Promise<ComponentClass<never, any> | FunctionComponent<never> | ComponentModule<never> | FC<ToasterProps>>' is not assignable to parameter of type 'DynamicOptions<ToasterProps> | Loader<ToasterProps>'.
  Type '() => Promise<ComponentClass<never, any> | FunctionComponent<never> | ComponentModule<never> | FC<ToasterProps>>' is not assignable to type '() => LoaderComponent<ToasterProps>'.
    Type 'Promise<ComponentClass<never, any> | FunctionComponent<never> | ComponentModule<never> | FC<ToasterProps>>' is not assignable to type 'LoaderComponent<ToasterProps>'.
      Type 'ComponentClass<never, any> | FunctionComponent<never> | ComponentModule<never> | FC<ToasterProps>' is not assignable to type 'ComponentType<ToasterProps> | ComponentModule<ToasterProps>'.
        Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<ToasterProps> | ComponentModule<ToasterProps>'.
          Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<ToasterProps, any>'.
            Types of property 'getDerivedStateFromProps' are incompatible.
              Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<ToasterProps, any> | undefined'.
                Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<ToasterProps, any>'.
                  Types of parameters 'nextProps' and 'nextProps' are incompatible.
                    Type 'Readonly<ToasterProps>' is not assignable to type 'never'.```

humble mantle Jan 4, 2023, 9:00 PM

#

this is on the client?

barren bolt Jan 4, 2023, 9:12 PM

#

well that error is in VS Code, but I assume the client or build would throw that as well

humble mantle Jan 4, 2023, 9:14 PM

#

can I see more of a view of the code

#

https://stackoverflow.com/questions/68289518/nextjs-dynamic-import-issue

Stack Overflow

NextJS dynamic import issue

I'm facing a really strange issue with dynamic import from NextJS.
I'm importing a component like so:
const Spinner = dynamic(() => import('components/ui/Spinner').then(mod => mod.Spinner))

...

#

should be the solution your looking for hopefully

barren bolt Feb 5, 2023, 6:36 PM

#

humble mantle should be the solution your looking for hopefully

A month later... thanks a bunch!

fallow solstice Feb 5, 2023, 6:51 PM

#

The answer came 2 minutes after you asked the question, you just took a month to read it

#Dynamic import package throws error