Fix agressive code splitting when passing props containing "."

[marcmrf]

bundle-safe template literal chunks

Summary

Webpack sanitizes the chunk names replacing several characters with "-" character.

https://github.com/webpack/webpack/blob/master/lib/Template.js#L97

The variable part of the template literal has to be sanitized at runtime in the same way to match with the generated chunk id,

const X = loadable(props => import(`./letters/${props.letter}`))

<X letter="A.secondary" /> // generated bundle is letters-A-secondary-bundle-8f2acafd.js

loadable-stats.json chunks

{
  "assetsByChunkName": {
    "vendors~letters-A-secondary~letters-B~moment": "vendors~letters-A-secondary~letters-B~moment-bundle-bf611092.js",
    "letters-A-secondary": [
      "letters-A-secondary.css",
      "letters-A-secondary-bundle-7b3653b1.js"
    ],
    "letters-B": "letters-B-bundle-32c679b2.js",
    "letters-C": "letters-C-bundle-0c38218d.js",
    "letters-D": "letters-D-bundle-5c9a58be.js",
    "letters-A-css": [
      "letters-A-css.css",
      "letters-A-css-bundle-cbc6f916.js"
    ],
    "main": [
      "main.css",
      "main-bundle-2a5d8ca2.js"
    ],
    "moment": "moment-bundle-de16a47b.js"
  },
}

Example of stack trace

Invariant Violation: loadable: cannot find letters-A.secondary in stats
    at invariant (/Users/playground/loadable-components-fork/packages/component/dist/loadable.cjs.js:13:15)
    at ChunkExtractor.getChunkGroup (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:175:36)
    at one (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:199:30)
    at /Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:35:12
    at arrayMap (/Users/playground/loadable-components-fork/node_modules/lodash/lodash.js:639:23)
    at map (/Users/playground/loadable-components-fork/node_modules/lodash/lodash.js:9556:14)
    at Function.flatMap (/Users//playground/loadable-components-fork/node_modules/lodash/lodash.js:9259:26)
    at getAssets (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:34:49)
    at ChunkExtractor.getChunkAssets (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:212:14)
    at ChunkExtractor.getMainAssets (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:303:23)
Invariant Violation: loadable: cannot find letters-A.secondary in stats
    at invariant (/Users/playground/loadable-components-fork/packages/component/dist/loadable.cjs.js:13:15)
    at ChunkExtractor.getChunkGroup (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:175:36)
    at one (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:199:30)
    at /Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:35:12
    at arrayMap (/Users/playground/loadable-components-fork/node_modules/lodash/lodash.js:639:23)
    at map (/Users/playground/loadable-components-fork/node_modules/lodash/lodash.js:9556:14)
    at Function.flatMap (/Users/playground/loadable-components-fork/node_modules/lodash/lodash.js:9259:26)
    at getAssets (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:34:49)
    at ChunkExtractor.getChunkAssets (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:212:14)
    at ChunkExtractor.getMainAssets (/Users/playground/loadable-components-fork/packages/server/lib/ChunkExtractor.js:303:23)

Test plan

Example of code failing in server-side-rendering example

https://github.com/marcmrf/loadable-components/tree/errorPathNotSanitized

With my changes

https://github.com/marcmrf/loadable-components/tree/testWorking

[gregberge]

Thanks!