Self is not defined Plot React component issue for Next.js and Typescript

[apinanyogaratnam]

Error message:

ReferenceError: self is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.58
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (9084:9)
o
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (7:631)
<unknown>
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (7:682)
Object.503.../constants/numerical
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (128735:10)
o
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (7:631)
<unknown>
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (7:682)
Object.1.../src/lib
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (10:11)
o
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (7:631)
<unknown>
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (7:682)
Object.481.../build/plotcss
file:///Users/apinanyogaratnam/Desktop/dashboard-client/node_modules/plotly.js/dist/plotly.js (125543:1)

Explanation: Plot does not display plot data due to this error. Error reported and solved here but does not help (https://github.com/plotly/react-plotly.js/issues/272).

It works perfectly fine on react.js but using Next.js with typescript gives this error. If I reload it a couple times, it starts to work again

[apinanyogaratnam]

needed to use client side rendering with nextjs

used dynamic importing 'next/dynamic' with ssr: false, server side rendering turned off

[bykof]

Worked for me too by using: const Plot = dynamic(() => import('react-plotly.js'), { ssr: false }); instead of import Plot from 'react-plotly.js';

[znbrakji]

Thank you @bykof Where is the function dynamic() defined or implemented?

[bykof]

It's the dynamic import of Next.js: https://nextjs.org/docs/advanced-features/dynamic-import

Can be imported with: import dynamic from 'next/dynamic'

[maplegilbs]

Fired up a blank next project (v 13.2.3) to test this, and it worked great.

In my pages/index.js I have

//Libraries
import dynamic from 'next/dynamic';

const Plot = dynamic(()=> {return import ("react-plotly.js")}, {ssr: false})

export default function () {
    return (
        <Plot data={[
            {
                x: [1, 2, 3],
                y: [2, 6, 3],
                type: 'scatter',
                mode: 'lines+markers',
                marker: { color: 'red' },
            },
            { type: 'bar', x: [1, 2, 3], y: [2, 5, 3] },
        ]}
            layout={{ width: 320, height: 240, title: 'A Fancy Plot' }}
        />
    )
}

When I go back to my project in development (next v 13.1.6) and copy and paste the exact code I get the following error:

Unhandled Runtime Error
Error: Element type is invalid. Received a promise that resolves to: [object Object]. Lazy element type must resolve to a class or function.

Call Stack
mountLazyComponent
node_modules\react-dom\cjs\react-dom.development.js (20013:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (21593:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4277:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (27451:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26557:0)
workLoopConcurrent
node_modules\react-dom\cjs\react-dom.development.js (26543:0)
renderRootConcurrent
node_modules\react-dom\cjs\react-dom.development.js (26505:0)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25738:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)

I have my pages wrapped in a layout but even if I remove the layout the problem persists. Anybody have thoughts ?

FWIW this is my package.json file in the project where it is failing. Everything is installed.

{
  "name": "bearcobble2023",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.6",
    "dotenv": "^16.0.3",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "mysql2": "^3.1.2",
    "next": "13.1.6",
    "plotly.js": "^2.18.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-plotly.js": "^2.6.0"
  },
  "devDependencies": {
    "sass": "^1.58.2"
  }
}

[sellings-dev]

For some reason, in Next.js v13.4.3 the solution using dynamic import and server side rendering turned off didn't work for me.

The only workaround I found was using the "use client" directive. It declares the component as a Client Component.

All you need to do is add the directive before the imports:

'use client'
import Plot from 'react-plotly.js'

[Rrhapsod]

For some reason, in Next.js v13.4.3 the solution using dynamic import and server side rendering turned off didn't work for me.

The only workaround I found was using the "use client" directive. It declares the component as a Client Component.

All you need to do is add the directive before the imports:

'use client'
import Plot from 'react-plotly.js'

I'm using the "use client" directive and still facing the error.

[Hendricks27]

I am having the same issue with both "use client" and dynamic import.

[iljaiwjew]

the same for me - 'use client' doesn't work

[mvarchdev]

same error... switched to chart.js