How can I load a component in Nextjs 15 dynamically with next/dynamic without getting the following errors?

Question

I am trying to load a component:

'use client';
import { dynamic } from 'next/dynamic';
import { useFormState } from 'react-dom';
import { postAction } from '@/lib/actions';
import BlogForm from '@/components/blogs/blog-form/blog-form';

const NewBlog = () => {
    const [state, formAction] = useFormState(postAction, { message: null });
    const BlogForm = dynamic(
        import('@/components/blogs/blog-form/blog-form'),
        { ssr: false }
    );
    return (
        <>
            <BlogForm />
        </>
    )
}
export default NewBlog;

However, I get this error as output:

TypeError: (0 , next_dynamic__WEBPACK_IMPORTED_MODULE_1__.dynamic) is not a function

I am not sure what is causing the issue, I have followed the Nextjs docs and I have not come across is anyone else who had this problem?

I am using React 19 & Next 15.

MisiekKisiek · Accepted Answer · 2024-11-06 19:47:39Z

0

You should use default import of dynamic:

import dynamic from 'next/dynamic';

answered Nov 6, 2024 at 19:47

MisiekKisiek

211 bronze badge

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

Collectives™ on Stack Overflow

How can I load a component in Nextjs 15 dynamically with next/dynamic without getting the following errors?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related