Can’t dynamically import component into page.tsx / Next.js

by

Its okay to import component into component but when it comes component into page it gives error…

I’m newbie so thanks for any help.

The way I import

const CodeSampleModal = dynamic(() => import('../../../components/UserFeedbackModal'), {
  ssr: false,
});

error

Argument of type ‘() => Promise<typeof import(“c:/Users/balci/OneDrive/Masa\u00FCst\u00FC/feedback-app/src/components/UserFeedbackModal”)>’ is not assignable to parameter of type ‘DynamicOptions<{}> | Loader<{}>’.
Type ‘() => Promise<typeof import(“c:/Users/balci/OneDrive/Masa\u00FCst\u00FC/feedback-app/src/components/UserFeedbackModal”)>’ is not assignable to type ‘() => LoaderComponent<{}>’.
Type ‘Promise<typeof import(“c:/Users/balci/OneDrive/Masa\u00FCst\u00FC/feedback-app/src/components/UserFeedbackModal”)>’ is not assignable to type ‘LoaderComponent<{}>’.
Type ‘typeof import(“c:/Users/balci/OneDrive/Masa\u00FCst\u00FC/feedback-app/src/components/UserFeedbackModal”)’ is not assignable to type ‘ComponentType<{}> | ComponentModule<{}>’.

at the first import dynamic from nextjs:

import dynamic from 'next/dynamic'

and then:

const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})

and then use:

export default function Home() {
  return <DynamicHeader />
}

ok?

Leave a Comment