question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
aluminickcommented, Oct 21, 2019

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'
1reaction
maxwaiyakicommented, Jun 9, 2020

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??

Read more comments on GitHub >

github_iconTop Results From Across the Web

Warning: Did not expect server HTML to contain a <div> in <div>
The issue occurs because you're using typeof window !== 'undefined' as a condition to render. This returns different things in the server and ......
Read more >
Expected server HTML to contain a matching <tag> in <tag>
In my case the console error displaying Warning: Expected server HTML to contain a matching <sup> in <span>. using Safari Web Browser in...
Read more >
How to Disable Server-Side Rendering (SSR) in Next.js
Next.js does not work without server-side rendering (SSR) by default. ... Warning: Expected server HTML to contain a matching <div> in <div> ...
Read more >
expected the result of a dynamic import() call. instead received
So you cannot use React.lazy() . Instead i would recommend to import the raw file only where you require it and then render...
Read more >
JavaScript modules - MDN Web Docs
To use bare names on a browser you need an import map, which provides the information needed by the browser to resolve module...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found