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.

Components won't build in Gatsby SSR

See original GitHub issue

Describe the bug When using these components in Gatsby, they work in the develop stage but not when building for server-side rendering.

To Reproduce Steps to reproduce the behavior:

  1. Create new Gatsby site and yarn add @trussworks/react-uswds
  2. Use any components in pages
  3. gatsby develop works
  4. gatsby build fails

Expected behavior Initial issue is with use of window in index.js:

ERROR #95312 
"window" is not available during server side rendering.

This can be fixed by using setting gatsby-node.js to use webpack null-loader for /react-uswds/, per instructions at https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules

Subsequent issue is harder to debug, errors when using any of these components and building.

  Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for  the full message or use the non-minified dev environment for full errors and additional helpful warnings.  

Because there’s not a lot of information in this error message, it’s difficult to tell what’s going on. And since there’s no error when running develop, there’s not a lot more to go on here.

Additional context My example site in development is at https://github.com/spacedogXYZ/crush2020, if this is helpful to debug. Other React USWDS implementations do not appear to have this problem (eg, https://github.com/18F/federalist-uswds-gatsby) but this repo looks like it is currently under development and would be great if it worked for this use case.

Environment:

  • Mac OS Catalina 10.15.5
  • Node versions v13.8.0 and v12.18.3 (LTS)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
ahobsoncommented, Aug 5, 2020

Once we make a release, you should remove the null-loader config from gatsby-node.js (or remove the file entirely since it’s not needed any more).

1reaction
haworkucommented, Aug 4, 2020

Hey thanks @jlev for filing this issue and for this comment! The information you already provided is enough. @ahobson is looking into things a bit

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting Common Errors - Gatsby
Inconsistent CSS styles between develop and build using styled-components or ... If you encounter a webpack error that says Generating SSR bundle failed ......
Read more >
Gatsby build / SSR swapping out components causing display ...
The problem with some components being swapped on build was due to a media query library I was using - react-responsive - not...
Read more >
Gatsby: The ultimate guide with examples - LogRocket Blog
This tutorial covers everything you'll ever need to know about Gatsby, including code demos and comparisons to React and Next.js.
Read more >
How to use client-side only packages with SSR in Gatsby and ...
2. @loadable/component in Gatsby ... Go ahead, clone the project and play around with the different types of imports. Then try running: npm...
Read more >
Leveraging Gatsby Incremental Builds With ButterCMS
In SSR architecture, the application is regularly built during the ... data then an SSR approach (and, therefore, incremental builds) won't ...
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