Plotly.js: [Webpack] Module not found: Error: Can't resolve 'vertx' in '/home/user/app/node_modules/plotly.js/dist'

Created on 9 Mar 2018 · 19Comments · Source: plotly/plotly.js

Error with plotly.js 1.35.1 and webpack 3.11.0 when importing: import Plotly from 'plotly.js/dist/plotly-with-meta'

./node_modules/plotly.js/dist/plotly-with-meta.js
Module not found: Error: Can't resolve 'vertx' in '/home/user/app/node_modules/plotly.js/dist'
 @ ./node_modules/plotly.js/dist/plotly-with-meta.js 61621:16-26
 @ ./src/entryPoint.js
 @ multi ./src/entryPoint.js webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr

bug ♥ NEEDS SPON$OR

Source

brussee

👍5

Most helpful comment

The error is from the es6 promise shim. Discussed here #100 and here #305.

I had to add

new webpack.IgnorePlugin(/vertx/)

to my plugins to squelch the warning. Other things mentioned in the two discussions did not work. I'm still on webpack 3.10 and started getting this when updating to plotly.js 1.35.2 a few days ago.

domehead100 on 14 Mar 2018

👍10 🎉1

All 19 comments

Exact same issue with ./node_modules/plotly.js/dist/plotly.min.js and ./node_modules/plotly.js/dist/plotly.js as well.
Module not found: Error: Can't resolve 'vertx' in '/home/user/app/node_modules/plotly.js/dist'

brussee on 9 Mar 2018

Just to confirm: this is showing up as a warning, and compilation proceeds, right?

nicolaskruchten on 9 Mar 2018

@nicolaskruchten I am having the same issue and yes, it is logging as a warning and compilation proceeds.

chiaramdelucia on 9 Mar 2018

But, to note, I am now getting too many WebGL contexts in the console, where as before I wasn't. Not sure if this is related, but it did pop up with the 1.35.1 and this warning.

chiaramdelucia on 9 Mar 2018

Not sure if this is related, but it did pop up with the 1.35.1 and this warning.

That shouldn't be related. @chiaramdelucia would you mind sharing a reproducible example? Thank you!

etpinard on 9 Mar 2018

@etpinard I didn't really think it would be, but thought I would note it JIC.

As for reproducible code, here is a codepen. This isn't exactly what happens in my app, but it is similar. In the pen's console you'll see the following on the first button click, but not after that.
Error: WebGL warning: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one.

In my app, which uploads a dataset, it prints the following on the third time a dataset is uploaded.
WARNING: Too many active WebGL contexts. Oldest context will be lost.

chiaramdelucia on 9 Mar 2018

😕2

Hmm. I can't replicate. Can anyone else try out @chiaramdelucia 's codepen?

etpinard on 9 Mar 2018

Oh, wow. Now I can't reproduce it either with that codepen. I'm sorry about that. I guess it must be something specific to application setup. Thanks for looking @etpinard.

chiaramdelucia on 9 Mar 2018

👍1

I'm actually experiencing the same issue -

WARNING in ./node_modules/plotly.js/dist/plotly.js
Module not found: Error: Can't resolve 'vertx' in '/Users/***/node_modules/plotly.js/dist'

plotly.js is on 1.35.2
react-plotly.js is on 1.7.0

I'm trying to test this in a development environment - we're using [email protected]

tsaiDavid on 9 Mar 2018

Since v1.35.x, I'am also get a huge warning. It is used in Angular (angular-cli) project:
```
WARNING in ./node_modules/plotly.js/dist/plotly.js
Module not found: Error: Can't resolve 'vertx' in 'C:\SoftwareProjekte\Hugos\grafioschtrader\grafioschtraderClient\node_modulesplotly.js\dist'
resolve 'vertx' in 'C:\SoftwareProjekte\Hugos\grafioschtrader\grafioschtraderClient\node_modulesplotly.js\dist'
Parsed request is a module
using description file: C:\SoftwareProjekte\Hugos\grafioschtrader\grafioschtraderClient\node_modulesplotly.js\package.json (relative path: ./dist)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\SoftwareProjekte\Hugos\grafioschtrader\grafioschtraderClient\node_modulesplotly.js\package.json (relative path: ./dist)
resolve as module
...
````

hugograf on 9 Mar 2018

👍1

The webpack issue has been confirmed. No need for anyone test it themselves. https://github.com/plotly/plotly.js/issues/2466#issuecomment-371904885 were referenring to another issue. Thanks.

etpinard on 9 Mar 2018

Just to confirm: this is showing up as a warning, and compilation proceeds, right?

Yes, webpack presents it as a warning and is able to complete the compilation.

brussee on 12 Mar 2018

👍2

The error is from the es6 promise shim. Discussed here #100 and here #305.

I had to add

new webpack.IgnorePlugin(/vertx/)

to my plugins to squelch the warning. Other things mentioned in the two discussions did not work. I'm still on webpack 3.10 and started getting this when updating to plotly.js 1.35.2 a few days ago.

domehead100 on 14 Mar 2018

👍10 🎉1

experiencing the same issue during compile time. Application and Plotly components all work fine. For me it comes with another warning, which may or may not be related.

WARNING in ./~/plotly.js/dist/plotly.js
Critical dependencies:
145202:31-39 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/plotly.js/dist/plotly.js 145202:31-39

WARNING in ./~/plotly.js/dist/plotly.js
Module not found: Error: Can't resolve 'vertx' in '<project path>\node_modules\plotly.js\dist'
 @ ./~/plotly.js/dist/plotly.js 60182:16-26

elshuku on 29 Mar 2018

It is a prebuilt file. My recollection is that Uglify, which is smarter than webpack, was loading a module from es6 shim that was not transpiled, causing it to choke in release builds as soon as it encountered an es6 keyword such as let or const, or something like that. To mitigate this, react-plotly.js was tweaked to load the prebuilt file, which is all in es5. What bundler and version are you using?

domehead100 on 29 Mar 2018

We're still hoping someone finds a fix from within plotly.js for this issue. Looks like that new webpack.IgnorePlugin(/vertx/) trick is working for some users as presented in https://github.com/plotly/plotly.js/issues/2466#issuecomment-372924684, but we should do better.

That said, that es6-promise polyfill will be on its way out in v2.

etpinard on 13 Apr 2018

I've updated https://github.com/plotly/plotly-webpack to document the fact that the IgnorePlugin workaround is the recommended fix for now.

nicolaskruchten on 16 Apr 2018

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
Tests for this feature
Long-term support (continued support of this feature in the latest version of Plotly.js)
Documentation at plotly.com/javascript
Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
Possibility of integrating this feature with Dash
Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.