'plotly is undefined in react

i am creating a weather app in react which shows the weather forcast in a graph using the api but i am getting an error plotly is undefined although i have pasted cdn of plotly in my index.html

index.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />


    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>


  </body>
</html>

plot.js

import React, { Component } from 'react'

export class Plot extends Component {

    drawPlot = () => {
        Plotly.newPlot('plot',[{
            x:this.props.xData,
            y:this.props.yData,
            type: this.props.type

        }],

javascript reactjs

Solution 1:^[1]

Because it is undefined in your global scope, try to console Plotly object outside of the component. If you're using Webpack for bundling try to install Plotly as an NPM package. Then import it to your project with ES6 import

Solution 2:^[2]

It is undefined in the global scope, install plotly by npm.

npm install plotly.js

And import it in your as

import Plotly from 'plotly.js';

GitHub Reference

Solution 3:^[3]

Install "plotly.js-dist" package from npm npm install plotly.js-dist and than import Plotly from "plotly.js-dist"; in Plot.js component

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Roman Unt
Solution 2	Daniyal Tariq
Solution 3	Mohammad Shawer Khandariya

'plotly is undefined in react

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]