Getting following error with dynamic import: Warning: Did not expect server HTML to contain a <div> in <div>.

[Brianvdb]

Bug report

Describe the bug

I am getting the following error when rendering components which are loaded through dynamic imports:
Warning: Did not expect server HTML to contain a <div> in <div>.

Elements render fine but get reloaded/rerendered when reactjs loads.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Start a empty project
2. Create file pages/index.js
3. Paste following code:

import React, {Component} from 'react';
import website from '../src/website';
import dynamic from 'next/dynamic';
import '../styles/index.css';

const map = website.components.reduce((previous, current) => {
    previous[current.path] = dynamic(() => import(`../src/components/${current.path}`), {ssr: true});
    return previous;
}, {});

export default class Page extends Component {

    render() {
        const components = this.renderComponents(['footer']);

        return (
            <>
                <b>hello</b>
                {components}
            </>
        );
    }

    renderComponents(components) {
        const elems = [];
        components.forEach((component, index) => {
            const Comp = map[component];
            elems.push((<Comp key={index}/>));
        });
        return elems;
    }
}

Expected behavior

It should not give a warning and it should not rerender/reload the elements when react loads.

System information

• OS: all
• Browser (if applies) all
• Version of Next.js: tried with v9.0.2 and v9.0.3-canary.5

Additional context

Looks related to #6904 but they say it is fixed. The error still happens though.

[Timer]

Sorry, but we cannot help unless a complete/full reproducible demo is provided.

[aluminick]

This error occurs if you import a component dynamically and regularly on different pages/components.

/pages/foo.js
const Component = dynamic(import('./component')

/pages/bar.js
import Component from './component'

[lednhatkhanh]

This is exactly what's happening to my app right now! Importing the dynamic component in many places will result in this error, can we reopen this issue?

[maxwaiyaki]

This is exactly what's happening to my app right now! Importing the dynamic component in many places will result in this error, can we reopen this issue?

was the above issue solved??

[dalfriedrice]

I am still getting this warning in my console and it break my design with {ssr : true}
Though #8174 seems working for me after moving out my dynamic import from within component and declare it at top

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.