props for dynamic (like @loadable)

[kuznetsov-online]

Feature request

Can you add props for dynamic (like @loadable)?

import loadable from '@loadable/component'
const AsyncPage = loadable(props => import(`./${props.page}`))
function MyComponent() {
  return (
    <div>
      <AsyncPage page="Home" />
      <AsyncPage page="Contact" />
    </div>
  )
}

[timneutkens]

dynamic imports are meant to be statically analyzable (no template strings). If you do import(./${props.page}) what will be bundled is the directory the file is in + the whole tree of files that is under that directory. Which in 99% of cases is not what you want. It would bundle every single javascript file into a separate chunk.

[kuznetsov-online]

@timneutkens, but why it's working in @loadable!

I try to find a solution for next + globalize. It needs async loading cldr-data and messages before start rendering a page and getInitialProps is bad for this.

For example:

const Page = () => {
  const {formatMessage} = useGlobalize()
  return <div>{formatMessage('page')}</div>
}

const loadMessages = async (lang, page) => {
  globalize.loadMessages({[lang]: await import(`../messages/${lang}/${page}.json`)})
}

export default dynamic(async () => {
  await loadMessages('en', 'page')
  return Page
})

It works, but it needs props for transmitting language settings.

[timneutkens]

@timneutkens, but why it's working in @Loadable!

It's not, it has the exact behavior outlined here: #8818 (comment)

[kuznetsov-online]

@timneutkens do you see my example? it works very well (messages for globalize in chunks)

[timneutkens]

Like I said you'll overbundle + slow down compilation because every single file will be bundled in that messages directory, even the files that you don't want to bundle.

You can do what you wanted to do by using static imports

[kuznetsov-online]

@timneutkens ok, but if we change import to fetch?

For example:

const Page = () => {
  const {formatMessage} = useGlobalize()
  return <div>{formatMessage('page')}</div>
}

const loadMessages = async (lang, page) => {
  globalize.loadMessages({[lang]: await fetch('/messages/${lang}/${page}.json')})
}

export default dynamic(async () => {
  await loadMessages('en', 'page')
  return Page
})

but it needs props for transmitting language settings.

[DavideDaniel]

dynamic imports are meant to be statically analyzable (no template strings). If you do import(./${props.page}) what will be bundled is the directory the file is in + the whole tree of files that is under that directory. Which in 99% of cases is not what you want. It would bundle every single javascript file into a separate chunk.

Sure, but if you are using other components inside that tree that also use dynamic loading and are lazy loading other components the code splitting should naturally have separate chunks which wouldn't be needed for the initial entry.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.