Dynamic import issue with CSS modules.

Question

I have Page 1 , Page 2. They are both importing their templates (Components) , Page 1 imports Template 1 with just regular import Page 2 imports Template 2 with dynamic import. Both templates have the same wrapper component - Layout in them. The issue is if i open Page 1 (by entering it's address in browser) and then navigate to Page 2 using next/link, CSS for any component used in Layout component will not be loaded on Page 2, CSS for components that Layout wraps works fine. However if i open Page 2 (by entering it's address in browser) it loads fine and works after navigation in Page 1 also.

I'm on the next version 12.1.6, but i have migrated to latest and it still happens. We use CSS Modules for styling components. It happens only in builded version, 'next dev' works fine. Is there any workaround or maybe someone had this situation?

Code for Page1

export default function Index(props: any) {
    return <Home {...props} />;
}

Code for Page2

export default function DynamicPage(props: any) {
    const PageTemplateToRender = dynamic(() => import('../../templates/nodes/client'));
    return (
        <PageTemplateToRender {...props} />
    );
}

Code for Template 1 on Page 1

export default class Home extends Component<LayoutProps & HomeData> {
    render() {
        return (
            <PageLayout {...this.props} canonical="/">
               ...
            </PageLayout>
        );
    }
}

Code for Template 2 on Page 2

class Client extends Component<LayoutProps<Node> & ClientProps> {
    render() {
        return (
            <>
                <PageLayout {...this.props}>
                ...
                </PageLayout>
            </>
        );
    }
}

PageLayout is basically a bunch of other Components wrapping childrens, can't post it as i hit char limit.

American Black Duck · Answer

bump

Dynamic import issue with CSS modules.

1 Reply