Components won't build in Gatsby SSR
See original GitHub issueDescribe 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:
- Create new Gatsby site and
yarn add @trussworks/react-uswds
- Use any components in pages
gatsby develop
worksgatsby 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:
- Created 3 years ago
- Comments:7 (4 by maintainers)
Once we make a release, you should remove the
null-loader
config fromgatsby-node.js
(or remove the file entirely since it’s not needed any more).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