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

[brussee]

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

[brussee]

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'

[nicolaskruchten]

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

[chiaramdelucia]

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

[chiaramdelucia]

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.

[etpinard]

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!

[chiaramdelucia]

@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.

[etpinard]

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

[chiaramdelucia]

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.

[tsaiDavid]

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 webpack@3.5.2

[hugograf]

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_modules\plotly.js\dist'
resolve 'vertx' in 'C:\SoftwareProjekte\Hugos\grafioschtrader\grafioschtraderClient\node_modules\plotly.js\dist'
  Parsed request is a module
  using description file: C:\SoftwareProjekte\Hugos\grafioschtrader\grafioschtraderClient\node_modules\plotly.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_modules\plotly.js\package.json (relative path: ./dist)
    resolve as module
...

[etpinard]

The webpack issue has been confirmed. No need for anyone test it themselves. #2466 (comment) were referenring to another issue. Thanks.

[brussee]

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.

[domehead100]

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.

[elshuku]

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

[domehead100]

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?