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