next/dynamic has deprecated loading multiple modules at once

Source URL: https://nextjs.org/docs/messages/next-dynamic-modules

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

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

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