Chunk Name Issue

Hi James 😃

I just upgraded to the glorious new syntax

const UniversalComponent = universal(
  ({ page }) => import(`../../pages/${page}`),
  {
    minDelay: 500,
    loading: PageSpinner,
    error: NotFound
  }
)

Unfortunately I’m running into a weird issue with chunk names which causes this:

The issue seems to be that webpack generates weird chunk names probably because of some hardcoded default value somewhere:

After switching back to the old, boring and verbose syntax:

const UniversalComponent = ({ page, isLoading }: Props) => {
  const Component = components[page] || NotFound
  return <Component isLoading={isLoading} />
}

const components = {
  Overview: universal(() => import('../../pages/Overview'), {
    minDelay: 500,
    loading: PageSpinner
  }),
  Invest: universal(() => import('../../pages/Invest'), {
    minDelay: 500,
    loading: PageSpinner
  }),
  Portfolio: universal(() => import('../../pages/Portfolio'), {
    minDelay: 500,
    loading: PageSpinner
  }),
  NotFound
}

…it works fine again and webpack generates correct chunk names:

I’m 90% sure the issue is that my folder structure is:

- components
    - Overview
        - index.js
        - styles.css

and I guess you are expecting:

- components
    - Overview.js

I’ve tried various paths in the universal component, e.g.:

• import(`../../pages/${page}`)
• import(`../../pages/${page}/index`)
• import(`../../pages/${page}/index.js`)

But none seem to work.

Any idea what might go wrong here and whether react-universal-component or webpack-flush-chunks is to blame?

[chapati23]

➡️ https://github.com/webpack/webpack/issues/5575

[faceyspacey]

Yea create an issue. They should know.