gatsby-plugin-loadable-components-ssr

gatsby-plugin-loadable-components-ssr copied to clipboard

Hi there,

I'm in a pretty confusing situation. I have used loadable-components and this plugin with previous Gatsby projects, but am now unable to do anything with it.

In Dev mode, I get this error when I refresh the page:

Check the top-level render call using <Styled(MuiBox)>. See https://reactjs.org/link/warning-keys for more information.
    at LogoRow (/Users/jshebert/Development/lightstep-web/public/render-page.js:256831:21)
    at LogoGarden (/Users/jshebert/Development/lightstep-web/public/render-page.js:256706:27)
    at InnerLoadable (/Users/jshebert/Development/lightstep-web/public/render-page.js:2518:34)
    at LoadableWithChunkExtractor
    at Loadable
    at div
    at StyledComponent (/Users/jshebert/Development/lightstep-web/public/render-page.js:190545:28)
    at main
    at StyledComponent (/Users/jshebert/Development/lightstep-web/public/render-page.js:190545:28)
    at LocationProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:261041:23)
    at Layout (/Users/jshebert/Development/lightstep-web/public/render-page.js:256516:18)
    at SelfServicePage (/Users/jshebert/Development/lightstep-web/public/render-page.js:262606:19)
    at RouteHandler (/Users/jshebert/Development/lightstep-web/public/render-page.js:249024:53)
    at div
    at FocusHandlerImpl (/Users/jshebert/Development/lightstep-web/public/render-page.js:263029:5)
    at FocusHandler (/Users/jshebert/Development/lightstep-web/public/render-page.js:263004:19)
    at RouterImpl (/Users/jshebert/Development/lightstep-web/public/render-page.js:262918:5)
    at Location (/Users/jshebert/Development/lightstep-web/public/render-page.js:262764:23)
    at Router
    at ServerLocation (/Users/jshebert/Development/lightstep-web/public/render-page.js:262868:19)
    at ChunkExtractorManager (/Users/jshebert/Development/lightstep-web/public/render-page.js:3601:3)
    at ThemeProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:189618:24)
    at TopLayout (/Users/jshebert/Development/lightstep-web/public/render-page.js:246624:3)
    at StylesProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:189431:24)
Warning: Failed prop type: Invalid prop `children` supplied to `Styled(MuiBox)`, expected one of type [function].
    at StyledComponent (/Users/jshebert/Development/lightstep-web/public/render-page.js:190545:28)
    at TestimonialCarousel (/Users/jshebert/Development/lightstep-web/public/render-page.js:260841:23)
    at InnerLoadable (/Users/jshebert/Development/lightstep-web/public/render-page.js:2518:34)
    at LoadableWithChunkExtractor
    at Loadable
    at div
    at StyledComponent (/Users/jshebert/Development/lightstep-web/public/render-page.js:190545:28)
    at main
    at StyledComponent (/Users/jshebert/Development/lightstep-web/public/render-page.js:190545:28)
    at LocationProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:261041:23)
    at Layout (/Users/jshebert/Development/lightstep-web/public/render-page.js:256516:18)
    at SelfServicePage (/Users/jshebert/Development/lightstep-web/public/render-page.js:262606:19)
    at RouteHandler (/Users/jshebert/Development/lightstep-web/public/render-page.js:249024:53)
    at div
    at FocusHandlerImpl (/Users/jshebert/Development/lightstep-web/public/render-page.js:263029:5)
    at FocusHandler (/Users/jshebert/Development/lightstep-web/public/render-page.js:263004:19)
    at RouterImpl (/Users/jshebert/Development/lightstep-web/public/render-page.js:262918:5)
    at Location (/Users/jshebert/Development/lightstep-web/public/render-page.js:262764:23)
    at Router
    at ServerLocation (/Users/jshebert/Development/lightstep-web/public/render-page.js:262868:19)
    at ChunkExtractorManager (/Users/jshebert/Development/lightstep-web/public/render-page.js:3601:3)
    at ThemeProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:189618:24)
    at TopLayout (/Users/jshebert/Development/lightstep-web/public/render-page.js:246624:3)
    at StylesProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:189431:24)
Warning: React does not recognize the `endIcon` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `endicon` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at a
    at Location (/Users/jshebert/Development/lightstep-web/public/render-page.js:262764:23)
    at /Users/jshebert/Development/lightstep-web/public/render-page.js:263140:24
    at GatsbyLink (/Users/jshebert/Development/lightstep-web/public/render-page.js:234869:30)
    at Location (/Users/jshebert/Development/lightstep-web/public/render-page.js:262764:23)
    at GatsbyLinkLocationWrapper
    at /Users/jshebert/Development/lightstep-web/public/render-page.js:236431:18
    at Typography (/Users/jshebert/Development/lightstep-web/public/render-page.js:39697:28)
    at WithStyles (/Users/jshebert/Development/lightstep-web/public/render-page.js:190746:31)
    at Link (/Users/jshebert/Development/lightstep-web/public/render-page.js:24123:23)
    at WithStyles (/Users/jshebert/Development/lightstep-web/public/render-page.js:190746:31)
    at /Users/jshebert/Development/lightstep-web/public/render-page.js:236580:18
    at div
    at StyledComponent (/Users/jshebert/Development/lightstep-web/public/render-page.js:190545:28)
    at div
    at Grid (/Users/jshebert/Development/lightstep-web/public/render-page.js:19800:35)
    at WithStyles (/Users/jshebert/Development/lightstep-web/public/render-page.js:190746:31)
    at FooterSection (/Users/jshebert/Development/lightstep-web/public/render-page.js:257400:28)
    at div
    at Grid (/Users/jshebert/Development/lightstep-web/public/render-page.js:19800:35)
    at WithStyles (/Users/jshebert/Development/lightstep-web/public/render-page.js:190746:31)
    at div
    at Grid (/Users/jshebert/Development/lightstep-web/public/render-page.js:19800:35)
    at WithStyles (/Users/jshebert/Development/lightstep-web/public/render-page.js:190746:31)
    at div
    at Container (/Users/jshebert/Development/lightstep-web/public/render-page.js:15449:23)
    at WithStyles (/Users/jshebert/Development/lightstep-web/public/render-page.js:190746:31)
    at div
    at StyledComponent (/Users/jshebert/Development/lightstep-web/public/render-page.js:190545:28)
    at Footer (/Users/jshebert/Development/lightstep-web/public/render-page.js:257269:26)
    at InnerLoadable (/Users/jshebert/Development/lightstep-web/public/render-page.js:2518:34)
    at LoadableWithChunkExtractor
    at Loadable
    at LocationProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:261041:23)
    at Layout (/Users/jshebert/Development/lightstep-web/public/render-page.js:256516:18)
    at SelfServicePage (/Users/jshebert/Development/lightstep-web/public/render-page.js:262606:19)
    at RouteHandler (/Users/jshebert/Development/lightstep-web/public/render-page.js:249024:53)
    at div
    at FocusHandlerImpl (/Users/jshebert/Development/lightstep-web/public/render-page.js:263029:5)
    at FocusHandler (/Users/jshebert/Development/lightstep-web/public/render-page.js:263004:19)
    at RouterImpl (/Users/jshebert/Development/lightstep-web/public/render-page.js:262918:5)
    at Location (/Users/jshebert/Development/lightstep-web/public/render-page.js:262764:23)
    at Router
    at ServerLocation (/Users/jshebert/Development/lightstep-web/public/render-page.js:262868:19)
    at ChunkExtractorManager (/Users/jshebert/Development/lightstep-web/public/render-page.js:3601:3)
    at ThemeProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:189618:24)
    at TopLayout (/Users/jshebert/Development/lightstep-web/public/render-page.js:246624:3)
    at StylesProvider (/Users/jshebert/Development/lightstep-web/public/render-page.js:189431:24)

/Users/jshebert/Development/lightstep-web/node_modules/gatsby/src/utils/dev-ssr/render-dev-html-child.js:52
    ...position.filename.split(sysPath.sep).slice(2)
                         ^
TypeError: Cannot read properties of undefined (reading 'split')
    at parseError (/Users/jshebert/Development/lightstep-web/node_modules/gatsby/src/utils/dev-ssr/render-dev-html-child.js:52:26)
    at /Users/jshebert/Development/lightstep-web/node_modules/gatsby/src/utils/dev-ssr/render-dev-html-child.js:106:27
warn The path "/" errored during SSR.
Edit its component undefined to resolve the error.

When attempting a build, I get the following:

failed Building static HTML for pages - 3.622s

 ERROR #95313

Building static HTML failed for path "/blog/successfully-launch-distributed-tracing-mvp/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  10 | function invariant(condition, message) {
  11 |   if (condition) return;
> 12 |   var error = new Error("loadable: " + message);
     | ^
  13 |   error.framesToPop = 1;
  14 |   error.name = 'Invariant Violation';
  15 |   throw error;


  WebpackError: Invariant Violation: loadable: cannot find HeaderNav in stats (from plugin: gatsby-plugin-loadable-components-ssr)

  - loadable.esm.js:12
    [lightstep-web]/[@loadable]/component/dist/loadable.esm.js:12:1

  - ChunkExtractor.js:219
    [lightstep-web]/[@loadable]/server/lib/ChunkExtractor.js:219:1

  - ChunkExtractor.js:251
    [lightstep-web]/[@loadable]/server/lib/ChunkExtractor.js:251:1

  - ChunkExtractor.js:57
    [lightstep-web]/[@loadable]/server/lib/ChunkExtractor.js:57:1

  - _arrayMap.js:16
    [lightstep-web]/[server]/[lodash]/_arrayMap.js:16:1

  - map.js:50
    [lightstep-web]/[server]/[lodash]/map.js:50:1

  - flatMap.js:26
    [lightstep-web]/[server]/[lodash]/flatMap.js:26:1

  - ChunkExtractor.js:57
    [lightstep-web]/[@loadable]/server/lib/ChunkExtractor.js:57:1

  - ChunkExtractor.js:261
    [lightstep-web]/[@loadable]/server/lib/ChunkExtractor.js:261:1

  - ChunkExtractor.js:379
    [lightstep-web]/[@loadable]/server/lib/ChunkExtractor.js:379:1

  - ChunkExtractor.js:432
    [lightstep-web]/[@loadable]/server/lib/ChunkExtractor.js:432:1

  - ChunkExtractor.js:446
    [lightstep-web]/[@loadable]/server/lib/ChunkExtractor.js:446:1

  - gatsby-ssr.js:31
    [lightstep-web]/[gatsby-plugin-loadable-components-ssr]/gatsby-ssr.js:31:31

  - api-runner-ssr.js:96
    lightstep-web/.cache/api-runner-ssr.js:96:22

  - api-runner-ssr.js:89
    lightstep-web/.cache/api-runner-ssr.js:89:3

Here's my gatsby info

 System:
    OS: macOS 12.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nodenv/versions/16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nodenv/versions/16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nodenv/versions/16.13.1/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 99.0.4844.83
    Firefox: 85.0
    Safari: 15.3
  npmPackages:
    gatsby: 3 => 3.14.6
    gatsby-awesome-pagination: ^0.3.8 => 0.3.8
    gatsby-background-image: ^1.5.3 => 1.6.0
    gatsby-plugin-advanced-sitemap: ^2.0.0 => 2.0.0
    gatsby-plugin-algolia: ^0.25.0 => 0.25.0
    gatsby-plugin-anchor-links: ^1.2.1 => 1.2.1
    gatsby-plugin-canonical-urls: ^4.6.0 => 4.6.0
    gatsby-plugin-extract-schema: ^0.2.1 => 0.2.1
    gatsby-plugin-feed: ^4.6.0 => 4.6.0
    gatsby-plugin-force-trailing-slashes: ^1.0.5 => 1.0.5
    gatsby-plugin-gdpr-cookies: ^2.0.8 => 2.0.8
    gatsby-plugin-google-analytics: ^4.6.0 => 4.6.0
    gatsby-plugin-google-tagmanager: ^4.6.0 => 4.6.0
    gatsby-plugin-image: ^2.6.0 => 2.6.0
    gatsby-plugin-intercom-spa: panzacoder/gatsby-plugin-intercom-spa => 0.3.0
    gatsby-plugin-loadable-components: ^0.0.0-alpha.0 => 0.0.0-alpha.0
    gatsby-plugin-loadable-components-ssr: 3 => 3.4.0
    gatsby-plugin-manifest: ^4.6.0 => 4.6.0
    gatsby-plugin-netlify: ^4.1.0 => 4.1.0
    gatsby-plugin-offline: ^5.6.0 => 5.6.0
    gatsby-plugin-preconnect: ^1.3.0 => 1.3.0
    gatsby-plugin-preload-link-crossorigin: ^1.0.2 => 1.0.2
    gatsby-plugin-react-helmet: ^5.6.0 => 5.6.0
    gatsby-plugin-react-svg: ^3.1.0 => 3.1.0
    gatsby-plugin-robots-txt: ^1.7.0 => 1.7.0
    gatsby-plugin-sharp: ^4.6.0 => 4.6.0
    gatsby-plugin-sitemap: ^5.6.0 => 5.6.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.26 => 1.1.26
    gatsby-remark-autolink-headers: ^5.6.0 => 5.6.0
    gatsby-remark-embed-video: ^3.1.1 => 3.1.1
    gatsby-remark-images-contentful: ^5.6.0 => 5.6.0
    gatsby-remark-prismjs: ^6.6.0 => 6.6.0
    gatsby-remark-responsive-iframe: ^5.6.0 => 5.6.0
    gatsby-source-contentful: ^7.4.0 => 7.4.0
    gatsby-source-filesystem: ^4.6.0 => 4.6.0
    gatsby-theme-material-ui: ^1.0.8 => 1.0.13
    gatsby-transformer-inline-svg: ^1.0.0 => 1.1.0
    gatsby-transformer-remark: 4.10 => 4.10.0
    gatsby-transformer-sharp: ^4.6.0 => 4.6.0

Just noticed i've got a bad package in there gatsby-plugin-loadable-components. That package is not being used in config, I have been trying a lot of different versions in attempts to fix this issue.

I've since ripped out loadable components in favor of React v18 Release Candidate. My builds now succeed but.. It's not doing SSR properly. Anything that is split is not available in the browser without SSR, which is the same behavior as using loadable-component without this plugin.

Is there any way I can easily check for apis that would conflict with this SSR process? Any tips on debugging these issues?

@graysonhicks Any suggestions on what to try? From what I am seeing, this is all behaving like it doesn't work with Gatsby at all, but I know that can't be right. Help would be appreciated.

@panzacoder Hi! Yea, the React 18 splitting might not be SSR'ing at the moment. Need to check with @wardpeet on what the expectation is there.

Nothing should have changed for this plugin, but i do see you are using v3 Gatsby, so you may need to downgrade the version of this plugin.

@graysonhicks Thanks for the reply. It looked like Gatsby was supporting the alpha of React 18 starting at 3.5 or 3.6, but I haven't seen much chatter since then (other than your demo video), so not super surprised there.

I am on v3, have been unable to upgrade to v4. I tried using v2.x, 3.x, and 4.x of this plugin to no avail. I'm not sure what is going on but as soon as I enable ssr using this plugin, the first instance of a loadable() call raises the cannot find x in stats error in the build, and raises a webpack error on refresh in develop mode.

Hm, 3.4.0 should work for v3 of Gatsby. Do you have a link to a reproduction?

We do support React.lazy + suspense on SSR with React 18. Gatsby 3 - version 3.8 or something only supports an older beta of React

I get the following error when adding this plugin to my gatsby-config.js, running [email protected]:

warn The path "/" errored during SSR.
Edit its component node_modules/@loadable/server/lib/ChunkExtractor.js:218:1 to resolve the error.

 ERROR #11616 

The project runs fine if I disable DEV_SSR or remove this plugin from gatsby-config.js.

Can someone please post a minimal reproduction so I can take a deeper look? Thanks!

same as @chandlervdw broke when I was upgrading to 4.19. coming from 4.15 where it was working flawlessly