"Did not expect server HTML to contain [..]" during dynamic import

[oMatej]

Bug report

Describe the bug

Dynamic import of components with "re-export" by index.js file leads to following warnings:
Warning: Did not expect server HTML to contain a <h2> in <div>.

To Reproduce

1. Create a file which will export many dynamically imported components, i.e.:

• Import one component directly.
• Import other component through index.js with export { default } from './World'

export const Hello = dynamic(import('./Hello/Hello'));
export const World = dynamic(import('./World'));

2. Use both components on page.
3. Run application in development mode with yarn dev / npm run dev.
4. In the browser console there will be mentioned warning.

Here is example repository: https://github.com/oMatej/next-dynamic-import-issue

Expected behavior

Both types of imports should behave the same.

System information

• OS: Ubuntu 18.04.1 LTS
• Version of Next.js: 8.0.4

[jacobrask]

It seems like the only way around this is to make sure all imports in the module you loaded dynamically are also wrapped in dynamic.

[einarlove]

Having the same issue. Hard to pinpoint the problem but it looks like it fails when trying to import something outside its bundle. ¯_(ツ)_/¯

[timneutkens]

Note that it's a bad idea to suppress hydration warnings. It will hide problems in your application.

[cesarvarela]

I'm having the same issue, is this something new to next 8?

[cesarvarela]

Just tried downgrading my project to next 7, and it fixes the issue.

This is happening to me in dev mode, in production seems to be working fine on both 7 and 8.

[timneutkens]

Can you try next@canary?

[jacobrask]

I have done that previously, is something recently released?

[timneutkens]

Yep I think @Timer landed a patch for next/dynamic, not entirely sure if it's directly related, but doesn't hurt to try.

[Timer]

I confirmed this was fixed by my PR, upgrading to the latest canary will fix this.