Issue with npm install react-plotly.js plotly.js about react-plotly.js HOT 14 CLOSED

On further investigation, it seems like github.com/mapbox/mapbox-gl-shaders.git repo has been deprecated and code has been merged to another repo. If that's the case, shouldn't react-plotly.js plotly.js depedency should be updated to point to new repo?

Again, I am new to npm way of doing things.

from react-plotly.js.

The repo has been deprecated but the older commits still exist so installation should work. The error you're seeing is a local network-level error whereby your machine cannot connect to github.com on port 22, which isn't something I know how to help you with :)

Regarding the deprecation, we are upgrading our dependencies with plotly/plotly.js#2361

from react-plotly.js.

Just to share my learnings here, [email protected] depends on [email protected] which depends on https://github.com/mapbox/mapbox-gl-shaders/tree/de2ab007455aa2587c552694c68583f94c9f2747 and we are bumping to [email protected] which does not :)

from react-plotly.js.

Thanks for response.

There was definitely network issue due to being behind firewall. Now I am able to download dependencies. I followed the tutorial to copy and paste the code sample to plot chart.

Once page loads, I get below error -

TypeError: fs.readFileSync is not a function
(anonymous function)
C:/Users/v160771/Documents/development/appsec/java/source/reactprototypes/plotly/dd-app/node_modules/mapbox-gl-shaders/index.js:7
   4 | // readFileSync calls must be written out long-form for brfs.
   5 | module.exports = {
   6 |   debug: {
>  7 |     fragmentSource: fs.readFileSync(path.join(__dirname, 'src/debug.fragment.glsl'), 'utf8'),
   8 |     vertexSource: fs.readFileSync(path.join(__dirname, 'src/debug.vertex.glsl'), 'utf8')
   9 |   },

Below is my code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Plot from 'react-plotly.js'

class App extends Component {
  render () {
  return (
    <Plot
      data={[
        {
          type: 'scatter',
          mode: 'lines+points',
          x: [1, 2, 3],
          y: [2, 6, 3],
          marker: {color: 'red'}
        },
        {
          type: 'bar',
          x: [1, 2, 3],
          y: [2, 5, 3]
        }
      ]}

      layout={{
        width: 320,
        height: 240,
        title: 'A Fancy Plot'
      }}
    />
  );
}
}

export default App;

from react-plotly.js.

Are you using a framework here like next.js or something like this?

from react-plotly.js.

I followed create-react-app tutorial. Then I imported plotly libraries in app.js. and used sample code provided on react-plotly home page.

from react-plotly.js.

Our readme shows two different ways to work with create-react-app: with or without eject , see https://github.com/plotly/react-plotly.js#build-with-create-react-app ... which way did you choose?

from react-plotly.js.

I am not sure if I am following you. I looked into pacakge.json and I see eject entry there.

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

If I understood correctly, I would like to have "local deploy" option. But I don't think so I am using webpack so far when I followed create-react-app tutorial. I need to figure out how to use webpack first.

Apologize for asking stupid questions, I am new to these things.

from react-plotly.js.

create-react-app is sort of a ready-made 'beginner mode' which uses webpack internally but doesn't let you modify its configuration unless you go into 'expert mode' by running npm run eject. plotly.js requires webpack modifications so if you want to install plotly.js using NPM, you need to do this. If you don't want to go into 'expert mode' you should follow the "With external plotly.js" instructions in our readme here: https://github.com/plotly/react-plotly.js#with-external-plotlyjs (this is what I would recommend for you :)

from react-plotly.js.

Another option could be pulling in the plotly.js core. the errors you're getting are from the mapbox deps, if you aren't going to be using any mapping trace types, this could work too:

import React from 'react';
import plotly from 'plotly.js/dist/plotly';
import createPlotComponent from 'react-plotly.js/factory';

const Plot = createPlotComponent(plotly);

export default () => (
  <Plot
    data={[
      {
        type: 'scatter',
        mode: 'lines+points',
        x: [1, 2, 3],
        y: [2, 6, 3],
        marker: {color: 'red'}
      },
      {
        type: 'bar',
        x: [1, 2, 3],
        y: [2, 5, 3]
      }
    ]}

    layout={{
      width: 320,
      height: 240,
      title: 'A Fancy Plot'
    }}
  />
)

from react-plotly.js.

@aulneau that code will likely work because you're using the dist which has already been transformed but you're still pulling in all of plotly.js there, not just the core ;)

from react-plotly.js.

Oh whoops 👍 you're right :)

from react-plotly.js.

After many tries and resolving the errors after errorr, I gave up. I finally cloned the demo-app . Fixed couple of npm issues and finally able to see chart.

Thanks @nicolaskruchten and @aulneau for your help.

from react-plotly.js.

OK! FWIW, the demo-app uses the approach I recommended above :)

from react-plotly.js.