Next.js- dynamic import failed to load the component with a variable as module path

Question

`We need to load the component with dynamic import

for eg: we have hello.js component in "component/shared/hello.js"

and we want to load the "hello" component in login component which is at "component/page/login"

`*const path = `components/shared/hello`;
    const DynamicComponent = dynamic(() => import(`${path}`), {
        ssr: false,
    });

return (
        <div>
            <DynamicComponent />
     </div>
    );*`

we got the error as "failed to load the component"

enter image description here as shown below this map doesnt have requested component path so its throwing error, then how do we load component with dynamic import with relative path

enter image description here

Parth Miroliya · Accepted Answer · 2024-05-08 10:14:50Z

0

Instead of using dynamic import with a variable as the module path, use require with a string literal for the path, and include the full relative path to the component file.

const path = 'components/shared/hello'; // Use a string literal for the path

const DynamicComponent = dynamic(() => require(`../../${path}`).then(mod => mod.default), {
    ssr: false,
});

return (
    <div>
        <DynamicComponent />
    </div>
);

and instead of '../../' you can use on which level you have to reach the hello component.

answered May 8, 2024 at 10:14

Parth Miroliya

2981 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Next.js- dynamic import failed to load the component with a variable as module path

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