Gatsby: Gatsby build with plotly failed

Created on 10 Apr 2019  ·  5Comments  ·  Source: gatsbyjs/gatsby

Hi guys! You are cool! 👍

Description

While running gatsby build with plotly it's failed

Here is my package.json deps:

"dependencies": {
    "classnames": "^2.2.6",
    "css-modules": "^0.3.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "gatsby": "^2.3.5",
    "gatsby-image": "^2.0.37",
    "gatsby-plugin-manifest": "^2.0.26",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.11",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.0.32",
    "gatsby-remark-external-links": "0.0.4",
    "gatsby-source-filesystem": "^2.0.28",
    "gatsby-transformer-remark": "^2.3.8",
    "gatsby-transformer-sharp": "^2.1.17",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "plotly.js": "^1.46.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-plotly.js": "^2.3.0",
    "reakit": "^0.16.0"
  },
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier": "^1.16.4",
    "sass": "^1.18.0"
  },

and gatsby conf

module.exports = {
    siteMetadata: {
        title: 'Instant Invest',
        description: 'Instant Invest.',
        author: '@gatsbyjs',
    },
    plugins: [
        'gatsby-plugin-react-helmet',
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                name: 'images',
                path: `${__dirname}/src/images`,
            },
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                name: 'assets',
                path: `${__dirname}/src/assets`,
            },
        },
        {
            resolve: 'gatsby-transformer-remark',
            options: {
                plugins: [{
                    resolve: 'gatsby-remark-external-links',
                    options: {
                        target: '_self',
                        rel: ['nofollow', 'noopener', 'noreferrer'],
                    },
                }],
            },
        },
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        {
            resolve: 'gatsby-plugin-manifest',
            options: {
                name: 'gatsby-starter-default',
                short_name: 'starter',
                start_url: '/',
                background_color: '#0B2248',
                theme_color: '#0B2248',
                display: 'minimal-ui',
                icon: 'src/images/icon-logo.svg', // This path is relative to the root of the site.
            },
        },
        'gatsby-plugin-sass',
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    ],
}

Here is my plot:
If I exclude react-plotly and the plot - all works fine 🐱‍👤

import React from 'react'
import Plot from 'react-plotly.js'
import moment from 'moment'

import client from '../../assets/stub'

const Graph = () => {
    const oX = Object.keys(client).map(i => moment(i, 'YYYY.MM.DD_HH-mm-ss').format('YYYY-MM-DDTHH:mm:ss'))
    const oY = Object.values(client).map(item => item.reduce((a, i) => a + i, 0))
    return (
        <div>
            <Plot
                data={[
                    {
                        x: oX,
                        y: oY,
                        type: 'scatter',
                        mode: 'lines+markers',
                        marker: { color: 'red' },
                    },
                ]}
                layout={{
                    title: 'Test',
                    width: 640,
                    height: 480,
                    xaxis: {
                        tickformat: '%d %b\n %Y',
                    },
                }}
            />
        </div>
    )
}

export default Graph

Steps to reproduce

I runned npm run build with code written above...

Expected result

As always - best gatsby build ✔✔✔

Actual result

Here is my logs ✨🎁🛠🛠🛠

success Building production JavaScript and CSS bundles — 11.977 s

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  104861 | lib.addRelatedStyleRule = function(uid, selector, styleString) {
  104862 |     var id = 'plotly.js-style-' + uid;
> 104863 |     var style = document.getElementById(id);
         | ^
  104864 |     if(!style) {
  104865 |         style = document.createElement('style');
  104866 |         style.setAttribute('id', id);


  WebpackError: ReferenceError: document is not defined

  - plotly.js:104863 Object.lib.addRelatedStyleRule
    [lib]/[plotly.js]/dist/plotly.js:104863:1

  - plotly.js:104854 Object.lib.addStyleRule
    [lib]/[plotly.js]/dist/plotly.js:104854:1

  - plotly.js:72 Object.1.../src/lib
    [lib]/[plotly.js]/dist/plotly.js:72:1

  - plotly.js:7 o
    [lib]/[plotly.js]/dist/plotly.js:7:623

  - plotly.js:7
    [lib]/[plotly.js]/dist/plotly.js:7:675

  - plotly.js:101435 Object.679.../build/plotcss
    [lib]/[plotly.js]/dist/plotly.js:101435:1

  - plotly.js:7 o
    [lib]/[plotly.js]/dist/plotly.js:7:623

  - plotly.js:7
    [lib]/[plotly.js]/dist/plotly.js:7:675

  - plotly.js:359 Object.14.../src/core
    [lib]/[plotly.js]/dist/plotly.js:359:1

  - plotly.js:7 o
    [lib]/[plotly.js]/dist/plotly.js:7:623

  - plotly.js:7
    [lib]/[plotly.js]/dist/plotly.js:7:675

  - plotly.js:463 Object.22../aggregate
    [lib]/[plotly.js]/dist/plotly.js:463:1

  - plotly.js:7 o
    [lib]/[plotly.js]/dist/plotly.js:7:623

  - plotly.js:7 r
    [lib]/[plotly.js]/dist/plotly.js:7:793

  - plotly.js:7
    [lib]/[plotly.js]/dist/plotly.js:7:823

  - plotly.js:7
    [lib]/[plotly.js]/dist/plotly.js:7:73

Environment

$ gatsby info --clipboard

  System:
    OS: Windows 10
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
  Binaries:
    Yarn: 1.12.3 - D:\DevApps\Yarn\bin\yarn.CMD
    npm: 6.5.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.7.2 - /c/Users/user/AppData/Local/Programs/Python/Python37-32/python
  npmPackages:
    gatsby: ^2.3.5 => 2.3.5
    gatsby-image: ^2.0.37 => 2.0.37
    gatsby-plugin-manifest: ^2.0.26 => 2.0.26
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.11 => 3.0.11
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.32 => 2.0.32
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-source-filesystem: ^2.0.28 => 2.0.28
    gatsby-transformer-remark: ^2.3.8 => 2.3.8
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17

error UNHANDLED REJECTION


  Error: ���⥬� �� 㤠���� ���� 㪠����� ����.

  - envinfo.js:1 Function.e.exports.sync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:4970

  - envinfo.js:1 Object.copySync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:66948

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:48777

  - envinfo.js:1
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46934

  - envinfo.js:1 Promise.all.then.e
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46949

  - next_tick.js:77 process.internalTickCallback
    internal/process/next_tick.js:77:7
question or discussion
Source
picture Naggertooth

Most helpful comment

@Naggertooth Adding to what @jonniebigodes correctly pointed out.

Based on a brief look at https://github.com/plotly/react-plotly.js/issues/21 it seems like SSR is tricky and not likely to be supported because of plotly.

In the mean time, you should be able to render the component only on the client using react-loadable

Here is an example

import React, { PureComponent } from 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
  loader: () => import('../components/heavy'),
  loading() {
    return <div>Loading... (rendered from the server)</div>;
  },
});

export default class extends PureComponent {
  render() {
    return <LoadableComponent />;
  }
}
picture sidharthachatterjee on 10 Apr 2019
❤1 🎉1 👍1

All 5 comments

@Naggertooth reading from the issue description looks like that this package is oriented to the client. As gatsby's page generation is done on server side using node.js, some apis are not accessible at build time namely document and it could lead to this kind of issue. Going to make some tests and see if can come up with a solution for you. Do you mind waiting?

jonniebigodes picture jonniebigodes on 10 Apr 2019
👍1

@Naggertooth Adding to what @jonniebigodes correctly pointed out.

Based on a brief look at https://github.com/plotly/react-plotly.js/issues/21 it seems like SSR is tricky and not likely to be supported because of plotly.

In the mean time, you should be able to render the component only on the client using react-loadable

Here is an example

import React, { PureComponent } from 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
  loader: () => import('../components/heavy'),
  loading() {
    return <div>Loading... (rendered from the server)</div>;
  },
});

export default class extends PureComponent {
  render() {
    return <LoadableComponent />;
  }
}
sidharthachatterjee picture sidharthachatterjee on 10 Apr 2019
❤1 🎉1 👍1

Thank you for fast response.

https://github.com/gatsbyjs/gatsby/issues/13274#issuecomment-481848904
Yes, I have enough time. I'll wait.

https://github.com/gatsbyjs/gatsby/issues/13274#issuecomment-481871564
And thanks for suggestion
It helped!! 🌠

Thank you very much! ✨✨✨

Naggertooth picture Naggertooth on 11 Apr 2019

@Naggertooth sorry for the late response, but this one, was a really fun ride and with that i mean that i had to "throw in the towel" (pardon the bad pun), i opened up my "bag of tricks" (once again sorry for the bad pun) and tried to make it work withouth any issues with Gatsby and no matter how i approached the issue the same error popped in. The only way i was able to make it work was like @sidharthachatterjee said, through the use of react-loadable. Sorry for not being able to help out further.

jonniebigodes picture jonniebigodes on 14 Apr 2019
👍2

Thank you anyway!

Naggertooth picture Naggertooth on 15 Apr 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

totsteps picture totsteps  ·  3Comments
andykais picture andykais  ·  3Comments
hobochild picture hobochild  ·  3Comments
3CordGuy picture 3CordGuy  ·  3Comments
brandonmp picture brandonmp  ·  3Comments