Chunk issues with dynamic imports.

[ghost]

🐛 Bug Report

I am trying to load react-intl data files using loadable.lib() which actually looks like a good match for this. As I have to support quite a range of locales I thought about using loadable.lib together with a template string:

const language = process.env.APP_LOCALE!.split(/-|_/)[0]
const ReactIntlData = loadable.lib(() => import(`react-intl/locale-data/${language}`))

... later ... 
render() => 
  <ReactIntlData>
    {(loaded) => {
      addLocaleData(loaded)
      return null
    }}
  </ReactIntlData>

I see the following error message on the console of my SSR application:

Invariant Violation: loadable: cannot find react-intl-locale-data/de in stats

To Reproduce

Actually use the same demo code as shown.

Expected behavior

That is works. Easy peasy ;)

Link to repl or repo (highly encouraged)

Working on it.

Issues without a reproduction link are likely to stall.

Env

## System:
 - OS: macOS 10.14.2
 - CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
 - Memory: 951.41 MB / 24.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.3.0 - /usr/local/bin/node
 - Yarn: 1.12.3 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
## npmPackages:
 - @loadable/babel-plugin: ^5.0.1 => 5.0.1
 - @loadable/component: ^5.2.1 => 5.2.1
 - @loadable/server: ^5.2.0 => 5.2.0

[ghost]

I figure the issue in somewhere in the Babel Plugin.

Input:

loadable.lib(() => import(`react-intl/locale-data/${language}`))

Output:

loadable.lib({
  chunkName: function chunkName() {
    return "react-intl-locale-data/" + language;
  },
  isReady: function isReady(props) {
    if (typeof __webpack_modules__ !== 'undefined') {
      return !!__webpack_modules__[this.resolve(props)];
    }

    return false;
  },
  requireAsync: function requireAsync() {
    return import(
    /* webpackChunkName: "[request]" */
    "react-intl/locale-data/" + language);
  },
  requireSync: function requireSync(props) {
    var id = this.resolve(props);

    if (typeof __webpack_require__ !== 'undefined') {
      return __webpack_require__(id);
    }

    return eval('module.require')(id);
  },
  resolve: function resolve() {
    if (require.resolveWeak) {
      return require.resolveWeak("react-intl/locale-data/" + language);
    }

    return require('path').resolve(__dirname, "react-intl/locale-data/" + language);
  }
});

I figure that a) chunkName function and b) webpackChunkName comment are somehow out of sync.

Looking at the Webpack Stats it seems like Webpack produces chunks named by just the dynamic part of the import - in this case e.g. de.

[gregberge]

Hello @serwer-WittGruppe, you are right! I am on it!

[ghost]

If you are on it. Can you verify that it re-uses existing chunk names when they contain the [request] segment? This would improve our usage as we rely on this plugin https://github.com/sebastian-software/babel-plugin-smart-webpack-import for naming.

[ghost]

Thanks!

[gregberge]

If chunkName is the same it is reused. The algorithm is the same so the chunkName should be reused between aggressive and simple imports.