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:
- Created 4 years ago
- Reactions:4
- Comments:5 (2 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 withconfig.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.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.