Loadable-components: Cannot find x in stats with ssr: true

Created on 15 Jul 2019  ·  5Comments  ·  Source: gregberge/loadable-components

🐛 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
help wanted 🆘 question ❓ wontfix
Source
picture mschipperheyn
👍4

Most helpful comment

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.

picture paullaffitte on 16 Jul 2020
👍2

All 5 comments

Any news on this issue?

snaerth picture snaerth on 3 Sep 2019

Hello @snaerth, on my side I am not working on this bug. Any help is welcome.

gregberge picture gregberge on 18 Sep 2019

Could you post your webpack config, so I can have one more hint of what it could be?
Also I wanted to know what webStatsFile is

aganglada picture aganglada on 25 Sep 2019

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.

stale[bot] picture stale[bot] on 9 Jan 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.

paullaffitte picture paullaffitte on 16 Jul 2020
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

valorloff picture valorloff  ·  3Comments
sinwailam193 picture sinwailam193  ·  6Comments
luishdz1010 picture luishdz1010  ·  6Comments
salzhrani picture salzhrani  ·  3Comments
wellyshen picture wellyshen  ·  7Comments