Next.js: The `dynamic imports` modules function no longer receive props in next7

[ProfChaos]

Bug report

Describe the bug

With Next6 the modules function for dynamic imports received props, but in Next7 it does not receive any props.

To Reproduce

import dynamic from 'next/dynamic'
const DynamicBundle = dynamic({
  modules: ({ name }) => {
    const comp = {}
    switch (name) {
      case 'facebook':
        comp.Danamic = import('./icons/Facebook')
        break
      case 'twitter':
        comp.Danamic = import('./icons/Twitter')
        break
      case 'github':
        comp.Danamic = import('./icons/Github')
        break
      default:
        comp.Danamic = import('./icons/Awesome')
        break
    }
    return comp
  },
  render: (props, { Danamic }) => {
    return (
       <Danamic {...props} />
    )
  }
})

export default DynamicBundle

Gives this error Unhandled Rejection (TypeError): Cannot read property 'name' of undefined

Expected behavior

Since the the blog post said dynamic imports are fully backwards-compatible, I expect to receive props in the modules function.

System information

• OS: macOs
• Version of Next.js: 7.0.0

[tusbar]

This is expected, as a breaking change of https://github.com/zeit/next.js/pull/4639.

next/dynamic when providing modules as per https://github.com/zeit/next.js#4-with-multiple-modules-at-once props are no longer passed in as the function gets pre-loaded on the server and can't depend on props.

[timneutkens]

The way to go about doing this is:

import dynamic from 'next/dynamic'

const Facebook = dynamic({
  loader: () => import('./icons/Facebook')
})
const Twitter = dynamic({
  loader: () => import('./icons/Twitter')
})
const Github = dynamic({
  loader: () => import('./icons/Github')
})
const Awesome = dynamic({
  loader: () => import('./icons/Awesome')
})

export default function DynamicBundle({name, ...props}) {
 switch(name) {
  case 'facebook': {
   return <Facebook {...props} />
  }
  case 'twitter': {
    return <Twitter {...props} />
  }
  case 'github': {
    return <GitHub {...props} />
  }
 }

  return <Awesome {...props} />
}

[ProfChaos]

The way it worked in next6 with the way I did it was it only loaded the components that was being used.

I tried your example @timneutkens but when I view the network panel in chrome I see it loading all the components(chunks), not just the once I'm using. (Tried it with dev and build)

[ProfChaos]

Example here: https://github.com/ProfChaos/nexttest

Network pane

[SindreSvendby]

Indeed, seems like this could be related to #5221 and #5213, they also have problems with dynamic imports