next/dynamic import error only when going to build

[rimzzlabs]

Hello, I've done a search for similar discussion, but haven't found the exact same problem

so I have this one component:

-| src
--| components
---| timeline
---| index.ts
---| TimelineList.tsx (this file will be dynamically imported later on)

TimelineList component:

import { twclsx } from '@/libs/twclsx'

import { Timeline } from './Timeline'

import type { Timeline as TimelineType } from 'rizkicitra'

interface TimelineListProps {
  timeline: Array<TimelineType>
}

export const TimelineList: React.FunctionComponent<TimelineListProps> = ({ timeline }) => (
  <ul className={twclsx('pl-2')}>
    {timeline
      .sort((a, b) => (new Date(a.start_date) < new Date(b.start_date) ? 1 : -1))
      .map((data: TimelineType, idx: number) => (
        <Timeline {...data} key={data.title + idx} />
      ))}
  </ul>
)

The index.ts file is just an entry point, it re-export the TimelineList.tsx file

you might want to go to my repo here for a better visual

and then I import the component on pages file later

// pages/about.tsx
const TimelineList = dynamic(() => import('@/components/timeline').then((m) => m.TimelineList), {
  loading: () => <Spinner containerSize='full' spinnerSize='md' containerStyle='h-56' />
})

the file associated with the snippet above here

so everything goes well on dev environment, but when I build it for production, there is appear an error like this:

Failed to compile.
--
17:10:20.822 |  
17:10:20.822 | ./src/pages/about.tsx:12:30
17:10:20.822 | Type error: Argument of type '() => Promise<FunctionComponent<TimelineListProps> \| ComponentClass<never, any> \| FunctionComponent<never> \| { ...; }>' is not assignable to parameter of type 'DynamicOptions<TimelineListProps> \| Loader<TimelineListProps>'.

How can I overcome this? and what is the problem here? thank you 🙏🏻

[icyJoseph]

Hi,

AFAIK, the problem is that the development mode, doesn't crash on TypeScript errors. It is the build step that really wants you to fix them in order to complete. So there's nothing weird going on here, other than that there's an actual TypeScript error in your application at all times.

You can see that my editor does tell me about the error as I am coding. If your editor is not telling you, perhaps read up on how to tell your editor to use TypeScript from your node_modules, and not its built in TypeScript.

Solution

Now onto the TypeScript error. I've seen this in dynamic imports that do not use the default export. It might have to do with actual React Types and the dynamic type function. If you use a default export on the TimelineList file and use the dynamic import as:

const TimelineList = dynamic(() => import('@/components/timeline'), {
  loading: () => <Spinner containerSize='full' spinnerSize='md' containerStyle='h-56' />
});

Then the error goes away.

To be perfectly honest, I do believe there's a bug or non-updated type somewhere in next/dynamic, but I haven't been able to pin-point it. Nope, it is the TypeScript version, using 4.8.2, does not trip this error.

Because this type sleight of hand works:

const TimelineList = dynamic(() =>
  import('@/components/timeline').then<
    typeof import('@/components/timeline').TimelineList
  >((mod) => mod.TimelineList),
{
  loading: () => <Spinner containerSize='full' spinnerSize='md' containerStyle='h-56' />
}
);

If you want to avoid the TypeScript sleight of hand, this should do the trick, I think:

const TimelineList = dynamic(async () => {
  const mod = await import('@/components/timeline');
  return mod.TimelineList;
},
{
  loading: () => <Spinner containerSize='full' spinnerSize='md' containerStyle='h-56' />
}
);

[KhBaterdene]

const Delivery: any = dynamic(() => import("./Delivery")) also works