search

trussworks / react-uswds

USWDS 3.0 components built in React
https://trussworks.github.io/react-uswds/
Apache License 2.0
190 stars 81 forks source link

Components won't build in Gatsby SSR #380

Closed jlev closed 4 years ago

jlev commented 4 years ago

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:

jlev commented 4 years ago

@haworku let me know if you'd like me to do any other debugging. I'm not super familiar with typescript, but I can send along any compile logs that might be helpful...

haworku commented 4 years ago

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

ahobson commented 4 years ago

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).

jlev commented 4 years ago

Thank you for the quick response! I've checked out the fix branch and built locally with yarn build and linked to my own package.json, and now the SSR with gatsby build works.

However, now the regular gatsby develop throws a lot of eslint errors and warnings for the generated lib... Does seem to work though, and may not be a problem once there's a real release.

eslint.log

ahobson commented 4 years ago

I'm not positive what the problem is with yarn link, but I speculate it's trying to compile the source to react-uswds which is in TypeScript.

If I simulate installing the new code, everything seems to work.

$ cd react-uswds
$ yarn build
$ cd ../crush2020
$ rsync -av ../react-uswds/lib/* node_modules/@trussworks/react-uswds/lib/
## this works fine
$ ./node_modules/.bin/gatsby develop 
## this works fine
$ ./node_modules/.bin/gatsby build
jlev commented 4 years ago

Yeah, it might be due to the typescript compilation step. I told eslint to ignore that file, and the warnings were suppressed.

I may need to wait for a new release before deploying, because netlify does all the build steps for me, but this definitely helps me keep moving on this project.

haworku commented 4 years ago

This change is available on npm in version 1.9.0.