Help with Dynamic Import based on getServerSideProps

[germanliu]

Hi, I'd really appreciate some direction to solve this problem. I'd like to import a dynamic component based on props.page.type I get from getServerSideProps. My code is below:

import { getPageBySlug } from '../../utils/pagesApiHelper'
import dynamic from 'next/dynamic'

// this is what I need to be dynamic and the way it is written below doesn't work:
const Content = dynamic(() => import(`../../components/${props.page.type}`))

const Page = ({ page }) => {
    return (
        <div>
            <h1>Some Title</h1>
            <Content />
        </div>
    )
}

export const getServerSideProps = async ({ params: { slug } }) => {
    const page = await getPageBySlug(slug)
    
    return {
        props: {
            page: page
        }
    }
}

export default Page

The following code works, BUT it is not server-side rendered which is something I need:

const Page = ({ page }) => {
    const Content = dynamic(() => import(`../../components/${page.type}`))
    return (
        <div>
            <h1>Some Title</h1>
            <Content />
        </div>
    )
}

Any ideas are greatly appreciated. Thanks in advance!

[bestuiexperience]

I am facing the same issue, and don't have a solution. Have you tried doing a dynamic import the React way instead of the Next JS way? I am wondering whether this will render on the server

import(${path}).then(module => {
//You can store the relevant component in state here and use it later.
});

[bestuiexperience]

I just thought of another idea. Can you do the dynamic import insider getServerSideProps() like this, and then in your page you will already have a prop with the required Content object.

export const getServerSideProps = async ({ params: { slug } }) => {
const page = await getPageBySlug(slug)
const Content = dynamic(() => import(../../components/${page.type}))
return {
props: {
page: page,
content:Content
}
}
}

export default Page

[harbar20]

Has this issue been resolved? I'm having this same issue.

[clovis1122]

Having the same issue!

[guhyeon]

I did below.

export const getServerSideProps = async ()=>{
      const { getSessionTokenCookie, jwtVerify, setSessionTokenCookie } =
        await import('../server/libs/authUtil');
        
}

[AkibMankad]

Having similar issue. Is There any workaround or fix is available that i can try.
I am doing something like this in my index page:

contentData.items.map((component, index) => {
const mappedComponent =
componentMapping[component.componentTemplate.view];
if (!mappedComponent) {
return;
}
const componentPath = componentPathMapping[mappedComponent];
const DynamicComponent = dynamic(
() => import(../components/${componentPath}),
{
ssr: true,
}
);

        return (
          <DynamicComponent
            data={component}
            key={index}
          />
        );
      })}