Netlify deployment issue with react-plotly.js

[alexryanterry]

Which project does this relate to?

Start

Describe the bug

When I deploy a Start app with react-plotly.js / plotly.js to Netlify, the app fails with the following:

The function logs from Netlify show:

Or the function logs as text:

Feb 20, 12:36:25 PM: ERROR  Uncaught Exception 	{"errorType":"ReferenceError","errorMessage":"self is not defined","stack":["ReferenceError: self is not defined","    at node_modules/@plotly/d3/d3.js (/var/task/node_modules/plotly.js/dist/plotly.js:7261:15)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)","    at src/lib/index.js (/var/task/node_modules/plotly.js/dist/plotly.js:15130:16)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)","    at build/plotcss.js (/var/task/node_modules/plotly.js/dist/plotly.js:15990:17)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)","    at src/core.js (/var/task/node_modules/plotly.js/dist/plotly.js:58993:7)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)","    at lib/core.js (/var/task/node_modules/plotly.js/dist/plotly.js:59061:24)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)"]}Feb 20, 12:36:25 PM: ERROR  Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"ReferenceError: self is not defined","reason":{"errorType":"ReferenceError","errorMessage":"self is not defined","stack":["ReferenceError: self is not defined","    at node_modules/@plotly/d3/d3.js (/var/task/node_modules/plotly.js/dist/plotly.js:7261:15)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)","    at src/lib/index.js (/var/task/node_modules/plotly.js/dist/plotly.js:15130:16)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)","    at build/plotcss.js (/var/task/node_modules/plotly.js/dist/plotly.js:15990:17)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)","    at src/core.js (/var/task/node_modules/plotly.js/dist/plotly.js:58993:7)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)","    at lib/core.js (/var/task/node_modules/plotly.js/dist/plotly.js:59061:24)","    at __require (/var/task/node_modules/plotly.js/dist/plotly.js:44:52)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: ReferenceError: self is not defined","    at process.<anonymous> (file:///var/runtime/index.mjs:1276:17)","    at process.emit (node:events:517:28)","    at emit (node:internal/process/promises:149:20)","    at processPromiseRejections (node:internal/process/promises:283:27)","    at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}Feb 20, 12:36:25 PM: INIT_REPORT Init Duration: 1810.41 ms	Phase: invoke	Status: error	Error Type: Runtime.UnknownFeb 20, 12:36:25 PM: Unknown application error occurred

Links:

• The deployed URL showing the error: https://start-basic.netlify.app/test-plotly (fails on all pages)
• The source repo: https://github.com/ZooHillData/start-basic
• The deployed URL (to vercel) that is working: https://start-basic-gray.vercel.app/test-plotly

Your Example Website or App

https://start-basic.netlify.app/

Steps to Reproduce the Bug or Issue

1. Go to https://start-basic.netlify.app/
2. See the error on Netlify
3. Go to https://start-basic-gray.vercel.app/test-plotly
4. See no error on Vercel

Expected behavior

I would expect that it would work similarly to Vercel and not show an error..

Screenshots or Videos

No response

Platform

• OS: macOS Sonoma 14.6.1 (M1 chip)
• Browser: Chrome 133.0.6943.98
• Start version: 1.107.0

Additional context

No response

[serhalp]

🤔 I wonder why this works out of the box on Vercel.

It looks like this is because d3 (a dependency of plotly.js) is only designed to work in browser environments: d3/d3#3635.

Could you give this a try with jsdom or another browser API polyfill?

[arjunyel]

This should fix it https://x.com/tannerlinsley/status/1892475211473441178