search

neosiae / react-aria-offcanvas

Accessible Off-Canvas component for React.js
https://neosiae.github.io/react-aria-offcanvas/
MIT License
23 stars 3 forks source link

Building static HTML failed #6

Closed jokokoloko closed 5 years ago

jokokoloko commented 5 years ago

Hello, I have been using your Offcanvas component, which is really great, in a Gatsby project that recently started to cause an error and the failure of the building of the static HTML files since you released the latest version of 1.2.2.

The error:

3:48:16 PM: error Building static HTML failed for path "/post/rms-selected-by-canadas-largest-operator-of-rv-resort-parks-for-its-cloud-solutions"
3:48:16 PM: See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
3:48:16 PM:   180 |
3:48:16 PM:   181 |     _defineProperty(_assertThisInitialized(_this), "createOffCanvasRoot", function () {
3:48:16 PM: > 182 |       var firstScriptTag = document.body.getElementsByTagName('script')[0];
3:48:16 PM:       | ^
3:48:16 PM:   183 |       _this.offCanvasRoot = document.createElement('div');
3:48:16 PM:   184 |
3:48:16 PM:   185 |       _this.offCanvasRoot.setAttribute('id', 'offcanvas-root');
3:48:16 PM: 
3:48:16 PM:   WebpackError: ReferenceError: document is not defined
3:48:16 PM:   
3:48:16 PM:   - OffCanvas.js:182 OffCanvas.createOffCanvasRoot
3:48:16 PM:     [lib]/[react-aria-offcanvas]/dist/OffCanvas.js:182:1
3:48:16 PM:   
3:48:16 PM:   - OffCanvas.js:195 new OffCanvas
3:48:16 PM:     [lib]/[react-aria-offcanvas]/dist/OffCanvas.js:195:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:22 c
3:48:16 PM:     lib/webpack/bootstrap:22:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:25 Sa
3:48:16 PM:     lib/webpack/bootstrap:25:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:30 a.render
3:48:16 PM:     lib/webpack/bootstrap:30:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:30 a.read
3:48:16 PM:     lib/webpack/bootstrap:30:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:42 renderToString
3:48:16 PM:     lib/webpack/bootstrap:42:1
3:48:16 PM:   
3:48:16 PM:   - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.defa    ult
3:48:16 PM:     lib/.cache/static-entry.js:206:18
3:48:16 PM:   
3:48:16 PM:   - bootstrap:24 Promise
3:48:16 PM:     lib/webpack/bootstrap:24:1
3:48:16 PM:   
3:48:16 PM:   
3:48:16 PM:   
3:48:16 PM:   - bootstrap:68 new Promise
3:48:16 PM:     lib/webpack/bootstrap:68:1
3:48:16 PM:   
3:48:16 PM:   
3:48:16 PM:   - bootstrap:5 tryCatcher
3:48:16 PM:     lib/webpack/bootstrap:5:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:50 MappingPromiseArray._promiseFulfilled
3:48:16 PM:     lib/webpack/bootstrap:50:1
3:48:16 PM:   
3:48:16 PM:   - api-runner-ssr.js:3 MappingPromiseArray.PromiseArray._iterate
3:48:16 PM:     lib/.cache/api-runner-ssr.js:3:16
3:48:16 PM:   
3:48:16 PM:

Gatsby recommends going to https://gatsby.dev/debug-html for debugging, which I did, but I wasn't able to get any of their recommended fixes to work within my own code/project. The documentation within this link mentions:

Some of your code references “browser globals” like window or document. If this is your problem you should see an error above like “window is not defined” ("document is not defined" in this specific case). To fix this, find the offending code and either a) check before calling the code if window is defined so the code doesn’t run while Gatsby is building (see code sample below) or b) if the code is in the render function of a React.js component, move that code into componentDidMount which ensures the code doesn’t run unless it’s in the browser.

In order to get my static HTML files to build correctly again, I had to lock the version of react-aria-offcanvas to 1.2.1. It would be good to get a fix in for this and to know that future versions of this component will work when building static HTML files, especially in Gatsby, thanks!

Here is the full log:

3:46:33 PM: Build ready to start
3:46:42 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
3:46:42 PM: build-image tag: v3.3.2
3:46:42 PM: buildbot version: 75cd99f62ada9e21edea53208e8baf0eab85a045
3:46:42 PM: Fetching cached dependencies
3:46:42 PM: Starting to download cache of 255.0KB
3:46:42 PM: Finished downloading cache in 97.652311ms
3:46:42 PM: Starting to extract cache
3:46:42 PM: Failed to fetch cache, continuing with build
3:46:42 PM: Starting to prepare the repo for build
3:46:42 PM: No cached dependencies found. Cloning fresh repo
3:46:42 PM: git clone https://github.com/rms-north-america/rmsnorthamerica
3:46:44 PM: Preparing Git Reference refs/heads/master
3:46:44 PM: Starting build script
3:46:44 PM: Installing dependencies
3:46:46 PM: Downloading and installing node v10.16.0...
3:46:46 PM: Downloading https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz...
3:46:47 PM: 
##
3:46:47 PM:                                        3.7%
3:46:47 PM: 
###############################################
3:46:47 PM:                   65.9%
3:46:47 PM: 
#####################################
3:46:47 PM: #################################    97.3%
3:46:47 PM: 
########################################
3:46:47 PM: ################################ 100.0%
3:46:47 PM: Computing checksum with sha256sum
3:46:47 PM: Checksums matched!
3:46:50 PM: Now using node v10.16.0 (npm v6.9.0)
3:46:50 PM: Attempting ruby version 2.6.2, read from environment
3:46:52 PM: Using ruby version 2.6.2
3:46:52 PM: Using PHP version 5.6
3:46:52 PM: Started restoring cached node modules
3:46:52 PM: Finished restoring cached node modules
3:46:52 PM: Started restoring cached yarn cache
3:46:52 PM: Finished restoring cached yarn cache
3:46:52 PM: Installing yarn at version 1.13.0
3:46:52 PM: Installing Yarn!
3:46:52 PM: > Downloading tarball...
3:46:52 PM: [1/2]: https://yarnpkg.com/downloads/1.13.0/yarn-v1.13
3:46:52 PM: .0.tar.gz --> /tmp/yarn.tar.gz.dOqQyhhymQ
3:46:52 PM:   % Total    % Received % Xf
3:46:52 PM: erd  Average Speed   Time    Time     Time  Current
3:46:52 PM:                       Dload  Upload   Total   Spent    Left  Speed
3:46:52 PM: 
  0     0    0     0    0
3:46:52 PM:    0      0      0 --:--:-- --:--:-- --:--:--     0
3:46:53 PM: 
  0     0    0     0    0     0
3:46:53 PM:      0      0 --:--:-- --:--:-- --:--:--     0
3:46:53 PM: 100    93  100
3:46:53 PM:    93    0     0    328      0 --:--:-- --:--:-- --:--:--   328
3:46:53 PM: 
100   609    0   609    0     0    93
3:46:53 PM: 8      0 --:--:-- --:--:-- --:--:--   938
3:46:53 PM: 
100 1142k  100 1142k    0     0  1075k
3:46:53 PM:      0  0:00:01  0:00:01 --:--:-- 1075k
3:46:53 PM: [2/2]: https://yarnpkg.com/download
3:46:53 PM: s/1.13.0/yarn-v1.13.0.tar.gz.asc --> /tmp/yarn.tar.gz.dOqQyhhymQ.asc
3:46:53 PM: 
100    97  100    97    0     0   1947      0 --:--:-- --:--:--
3:46:53 PM: --:--:--  1947
3:46:54 PM: 0
3:46:54 PM:      0    0
3:46:54 PM:  0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
3:46:54 PM: 
100   613    0   613    0     0   3701      0 --:--:-- --:--:-- --
3:46:54 PM: :--:--  598k
3:46:54 PM: 
100   832  100   832    0
3:46:54 PM:    0   4002      0 --:--:-- --:--:-- --:--:--  4002
3:46:54 PM: > Verifying integrity...
3:46:54 PM: gpg: Signature made Tue 18 Dec 2018 04:04:55 PM UTC using RSA key ID B6FF4DE3
3:46:54 PM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
3:46:54 PM: gpg: Note: This key has expired!
3:46:54 PM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
3:46:54 PM:      Subkey fingerprint: E219 30C4 D0A4 AA46 1858  1F7A E074 D16E B6FF 4DE3
3:46:54 PM: > GPG signature looks good
3:46:54 PM: > Extracting to ~/.yarn...
3:46:54 PM: > Adding to $PATH...
3:46:54 PM: > We've added the following to your /opt/buildhome/.profile
3:46:54 PM: > If this isn't the profile of your current shell then please add the following to your correct profile:
3:46:54 PM: export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
3:46:54 PM: 
3:46:54 PM: > Successfully installed Yarn 1.13.0! Please open another terminal where the `yarn` command will now be available.
3:46:55 PM: Installing NPM modules using Yarn version 1.13.0
3:46:56 PM: yarn install v1.13.0
3:46:56 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
3:46:56 PM: [1/4] Resolving packages...
3:46:59 PM: warning gatsby > joi@14.3.1: This module has moved and is now available at @hapi/joi. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
3:46:59 PM: warning gatsby > joi > hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
3:46:59 PM: warning gatsby > joi > topo@3.0.3: This module has moved and is now available at @hapi/topo. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
3:46:59 PM: warning gatsby > joi > topo > hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
3:47:00 PM: warning gatsby-plugin-offline > workbox-build > joi@11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
3:47:01 PM: warning gatsby-source-contentful > joi@14.3.1: This module has moved and is now available at @hapi/joi. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
3:47:03 PM: [2/4] Fetching packages...
3:47:28 PM: info fsevents@1.2.8: The platform "linux" is incompatible with this module.
3:47:28 PM: info "fsevents@1.2.8" is an optional dependency and failed compatibility check. Excluding it from installation.
3:47:28 PM: [3/4] Linking dependencies...
3:47:28 PM: warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
3:47:28 PM: warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
3:47:28 PM: warning "gatsby > pnp-webpack-plugin > ts-pnp@1.1.0" has unmet peer dependency "typescript@*".
3:47:28 PM: warning "gatsby-plugin-netlify > webpack-assets-manifest@3.1.1" has unmet peer dependency "webpack@>=4.4.0".
3:47:38 PM: [4/4] Building fresh packages...
3:47:42 PM: success Saved lockfile.
3:47:42 PM: Done in 46.46s.
3:47:42 PM: NPM modules installed using Yarn
3:47:43 PM: Started restoring cached go cache
3:47:43 PM: Finished restoring cached go cache
3:47:43 PM: unset GOOS;
3:47:43 PM: unset GOARCH;
3:47:43 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
3:47:43 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
3:47:43 PM: go version >&2;
3:47:43 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
3:47:43 PM: go version go1.12 linux/amd64
3:47:43 PM: Installing missing commands
3:47:43 PM: Verify run directory
3:47:43 PM: Executing user command: gatsby build
3:47:46 PM: success open and validate gatsby-configs — 0.006 s
3:47:47 PM: success load plugins — 1.218 s
3:47:47 PM: success onPreInit — 0.009 s
3:47:47 PM: success delete html and css files from previous builds — 0.010 s
3:47:47 PM: success initialize cache — 0.015 s
3:47:47 PM: success copy gatsby files — 0.035 s
3:47:47 PM: success onPreBootstrap — 0.014 s
3:47:47 PM: Starting to fetch data from Contentful
3:47:47 PM: Fetching default locale
3:47:47 PM: default locale is : en-US
3:47:47 PM: contentTypes fetched 12
3:47:47 PM: Updated entries  45
3:47:47 PM: Deleted entries  0
3:47:47 PM: Updated assets  32
3:47:47 PM: Deleted assets  0
3:47:47 PM: Fetch Contentful data: 239.701ms
3:47:48 PM: success source and transform nodes — 0.492 s
3:47:48 PM: success building schema — 0.633 s
3:47:48 PM: success createPages — 0.119 s
3:47:48 PM: success createPagesStatefully — 0.055 s
3:47:49 PM: success onPreExtractQueries — 0.007 s
3:47:49 PM: success update schema — 0.049 s
3:47:49 PM: success extract queries from components — 0.301 s
3:47:49 PM: success run static queries — 0.055 s — 5/5 92.60 queries/second
3:47:49 PM: success run page queries — 0.552 s — 23/23 41.74 queries/second
3:47:49 PM: success write out page data — 0.004 s
3:47:49 PM: success write out redirect data — 0.001 s
3:47:50 PM: success Build manifest and related icons — 0.227 s
3:47:50 PM: success onPostBootstrap — 0.229 s
3:47:50 PM: info bootstrap finished - 6.848 s
3:48:12 PM: success Building production JavaScript and CSS bundles — 22.647 s
3:48:16 PM: error Building static HTML failed for path "/post/rms-selected-by-canadas-largest-operator-of-rv-resort-parks-for-its-cloud-solutions"
3:48:16 PM: See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
3:48:16 PM:   180 |
3:48:16 PM:   181 |     _defineProperty(_assertThisInitialized(_this), "createOffCanvasRoot", function () {
3:48:16 PM: > 182 |       var firstScriptTag = document.body.getElementsByTagName('script')[0];
3:48:16 PM:       | ^
3:48:16 PM:   183 |       _this.offCanvasRoot = document.createElement('div');
3:48:16 PM:   184 |
3:48:16 PM:   185 |       _this.offCanvasRoot.setAttribute('id', 'offcanvas-root');
3:48:16 PM: 
3:48:16 PM:   WebpackError: ReferenceError: document is not defined
3:48:16 PM:   
3:48:16 PM:   - OffCanvas.js:182 OffCanvas.createOffCanvasRoot
3:48:16 PM:     [lib]/[react-aria-offcanvas]/dist/OffCanvas.js:182:1
3:48:16 PM:   
3:48:16 PM:   - OffCanvas.js:195 new OffCanvas
3:48:16 PM:     [lib]/[react-aria-offcanvas]/dist/OffCanvas.js:195:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:22 c
3:48:16 PM:     lib/webpack/bootstrap:22:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:25 Sa
3:48:16 PM:     lib/webpack/bootstrap:25:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:30 a.render
3:48:16 PM:     lib/webpack/bootstrap:30:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:30 a.read
3:48:16 PM:     lib/webpack/bootstrap:30:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:42 renderToString
3:48:16 PM:     lib/webpack/bootstrap:42:1
3:48:16 PM:   
3:48:16 PM:   - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.defa    ult
3:48:16 PM:     lib/.cache/static-entry.js:206:18
3:48:16 PM:   
3:48:16 PM:   - bootstrap:24 Promise
3:48:16 PM:     lib/webpack/bootstrap:24:1
3:48:16 PM:   
3:48:16 PM:   
3:48:16 PM:   
3:48:16 PM:   - bootstrap:68 new Promise
3:48:16 PM:     lib/webpack/bootstrap:68:1
3:48:16 PM:   
3:48:16 PM:   
3:48:16 PM:   - bootstrap:5 tryCatcher
3:48:16 PM:     lib/webpack/bootstrap:5:1
3:48:16 PM:   
3:48:16 PM:   - bootstrap:50 MappingPromiseArray._promiseFulfilled
3:48:16 PM:     lib/webpack/bootstrap:50:1
3:48:16 PM:   
3:48:16 PM:   - api-runner-ssr.js:3 MappingPromiseArray.PromiseArray._iterate
3:48:16 PM:     lib/.cache/api-runner-ssr.js:3:16
3:48:16 PM:   
3:48:16 PM: 
3:48:16 PM: Skipping functions preparation step: no functions directory set
3:48:16 PM: Caching artifacts
3:48:16 PM: Started saving node modules
3:48:16 PM: Finished saving node modules
3:48:16 PM: Started saving yarn cache
3:48:16 PM: Finished saving yarn cache
3:48:16 PM: Started saving pip cache
3:48:16 PM: Finished saving pip cache
3:48:16 PM: Started saving emacs cask dependencies
3:48:16 PM: Finished saving emacs cask dependencies
3:48:16 PM: Started saving maven dependencies
3:48:16 PM: Finished saving maven dependencies
3:48:16 PM: Started saving boot dependencies
3:48:17 PM: Finished saving boot dependencies
3:48:17 PM: Started saving go dependencies
3:48:17 PM: Finished saving go dependencies
3:48:20 PM: Error running command: Build script returned non-zero exit code: 1
3:48:20 PM: Failing build: Failed to build site
3:48:20 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
3:48:20 PM: Finished processing build request in 1m38.144569626s
3:48:20 PM: Shutting down logging, 0 messages pending
neosiae commented 5 years ago

Hi @jokokoloko, thank you for the detailed issue report. I’ll try to fix it tomorrow.

neosiae commented 5 years ago

@jokokoloko, could you please update to react-aria-offcanvas@next and let me know if the problem is still there.

jokokoloko commented 5 years ago

@neosiae I tried running npm update react-aria-offcanvas@next and nothing happened. Am I missing something or am I not doing something right? I don't see any new releases nor any new commits here.

jokokoloko commented 5 years ago

@neosiae running npm install react-aria-offcanvas@next worked and version 1.2.4 looks likes it has this issue solved and Gatsby is able to build out the static HTML files as expected, thanks! I won't test it out on Netlify until you officially release the next version but I imagine it should work all the same there as well.

neosiae commented 5 years ago

I will let you know when it is ready, I'm not satisfied with the current solution. Do not use it in production. There could be a new prop, but I'm not sure right now.

jokokoloko commented 5 years ago

Sounds good, thanks!

neosiae commented 5 years ago

Update to react-aria-offcanvas@latest. You don't need to change anything in your code.

jokokoloko commented 5 years ago

I have updated to version 1.3.1 and everything is working correctly! Gatsby is able to again build out the static HTML files on my local as well as on Netlify! Thanks for the timely fix!