Problem with Gulp "Cannot find module"

[kristian2x]

I am trying to use react plotly but when gulp is bundling all files I get the following error:
Error: Cannot find module './core' from 'C:\Users\...\node_modules\plotly.js\dist'

I saw there have been problems when using webpack but I haven't found anything gulp related.

I followed this guide to setup and import Plotly: https://plot.ly/javascript/react/

Any help?

[nicolaskruchten]

Can you share a link to a repo or example that shows this problem? As it stands right now I don't have enough information to help you :)

[kristian2x]

I am using this gulpfile: https://gist.github.com/kristian2x/5a590446c6f94751a8ff8e5e8f1193b7
and I am using the example from the link to import (I have installed the packages and double checked that they are present in the node_modules folder):

import React from 'react';
import Plot from 'react-plotly.js';

class App extends React.Component {
  render() {
    return (
      <Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            mode: 'lines+points',
            marker: {color: 'red'},
          },
          {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
        ]}
        layout={ {width: 320, height: 240, title: 'A Fancy Plot'} }
      />
    );
  }
}

The complete error I get is:

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module './core' from 'C:\Users\...\node_modules\plotly.js\dist'
    at C:\Users\...\node_modules\browser-resolve\node_modules\resolve\lib\async.js:55:21
    at load (C:\Users\...\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
    at onex (C:\Users\...\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
    at C:\Users\...\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
    at FSReqWrap.oncomplete (fs.js:152:21)

Let me know if you need anything else.

[m90]

I'm running into the same issue trying to import the module in a Browserify bundle. It's trying to lookup inexistent files in the dist folder.

[m90]

Interestingly it bundles as expected when I create the component myself from plotly by doing:

import createPlotlyComponent from 'react-plotly.js/factory';
import Plotly from 'plotly.js';

const Plot = createPlotlyComponent(Plotly);

[kristian2x]

@m90 Thanks for your help but unfortunately I am getting the same error even when I try it with createPlotlyComponent

[oracleruiz]

Hi devs,

The problem is that plotly.js pkg name changed. Look how to install the pkg. https://www.npmjs.com/package/plotly.js

Do this
npm install plotly.js-dist
and then
change the file /node_modules/react-plotly.js/react-plotly.js at line 11 to:
var _plotly = require('plotly.js-dist/plotly');

@nicolaskruchten Please include this fix.

Thanks

[m90]

I looked further into this and it seems to be an issue with plotly.js itself and the way it is being bundled. Browserify is not able to use the plotly.js/dist/plotly entrypoint for whatever reason, also when used without react-plotly. The plotly.js-dist also has issues with Browserify.

[m90]

I filed an issue in the main repo: plotly/plotly.js#2902

[nicolaskruchten]

OK so it seems from the reports here like there's an issue when using Browserify and importing directly from react-plotly.js without going through the factory.

To me, the factory is the best solution in almost all cases because it allows you full control over the plotly.js bundle that's being used, so you don't have to pay the download-size cost of the full bundle if you just want bar charts. I would say that my official recommendation is to load up a version of plotly.js that works for your build system and pass it to the factory.

If we have to choose a set of defaults that works with either Browserify or Webpack, I would be inclined to go the Webpack route, based on my understanding of the relative use-share of these tools in the React community.

That said, if merging #94 (basically having the defaults load from plotly.js-dist instead of plotly.js/dist) solves this issue with Browserify, then I'm happy to do so, because the -dist bundle is much lighter-weight :)

[nicolaskruchten]

this should now be resolved with plotly.js 1.40.0. Can someone confirm please?

[kristian2x]

I can confirm this is working for me now. Thank you!

[m90]

I can also confirm that it works as expected when bundling with Browserify when you depend on plotly.js@^1.40.0 🥇

Should this:

react-plotly.js/package.json

Line 65 in 6fe45a7

"plotly.js": ">1.34.0",

be bumped now as well? Or are you planning to use -dist now?