66 lines
1.4 KiB
Markdown
66 lines
1.4 KiB
Markdown
# `next/dynamic` has deprecated loading multiple modules at once
|
|
|
|
#### Why This Error Occurred
|
|
|
|
The ability to load multiple modules at once has been deprecated in `next/dynamic` to be closer to React's implementation (`React.lazy` and `Suspense`).
|
|
|
|
Updating code that relies on this behavior is relatively straightforward! We've provided an example of a before/after to help you migrate your application:
|
|
|
|
#### Possible Ways To Fix It
|
|
|
|
Migrate to using separate dynamic calls for each module.
|
|
|
|
Before
|
|
|
|
```js
|
|
import dynamic from 'next/dynamic'
|
|
|
|
const HelloBundle = dynamic({
|
|
modules: () => {
|
|
const components = {
|
|
Hello1: () => import('../components/hello1').then((m) => m.default),
|
|
Hello2: () => import('../components/hello2').then((m) => m.default),
|
|
}
|
|
|
|
return components
|
|
},
|
|
render: (props, { Hello1, Hello2 }) => (
|
|
<div>
|
|
<h1>{props.title}</h1>
|
|
<Hello1 />
|
|
<Hello2 />
|
|
</div>
|
|
),
|
|
})
|
|
|
|
function DynamicBundle() {
|
|
return <HelloBundle title="Dynamic Bundle" />
|
|
}
|
|
|
|
export default DynamicBundle
|
|
```
|
|
|
|
After
|
|
|
|
```js
|
|
import dynamic from 'next/dynamic'
|
|
|
|
const Hello1 = dynamic(() => import('../components/hello1'))
|
|
const Hello2 = dynamic(() => import('../components/hello2'))
|
|
|
|
function HelloBundle({ title }) {
|
|
return (
|
|
<div>
|
|
<h1>{title}</h1>
|
|
<Hello1 />
|
|
<Hello2 />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DynamicBundle() {
|
|
return <HelloBundle title="Dynamic Bundle" />
|
|
}
|
|
|
|
export default DynamicBundle
|
|
```
|