Introduce dynamic(() => import())

[timneutkens]

Fixes #5221
Fixes #5208
Fixes #5213

Bringing back some old non-standard behavior:

import dynamic from 'next/dynamic'

const HelloWorld = dynamic(import('../components/hello-world'))

export default () => <HelloWorld />

Will compile to:

import dynamic from 'next/dynamic'

const HelloWorld = dynamic(() => import('../components/hello-world'))

export default () => <HelloWorld />

• next/dynamic accepts a loader function as first argument
• next/dynamic usage with just dynamic(import()) is transpiled to a loader function,

The reason for these changes is that calling import() will immediately load the module when the code is executed, which is what most users don't want. This is to mirror Next 6 and below behavior around this syntax. Do note that it's non-standard and has to be deprecated. We can easily write a codemod to change this usage to the new loader function syntax.

• We now send the webpack moduleIds to the client side so that the preloadReady react-loadable function can filter out only the modules needed for hydration, instead of loading everything and waiting for that. This will introduce a performance boost when you are using next/dynamic but also make sure that modules aren't loaded when you don't render them.

TODO v7.1

• Make the transpiled function log a warning with an err.sh link that explains how to run the codemod
• Write codemod

[tusbar]

Partly fixes #5213 as well.

[timneutkens]

@tusbar I've spent this morning testing against your reproduction and it seems like my patch mzgoddard/hard-source-webpack-plugin#446 fixes the wrong assignment of bundles too, I'm going to temporarily release the package under a prefix so that we can get rid of these issues 👍

[Fumler]

Been testing this branch a bit since we are also doing something similar to #5208 (we get the page composition from an API and dynamically load components based on if the page needs them) and we want the benefits of webpack 4 (great job, btw).

In ProfChaos' example repo https://github.com/ProfChaos/nexttest

The original page

import Icon from '../components/Icon'

export default () => {
	return (
		<div>
			<h1>Only load "one"</h1>
			<Icon name="one" />
		</div>
	)
}

This now works, the extra chunks are not loaded.

But if I do this

import Icon from '../components/Icon'

export default () => {
	return (
		<div>
			<h1>Only load "one"</h1>
			<Icon name="one" />
			<Icon name="one" />
		</div>
	)
}

Now the "one" chunk loads twice, and if you add e.g. 15 <Icon name="one" /> it still only loads twice.

edit:

export default () => {
	return (
		<div>
			<h1>Only load "one"</h1>
			<Icon name="one" />
			<Icon name="one" />
			<Icon name="one" />
			<Icon name="one" />
			<Icon name="one" />
			<Icon name="one" />
			<Icon name="one" />
			<Icon name="one" />
			<Icon name="one" />
			<Icon name="one" />
		</div>
	)
}

[timneutkens]

Re: #5249 (comment)

Looks like it still doesn't work, spent most of the day debugging.

[timneutkens]

@Fumler great catch, I've fixed it and added a test for it. 👍

[arthens]

@timneutkens I think this might be causing a different bug with dynamic imports, see #5305