Issue with npm install react-plotly.js plotly.js

[indusbull]

I am trying to build a prototype with react-plotly.js. I am following tutorial where it says I need to run "npm install react-plotly.js plotly.js". When I run the command, I get below warnings every time and then it eventually fails.

I'm new to NPM and React.js world. Not sure what is the issue here. NPM version is 5.6.0 if that is any help.

Thank you.

npm WARN deprecated husl@5.0.3: Project renamed to HSLuv
npm WARN deprecated mapbox-gl-function@1.3.0: This package has been merged with the 'mapbox-gl-style-spec' package
npm WARN deprecated feature-filter@2.2.0: This package has been merged into the 'mapbox-gl-style-spec' package
npm WARN deprecated mapbox-gl-supported@1.2.0: This package has been moved to @mapbox/mapbox-gl-supported
npm WARN deprecated shelf-pack@1.1.0: This module is now under the @mapbox namespace: install @mapbox/shelf-pack instead
npm WARN deprecated point-geometry@0.0.0: This module has moved: please install @mapbox/point-geometry instead
npm WARN deprecated vector-tile@1.3.0: This module has moved: please install @mapbox/vector-tile instead
npm WARN deprecated unitbezier@0.0.0: This module has moved: switch to @mapbox/unitbezier
npm WARN deprecated whoots-js@2.1.0: This module is now under the @mapbox namespace: install @mapbox/whoots-js instead
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://git@github.com/mapbox/mapbox-gl-shaders.git
npm ERR!
npm ERR! ssh: connect to host github.com port 22: Connection timed out
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

[indusbull]

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.

[nicolaskruchten]

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

[nicolaskruchten]

Just to share my learnings here, plotly.js@1.34.0 depends on mapbox-gl@0.22.0 which depends on https://github.com/mapbox/mapbox-gl-shaders/tree/de2ab007455aa2587c552694c68583f94c9f2747 and we are bumping to mapbox-gl@0.44.0 which does not :)

[indusbull]

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;

[nicolaskruchten]

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

[indusbull]

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

[nicolaskruchten]

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?

[indusbull]

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.

[nicolaskruchten]

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 :)

[aulneau]

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'
    }}
  />
)

[nicolaskruchten]

@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 ;)

[aulneau]

Oh whoops 👍 you're right :)

[indusbull]

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.

[nicolaskruchten]

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