Skip to content

Uncaught TypeError: Cannot read property 'document' of undefined in angular 8 #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
tonyshare opened this issue Dec 11, 2019 · 7 comments
Closed

Uncaught TypeError: Cannot read property 'document' of undefined in angular 8 #89

tonyshare opened this issue Dec 11, 2019 · 7 comments

Comments

@tonyshare
Copy link

tonyshare commented Dec 11, 2019 •
edited
Loading

i am followed the quick start to use plotly in angular 8.1.3,
my package file content is:

{
  "name": "nb",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.2",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "angular-plotly.js": "^1.4.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "plotly.js": "^1.51.2",
    "popper.js": "^1.16.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

in app module

import * as PlotlyJS from 'plotly.js/dist/plotly.js';

import * as PlotlyJS from 'plotly.js/dist/plotly.js';

import { PlotlyModule } from 'angular-plotly.js';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";

PlotlyModule.plotlyjs = PlotlyJS;
...................
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    PlotlyModule
  ],

then i go an error in chrome

plotly.js:24874 Uncaught TypeError: Cannot read property 'document' of undefined
    at plotly.js:24874
    at Object.164 (plotly.js:34420)
    at o (plotly.js:7)
    at plotly.js:7
    at Object.716.../constants/numerical (plotly.js:105364)
    at o (plotly.js:7)
    at plotly.js:7
    at Object.1.../src/lib (plotly.js:10)
    at o (plotly.js:7)
    at plotly.js:7

and the code in 24874 is var d3_document = this.document;

  var d3_document = this.document;
  function d3_documentElement(node) {
    return node && (node.ownerDocument || node.document || node).documentElement;
  }
  function d3_window(node) {
    return node && (node.ownerDocument && node.ownerDocument.defaultView || node.document && node || node.defaultView);
  }
@tonyshare
Copy link
Author

sorry, i solve the problem by using the solved question #75

@tonyshare
Copy link
Author

but is there a posiblity to use es2015?

@marrrcin
Copy link

marrrcin commented Dec 12, 2019 •
edited
Loading

@tonyshare

My workaround is the following:

  1. Use Angular 8 as normal (with es2015 target and modules)
  2. Install angular-plotly.js and use PlotlyViaWindowModule, but DO NOT modify your angular.json as it is mentioned in the readme.
  3. Put plotly.min.js in HTML of your application manually (either in <head> or at the bottom of <body> sections), before your Angular app scripts.

@fabiannagel
Copy link

@marrrcin Thanks, this worked for me but only using plotly-latest.js (minified or prod). Using version 1.5.0 gave me this nonsense error: "Invalid plotly.js version. Please, use any version above 1.40.0"

@andrefarzat andrefarzat mentioned this issue Oct 19, 2020
Closed
@sepans
Copy link

sepans commented Sep 14, 2021

I am getting a similar problem when running jest/enzyme tests on a component that imports plotly-react component. I think the root cause is the same. Currently using plotly.js version 1.53.0. I tried upgrading plotly.js version to 2 and it solved the problem but wondering if there is a workaround without doing the upgrade just for being able to run the tests. Thanks.

This was referenced Jan 26, 2022
Closed
Closed
@ASA018
Copy link

ASA018 commented Jun 21, 2022

Hi,

Thank you in advance!

I migrated my app from angular 12.2.17 to 13.3.8 and after migrating i get the folowing error:

image

I think that this is related to Plotly.js.

Even if i changed the plotly version to "plotly.js": "^1.58.5", but still getting the same error.

Regards,
Amal,

@andrefarzat
Copy link
Collaborator

Hello, @ASA018. This usually happens when Angular minifies the plotly.js code. Have you tried adding it via PlotlyViaWindowModule or PlotlyViaCDNModule (source: #75 (comment))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@andrefarzat @sepans @fabiannagel @marrrcin @tonyshare @ASA018