"Uncaught ReferenceError: self is not defined" when trying to import using require

See original GitHub issue

I get the error in the node repl when trying to import react-plotly using require. In the browser, the call to require('react-plotly.js') returns undefined, though I don’t any exception in the console.

Welcome to Node.js v16.13.1.
Type ".help" for more information.
> const {Plot} = require('react-plotly.js');
Uncaught ReferenceError: self is not defined
    at Object.58 (/home/sphelps/tmp/test/node_modules/plotly.js/dist/plotly.js:9084:9)
    at o (/home/sphelps/tmp/test/node_modules/plotly.js/dist/plotly.js:7:631)
    at /home/sphelps/tmp/test/node_modules/plotly.js/dist/plotly.js:7:682
    at Object.503.../constants/numerical (/home/sphelps/tmp/test/node_modules/plotly.js/dist/plotly.js:128735:10)
    at o (/home/sphelps/tmp/test/node_modules/plotly.js/dist/plotly.js:7:631)
    at /home/sphelps/tmp/test/node_modules/plotly.js/dist/plotly.js:7:682
    at Object.1.../src/lib (/home/sphelps/tmp/test/node_modules/plotly.js/dist/plotly.js:10:11)
    at o (/home/sphelps/tmp/test/node_modules/plotly.js/dist/plotly.js:7:631)

I am using the following dependencies:

 "dependencies": {
    "plotly.js": "^2.8.3",
    "react-plotly.js": "^2.5.1"
  }

Any suggestions as to what I am doing wrong?

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:10

Top GitHub Comments

13reactions

apinanyogaratnamcommented, Dec 28, 2021

how would this work in next.js with typescript I’m getting the same issue but Im using es6 imports.

import Plot from 'react-plotly.js';

spits out the same issue

3reactions

ryan-williamscommented, Nov 27, 2022

This resolved it for me, in next.js:

-import Plot from "react-plotly.js"
+import dynamic from "next/dynamic";
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false, })

My understanding is that you basically need to skip react-plotly.js import/execution during SSR.

Additionally, I’m using Typescript in next.js, and referencing the PlotParams type; that import seems to still work directly from the package:

-import Plot, {PlotParams} from "react-plotly.js"
+import dynamic from "next/dynamic";
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false, })
+import {PlotParams} from 'react-plotly.js';