Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-plotly.js not working with node in SSR context

See original GitHub issue

bbsite@0.0.0 start /home/username/project node ./lib/server/app.js

/home/username/project/node_modules/plotly.js/src/lib/is_plain_object.js:19 if(window && window.process && window.process.versions) { ^

ReferenceError: window is not defined at isPlainObject (/home/mastcoder/metabrainz/bookbrainz-site/node_modules/plotly.js/src/lib/is_plain_object.js:19:5) at overrideAll (/home/mastcoder/metabrainz/bookbrainz-site/node_modules/plotly.js/src/plot_api/edit_types.js:123:12) at Object.<anonymous> (/home/mastcoder/metabrainz/bookbrainz-site/node_modules/plotly.js/src/components/colorbar/attributes.js:17:18) at Module._compile (module.js:641:30) at Object.Module._extensions…js (module.js:652:10) at Module.load (module.js:560:32) at tryModuleLoad (module.js:503:12) at Function.Module._load (module.js:495:3) at Module.require (module.js:585:17) at require (internal/module.js:11:18) at Object.<anonymous> (/home/username/project/node_modules/plotly.js/src/traces/scatter/attributes.js:13:21) at Module._compile (module.js:641:30) at Object.Module._extensions…js (module.js:652:10) at Module.load (module.js:560:32) at tryModuleLoad (module.js:503:12) at Function.Module._load (module.js:495:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bbsite@0.0.0 start: node ./lib/server/app.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bbsite@0.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/username/.npm/_logs/2018-02-14T10_21_38_925Z-debug.log

Issue Analytics

State:
Created 6 years ago
Comments:16 (10 by maintainers)

Top GitHub Comments

1reaction

nicolaskruchtencommented, Mar 5, 2018

It seems that something like https://github.com/aulneau/next.js-with-react-plotly.js is the best we can do at the moment for SSR using this component. @etpinard you’re right that this is a thornier problem than I anticipated 😃

0reactions

janoshcommented, Sep 6, 2019

@nicolaskruchten Thanks for explaining!

Top Results From Across the Web

React-plotly not working with create-react-app: UPDATE

I made a create-react-app using two node versions on Windows 10. ... import Plot from 'react-plotly.js';. and start the app with npm start...

Next.js yarn build failed due to plotly.js (Build error occurred ...

I am using react-plotly. js library for generating plot graphs in this react app. I have researched the issues on plotly.

react referenceerror: document is not defined - You.com

The problem is that when react-portal is loaded in node context (where document doesn't exist), it throws the error below. The error is...

Blog Gatsby Interactive Plots | janosh.dev

The reason we need react-loadable is that react-plotly.js as yet doesn't support server-side rendering (SSR). They rely on several browser APIs such as...

How to add stylesheet in Next.js ? - GeeksforGeeks

NextJs is a React-based framework that provides developers with all the tools required for production. Next.js is a react-based framework.