Adding a Canvas element breaks gatsby build

notbrian commented 5 years ago

Summary

I use a three.js canvas in my project and gatsby develop runs fine but when I try to build my project I get a ReferenceError: document is not defined error.

Relevant information

I'm using react-three-fiber which is a wrapper around the base three library. I previously tested building a month or so ago and everything worked fine. I recently updated all the modules in my project which is when I started encountering this error. I'm not 100% sure if this is caused by Gatsby.

My stack trace:

 ERROR #95313 

Building static HTML failed for path "/404/"

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

  ReferenceError: document is not defined

  - render-page.js:21834 
    /Users/brian/Documents/Coding/hxouse-site/public/render-page.js:21834:21

  - react-dom-server.node.production.min.js:28 Aa
    [hxouse-site]/[react-dom]/cjs/react-dom-server.node.production.min.js:28:264

  - react-dom-server.node.production.min.js:31 Object.useState
    [hxouse-site]/[react-dom]/cjs/react-dom-server.node.production.min.js:31:82

  - react.production.min.js:23 useState
    [hxouse-site]/[react]/cjs/react.production.min.js:23:312

  - render-page.js:21833 
    /Users/brian/Documents/Coding/hxouse-site/public/render-page.js:21833:76

  - react-dom-server.node.production.min.js:36 c
    [hxouse-site]/[react-dom]/cjs/react-dom-server.node.production.min.js:36:500

  - react-dom-server.node.production.min.js:39 Ua
    [hxouse-site]/[react-dom]/cjs/react-dom-server.node.production.min.js:39:16

  - react-dom-server.node.production.min.js:45 a.render
    [hxouse-site]/[react-dom]/cjs/react-dom-server.node.production.min.js:45:48

  - react-dom-server.node.production.min.js:44 a.read
    [hxouse-site]/[react-dom]/cjs/react-dom-server.node.production.min.js:44:161

  - react-dom-server.node.production.min.js:55 renderToString
    [hxouse-site]/[react-dom]/cjs/react-dom-server.node.production.min.js:55:83

  - render-page.js:563 Module../.cache/static-entry.js.__webpack_exports__.default
    /Users/brian/Documents/Coding/hxouse-site/public/render-page.js:563:28

  - render-html.js:35 
    [hxouse-site]/[gatsby]/dist/utils/worker/render-html.js:35:36

  - debuggability.js:313 Promise._execute
    [hxouse-site]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:488 Promise._resolveFromExecutor
    [hxouse-site]/[bluebird]/js/release/promise.js:488:18

  - promise.js:79 new Promise
    [hxouse-site]/[bluebird]/js/release/promise.js:79:10

  - render-html.js:31 
    [hxouse-site]/[gatsby]/dist/utils/worker/render-html.js:31:37

Then the actual line of code in render-page that is causing the error:

  const _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_3__["useState"])(() => {
    const element = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
    element.style.display = 'block';
    return element;
  }),
        defaultCanvas = _useState5[0];

File contents (if changed)

gatsby-config.js:

const path = require("path");

module.exports = {
  siteMetadata: {
    title: "site",
    description: "site is a project.",
    author: "site",
  },
  plugins: [
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-root-import",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: path.join(__dirname, `src`, `images`),
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /\.inline\.svg$/,
        },
      },
    },
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "gatsby-starter-default",
        short_name: "starter",
        start_url: "/",
        background_color: "#663399",
        theme_color: "#663399",
        display: "minimal-ui",
      },
    },
    "gatsby-plugin-styled-components",
    {
      resolve: "gatsby-plugin-transition-link",
      options: {
        layout: require.resolve(`./src/layouts/index.js`),
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
};

package.json:

{
  "name": "site",
  "private": true,
  "description": "website",
  "version": "0.1.0",
  "author": "",
  "dependencies": {
    "@glidejs/glide": "^3.3.0",
    "babel-plugin-styled-components": "^1.10.6",
    "gatsby": "^2.15.6",
    "gatsby-background-image": "^0.8.9",
    "gatsby-image": "^2.2.17",
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-manifest": "^2.2.13",
    "gatsby-plugin-offline": "^2.2.10",
    "gatsby-plugin-react-helmet": "^3.1.6",
    "gatsby-plugin-react-svg": "^2.1.2",
    "gatsby-plugin-sharp": "^2.2.19",
    "gatsby-plugin-styled-components": "^3.1.4",
    "gatsby-plugin-transition-link": "^1.12.4",
    "gatsby-source-filesystem": "^2.1.21",
    "gatsby-transformer-sharp": "^2.2.13",
    "gsap": "^2.1.3",
    "lodash.findindex": "^4.6.0",
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-helmet": "^5.2.1",
    "react-three-fiber": "^2.3.8",
    "react-tooltip": "^3.11.0",
    "styled-components": "^4.3.2",
    "three": "^0.106.2"
  },
  "devDependencies": {
    "gatsby-plugin-root-import": "^2.0.5",
    "prettier": "^1.18.2"
  },
  "keywords": [
    "hxouse"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/JevinSidhu/site"
  }
}

gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

jonniebigodes commented 5 years ago

@notbrian gatsby is a server side framework. that means that when you issue gatsby build or gatsby develop all of your pages/components and other assorted assets are bundled and processed by node. So with that in mind certain apis like window, document are not available in node. With that some measures are needed to bypass these errors. If you don't mind i'm currently working on the fininishing touches for your other issue #17197 based on your latest input there and this new information. If you don't mind i'll post a detailed answer shortly.

notbrian commented 5 years ago

Much appreciated, thanks @jonniebigodes!

LekoArts commented 5 years ago

Seems like this is a duplicate issue of https://github.com/gatsbyjs/gatsby/issues/17197 Please continue there! Thanks

gatsbyjs / gatsby