plotly / plotly/react-plotly.js

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

Open
#228 3 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.1k
Forks
138
Avg merge
3d 2h
Merged PRs (30d)
4

Description

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?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the generated _snowpack/pkg/react-plotlyjs.js bundle at line 26076 and the reported var d3_document = this.document failure. Review the linked Snowpack discussion and the React-plotly.js packaging entry points to determine the compatibility boundary; done means the reported TypeScript React installation runs under Snowpack without this runtime error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.