2023-07-05 15:11:16 +02:00
---
title: '`next/dynamic` has deprecated loading multiple modules at once'
---
2019-07-05 05:36:53 +02:00
2023-07-05 15:11:16 +02:00
## Why This Error Occurred
2019-07-05 05:36:53 +02:00
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:
2023-07-05 15:11:16 +02:00
## Possible Ways to Fix It
2019-07-05 05:36:53 +02:00
Migrate to using separate dynamic calls for each module.
2023-07-05 15:11:16 +02:00
**Before**
2019-07-23 20:33:49 +02:00
2023-07-05 15:11:16 +02:00
```js filename="example.js"
2019-07-05 05:36:53 +02:00
import dynamic from 'next/dynamic'
const HelloBundle = dynamic({
modules: () => {
const components = {
2020-05-18 21:24:37 +02:00
Hello1: () => import('../components/hello1').then((m) => m.default),
Hello2: () => import('../components/hello2').then((m) => m.default),
2019-07-05 05:36:53 +02:00
}
return components
},
render: (props, { Hello1, Hello2 }) => (
<div>
<h1>{props.title}</h1>
<Hello1 />
<Hello2 />
</div>
),
})
function DynamicBundle() {
return <HelloBundle title="Dynamic Bundle" />
}
export default DynamicBundle
```
2023-07-05 15:11:16 +02:00
**After**
2019-07-23 20:33:49 +02:00
2023-07-05 15:11:16 +02:00
```js filename="example.js"
2019-07-05 05:36:53 +02:00
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
```