HMR doesn't work when dynamic component is loaded via regular import

[luisherranz]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Next should refresh dynamic imported components using HMR.

Current Behavior

This bug depends on the place where the dynamic component is created. It works when the dynamic component is created on a page, but it doesn't work when it's created outside and imported using a regular import x from.

Steps to Reproduce (for bugs)

Create a component:

export default () => <p> I am the component</p>;

If you import that component and create the dynamic component on that page, HMR works:

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(import('../components/Component.js'));

export default () => (
  <div>
    <DynamicComponent />
  </div>
);

But if the dynamic import is on a different file, for example DynamicComponent.js:

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(import('./Component'));

export default DynamicComponent;

And you import it on a page with a regular import, HMR doesn't work:

import DynamicComponent from '../components/DynamicComponent.js';

export default () => (
  <div>
    <DynamicComponent />
  </div>
);

The rest of the dynamic import functionalities seem to work fine even on both cases, like SSR.

Your Environment

Tech	Version
next	3.0.1-beta.18
node	6.10
OS	Sierra
browser	Chrome

[juancampa]

This seems to still be happening on v5.0.0

[AbraaoAlves]

This seems to still be happing on v6.1.1

[timneutkens]

Will most likely be fixed by the fixes in the webpack 4 branch