Snowpack => TypeError: can't access property "document", this is undefined

[supermodo]

Hi, I'm trying to run a Typescript Reactjs installation with React-plotly using Snowpack and I get this error on runtime.

Uncaught TypeError: can't access property "document", this is undefined
    plotly</</<[169]</< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:26076
    plotly</</<[169]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:35619
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[750]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:108685
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[1]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:335
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[727]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:105568
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[14]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:450
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[26]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:498
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    r http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    createCommonjsModule http://localhost:3006/_snowpack/pkg/common/_commonjsHelpers-b3efd043.js:14
    <anonymous> http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:326
react-plotlyjs.js:26076:21
    plotly</</<[169]</< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:26076
    plotly</</<[169]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:35619
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[750]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:108685
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[1]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:335
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[727]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:105568
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[14]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:450
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly</</<[26]< http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:498
    o http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    r http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    plotly http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:333
    createCommonjsModule http://localhost:3006/_snowpack/pkg/common/_commonjsHelpers-b3efd043.js:14
    <anonymous> http://localhost:3006/_snowpack/pkg/react-plotlyjs.js:326
    InnerModuleEvaluation self-hosted:2381
    InnerModuleEvaluation self-hosted:2381
    InnerModuleEvaluation self-hosted:2381
    InnerModuleEvaluation self-hosted:2381
    InnerModuleEvaluation self-hosted:2381
    InnerModuleEvaluation self-hosted:2381
    InnerModuleEvaluation self-hosted:2381
    evaluation self-hosted:2332

this is the culpable 26076 line

var d3_document = this.document;

I've contacted Snowpack team and the maintainer suggest that "most likely something is happening in that package that breaks non-Webpack bundling".
There is any plan to make React-plotly compatible with Snowpack or/and do you know any workaround to make it work in the meantime?

[nicolaskruchten]

We don't do a lot of work with snowpack ourselves, so this is not on our roadmap, no, but if someone wants to figure out what's going on and submit a PR in the upstream Plotly.js library, we'd be happy to try to integrate it!

[jerlam06]

I have spent my whole day trying to migrate our legacy project from webpack to vite, and I am now stuck with the exact same issue. I have seen this issue on the d3 repo conversation and they recommend to upgrade the version of d3...plotly.js is using a very old version of d3, hence the issue. My only solution is to find a replacement for ploty, which let's be honest would be too big of a task for our project, or to cancel the ongoing migration towards vite.

[fillipeags]

I'm exactly on the same situation, trying to migrate an old project to vite. Did you manage to make it work @jerlam06 ? I'm using react-chart-editor, and it uses react-plotly as peerDependency which ends up using d3 and plotly and having the same problem of document undefined as you