Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if youā€™re still stuck at the end, weā€™re happy to hop on a call to see how we can help out.

Cannot find x in stats with ssr: true

See original GitHub issue

šŸ› Bug Report

I have been using loadable for a while and it was working fine. I changed the react-router homepage route that was imported directly to load async using loadable. When I load another page and navigate to the home route, it works normally. However, when I reload it directly, I get this error

 Invariant Violation: loadable: cannot find screens-Home in stats
    at invariant (/Users/mschipperheyn/development/projects/funcional/social-front/node_modules/@loadable/component/dist/loadable.cjs.js:17:15)
    at ChunkExtractor.getChunkGroup (webpack-internal:///../../node_modules/@loadable/server/lib/ChunkExtractor.js:188:36)
    at one (webpack-internal:///../../node_modules/@loadable/server/lib/ChunkExtractor.js:211:31)
    at chunk (webpack-internal:///../../node_modules/@loadable/server/lib/ChunkExtractor.js:38:70)
    at arrayMap (webpack-internal:///../../node_modules/lodash/_arrayMap.js:16:21)
    at map (webpack-internal:///../../node_modules/lodash/map.js:50:10)
    at flatMap (webpack-internal:///../../node_modules/lodash/flatMap.js:26:22)
    at getAssets (webpack-internal:///../../node_modules/@loadable/server/lib/ChunkExtractor.js:38:52)
    at ChunkExtractor.getChunkAssets (webpack-internal:///../../node_modules/@loadable/server/lib/ChunkExtractor.js:221:14)
    at ChunkExtractor.getMainAssets (webpack-internal:///../../node_modules/@loadable/server/lib/ChunkExtractor.js:304:25)
    at ChunkExtractor.getPreAssets (webpack-internal:///../../node_modules/@loadable/server/lib/ChunkExtractor.js:357:29)
    at ChunkExtractor.getLinkTags (webpack-internal:///../../node_modules/@loadable/server/lib/ChunkExtractor.js:365:25)
    at ServerHTML (webpack-internal:///./src/server/middleware/reactApplication/processHTML.js:159:325)
    at reactApplicationMiddleware (webpack-internal:///./src/server/middleware/reactApplication/index.js:199:70)
    at process._tickCallback (internal/process/next_tick.js:68:7) framesToPop: 1, name: 'Invariant Violation' }

const HomeRoute = loadable(() => import('./screens/Home'));

When I load using

const HomeRoute = loadable(() => import('./screens/Home'), { ssr: false });

it does work. Obviously, for a homepage that is not an option.

My ssr server config looks like this:

		const extractor = new ChunkExtractor({
			statsFile: webStatsFile,
			entrypoints: ['client'],
		});

and the stats file looks like this:

{
  "errors": [],
  "warnings": [],
  "version": "4.35.3",
  "hash": "5a05fc200dd0f453bb02",
  "publicPath": "http://localhost:3001/",
  "outputPath": "/Users/mschipperheyn/development/projects/funcional/social-front/packages/server/build/public",
  "assetsByChunkName": {
    "apollo": "static/js/apollo.chunk.js",
    "chartist": "static/js/chartist.chunk.js",
    "client": "static/js/client.chunk.js",
    "immutable": "static/js/immutable.chunk.js",
    "lingui": "static/js/lingui.chunk.js",
    "material": "static/js/material.chunk.js",
    "mime": "static/js/mime.chunk.js",
    "react": "static/js/react.chunk.js",
    "react-router": "static/js/react-router.chunk.js",
    "redux": "static/js/redux.chunk.js",
    "rnw": "static/js/rnw.chunk.js",
    "runtime~client": "static/js/bundle.js",
    "social": "static/js/social.chunk.js",
    "vendors~client": "static/js/vendors~client.chunk.js"
  },
  "assets": [
    {
      "name": "static/js/apollo.chunk.js",
      "size": 1066897,
      "chunks": [
        "apollo"
      ],
      "chunkNames": [
        "apollo"
      ],
      "emitted": true
    },
    {
      "name": "static/js/bundle.js",
      "size": 31869,
      "chunks": [
        "runtime~client"
      ],
      "chunkNames": [
        "runtime~client"
      ],
      "emitted": false
    },
    {
      "name": "static/js/chartist.chunk.js",
      "size": 488191,
      "chunks": [
        "chartist"
      ],
      "chunkNames": [
        "chartist"
      ],
      "emitted": true
    },
    {
      "name": "static/js/client.chunk.js",
      "size": 8657005,
      "chunks": [
        "client"
      ],
      "chunkNames": [
        "client"
      ],
      "emitted": true
    },
    {
      "name": "static/js/immutable.chunk.js",
      "size": 377960,
      "chunks": [
        "immutable"
      ],
      "chunkNames": [
        "immutable"
      ],
      "emitted": true
    },
    {
      "name": "static/js/lingui.chunk.js",
      "size": 98591,
      "chunks": [
        "lingui"
      ],
      "chunkNames": [
        "lingui"
      ],
      "emitted": true
    },
    {
      "name": "static/js/material.chunk.js",
      "size": 4530305,
      "chunks": [
        "material"
      ],
      "chunkNames": [
        "material"
      ],
      "emitted": false
    },
    {
      "name": "static/js/mime.chunk.js",
      "size": 251638,
      "chunks": [
        "mime"
      ],
      "chunkNames": [
        "mime"
      ],
      "emitted": true
    },
    {
      "name": "static/js/react-router.chunk.js",
      "size": 101312,
      "chunks": [
        "react-router"
      ],
      "chunkNames": [
        "react-router"
      ],
      "emitted": true
    },
    {
      "name": "static/js/react.chunk.js",
      "size": 2699386,
      "chunks": [
        "react"
      ],
      "chunkNames": [
        "react"
      ],
      "emitted": true
    },
    {
      "name": "static/js/redux.chunk.js",
      "size": 187192,
      "chunks": [
        "redux"
      ],
      "chunkNames": [
        "redux"
      ],
      "emitted": true
    },
    {
      "name": "static/js/rnw.chunk.js",
      "size": 5198527,
      "chunks": [
        "rnw"
      ],
      "chunkNames": [
        "rnw"
      ],
      "emitted": true
    },
    {
      "name": "static/js/social.chunk.js",
      "size": 12482989,
      "chunks": [
        "social"
      ],
      "chunkNames": [
        "social"
      ],
      "emitted": true
    },
    {
      "name": "static/js/vendors~client.chunk.js",
      "size": 15652789,
      "chunks": [
        "vendors~client"
      ],
      "chunkNames": [
        "vendors~client"
      ],
      "emitted": true
    },
    {
      "name": "static/media/MaterialCommunityIcons.baded941.ttf",
      "size": 531476,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/MaterialIcons.a37b0c01.ttf",
      "size": 128180,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/fontello.2ac45a2b.ttf",
      "size": 94756,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/funcional.dc32310c.svg",
      "size": 56673,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/indicateCircle.40a993f5.svg",
      "size": 7659,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/messages.5cfd49de.po",
      "size": 33724,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/mute.f0922450.svg",
      "size": 1430,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/pause.40b91c10.svg",
      "size": 1032,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/play.b6d9bcca.svg",
      "size": 821,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/searchCircle.72c6d14b.svg",
      "size": 10310,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/shareCircle.8efa577f.svg",
      "size": 3057,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/trainingCircle.c27b60ab.svg",
      "size": 2972,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    },
    {
      "name": "static/media/volume.0f2b0ce8.svg",
      "size": 1043,
      "chunks": [],
      "chunkNames": [],
      "emitted": false
    }
  ],
  "filteredAssets": 0,
  "entrypoints": {
    "client": {
      "chunks": [
        "runtime~client",
        "social",
        "material",
        "rnw",
        "apollo",
        "redux",
        "react",
        "lingui",
        "chartist",
        "mime",
        "react-router",
        "immutable",
        "vendors~client",
        "client"
      ],
      "assets": [
        "static/js/bundle.js",
        "static/js/social.chunk.js",
        "static/js/material.chunk.js",
        "static/js/rnw.chunk.js",
        "static/js/apollo.chunk.js",
        "static/js/redux.chunk.js",
        "static/js/react.chunk.js",
        "static/js/lingui.chunk.js",
        "static/js/chartist.chunk.js",
        "static/js/mime.chunk.js",
        "static/js/react-router.chunk.js",
        "static/js/immutable.chunk.js",
        "static/js/vendors~client.chunk.js",
        "static/js/client.chunk.js"
      ],
      "children": {},
      "childAssets": {}
    }
  },
  "namedChunkGroups": {
    "client": {
      "chunks": [
        "runtime~client",
        "social",
        "material",
        "rnw",
        "apollo",
        "redux",
        "react",
        "lingui",
        "chartist",
        "mime",
        "react-router",
        "immutable",
        "vendors~client",
        "client"
      ],
      "assets": [
        "static/js/bundle.js",
        "static/js/social.chunk.js",
        "static/js/material.chunk.js",
        "static/js/rnw.chunk.js",
        "static/js/apollo.chunk.js",
        "static/js/redux.chunk.js",
        "static/js/react.chunk.js",
        "static/js/lingui.chunk.js",
        "static/js/chartist.chunk.js",
        "static/js/mime.chunk.js",
        "static/js/react-router.chunk.js",
        "static/js/immutable.chunk.js",
        "static/js/vendors~client.chunk.js",
        "static/js/client.chunk.js"
      ],
      "children": {},
      "childAssets": {}
    }
  },
  "children": []
}

To Reproduce

Iā€™m not sure how to reproduce this properly or debug it since it worked fine before.

Expected behavior

This should just work or provide a more helpful error message.

Link to repl or repo (highly encouraged)

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 10.14.5
 - CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
 - Memory: 556.47 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
 - Yarn: 1.15.2 - ~/.nvm/versions/node/v10.15.3/bin/yarn
 - npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
paullaffittecommented, Jul 16, 2020

I had the same issue, I fixed it by adding /* webpackChunkName: "foo-bar" */ in all my imports. I guess there is a better way to do it, but since the project Iā€™m working on is using react-app-rewired, there isnā€™t any webpack config. Just a config-override.js with config.plugins.push(new LoadablePlugin()); inside. And itā€™s for a 3-day mission only so I donā€™t feel to spend too much time on it.

0reactions
stale[bot]commented, Jan 9, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Read more comments on GitHub >

github_iconTop Results From Across the Web

3.6 - Further SLR Evaluation Examples | STAT 462
We will get exactly the same P-values, soā€¦ ... When the true population slope does not equal 0, the variables y and x...
Read more >
Chapter 2: Simple Linear Regression - Purdue Statistics
one predictor variable x, and linear means that ... if the null hypothesis H0 : Ī²1 = 0 is true, then. SSR/Ļƒ ......
Read more >
Introduction to REGRESSION! | SSE, SSR, SST | Errors (Īµ vs. e)
All videos here: http://www.zstatistics.com/The first video in a series of 5 explaining the fundamentals of regression.
Read more >
Regression output using Data Analysis in Excel - YouTube
... generate simple linear regression statistics using the Data Analysis Addin in Excel ā€“intercept, slope, regression equation, SSR, SSE,...
Read more >
Check Your Residual Plots to Ensure Trustworthy Regression ...
If your residual plots display unwanted patterns, you can't trust the regression results. I'll show you what to look for and how to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

isReady returns true even though bundles are not all loaded

Next page

react-loadable compatibility component