44d1a1cb15
This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459
68 lines
1.5 KiB
Text
68 lines
1.5 KiB
Text
---
|
|
title: '`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 filename="example.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 filename="example.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
|
|
```
|