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

Fix agressive code splitting when passing props containing "." #219

Merged
merged 1 commit into from
Feb 4, 2019
Merged

Fix agressive code splitting when passing props containing "." #219

merged 1 commit into from
Feb 4, 2019

Conversation

marcmrf
Copy link
Contributor

@marcmrf marcmrf commented Feb 1, 2019

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

bundle-safe template literal chunks
@marcmrf marcmrf changed the title Fix agressive code splitting when passing props containing "." (#1) Fix agressive code splitting when passing props containing "." Feb 1, 2019
@gregberge gregberge merged commit ef11e11 into gregberge:master Feb 4, 2019
@gregberge
Copy link
Owner

Thanks!

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

Successfully merging this pull request may close these issues.

2 participants