Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

572
Views
Dynamically import one Icon using icon-name from react-icons in nextjs/typescript

I'm trying to dynamically import an icon from react-icons following the this Nextjs instructions but I get an error.

This is my code:

import React, { Suspense } from 'react';
import dynamic from 'next/dynamic';

interface IconProps {
    name: string;
}

function Icon({ name }: IconProps) {
    const MyIcon = dynamic(() => import('react-icons/fi/index.js').then((mod) => mod[name]), {suspense: true});

    return (
        <Suspense fallback={`Loading...`}>
            <MyIcon />
        </Suspense>
    );
}

export default Icon

This is the error:

Argument of type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
  Type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to type '() => LoaderComponent<{}>'.
    Type 'Promise<IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to type 'LoaderComponent<{}>'.
      Type 'IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
        Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
          Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
            Types of property 'getDerivedStateFromProps' are incompatible.
              Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
                Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
                  Types of parameters 'nextProps' and 'nextProps' are incompatible.
                    Type 'Readonly<{}>' is not assignable to type 'never'.ts(2345)

What am I doing wrong?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!