Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The dynamic imports modules function no longer receive props in next7 #5208

Closed
ProfChaos opened this issue Sep 19, 2018 · 5 comments · Fixed by #5249
Closed

The dynamic imports modules function no longer receive props in next7 #5208

ProfChaos opened this issue Sep 19, 2018 · 5 comments · Fixed by #5249

Comments

@ProfChaos
Copy link

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
Copy link
Contributor

tusbar commented Sep 20, 2018

This is expected, as a breaking change of #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
Copy link
Member

timneutkens commented Sep 20, 2018

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
Copy link
Author

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
Copy link
Author

ProfChaos commented Sep 20, 2018

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

Network pane

image

@SindreSvendby
Copy link

SindreSvendby commented Sep 20, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants