Getting following error with dynamic import: Warning: Did not expect server HTML to contain a <div> in <div>.
See original GitHub issueBug 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:
- Start a empty project
- Create file
pages/index.js
- 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:
- Created 4 years ago
- Reactions:6
- Comments:6 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This error occurs if you import a component dynamically and regularly on different pages/components.
was the above issue solved??