Can't resolve 'vertx' in '~/node_modules/plotly.js/dist'

[tim-soft]

I get the above warning in development, although plotly appears to work just fine.

• Webpack 4.5.1
• React 16.3.1
• Plotly.js 1.35.1
• React-plotly.js 2.1.0

There seems to be a lot of mixed opinions on how to get react-plotly working in a webpack setup, in my case I'm not using ify-loader

Here's my js webpack rules if it helps

module: {
    // Make missing exports an error instead of warning
    strictExportPresence: true,

    rules: [
      // Rules for JS / JSX
      {
        test: reScript,
        include: [SRC_DIR, resolvePath('tools')],
        loader: 'babel-loader',
        options: {
          // https://github.com/babel/babel-loader#options
          cacheDirectory: isDebug,

          // https://babeljs.io/docs/usage/options/
          babelrc: false,
          presets: [
            // A Babel preset that can automatically determine the Babel plugins and polyfills
            // https://github.com/babel/babel-preset-env
            [
              '@babel/preset-env',
              {
                targets: {
                  browsers: pkg.browserslist,
                  forceAllTransforms: !isDebug, // for UglifyJS
                },
                modules: false,
                useBuiltIns: false,
                debug: false,
              },
            ],
            // Experimental ECMAScript proposals
            // https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-
            '@babel/preset-stage-2',
            // Flow
            // https://github.com/babel/babel/tree/master/packages/babel-preset-flow
            '@babel/preset-flow',
            // JSX
            // https://github.com/babel/babel/tree/master/packages/babel-preset-react
            ['@babel/preset-react', { development: isDebug }],
          ],
          plugins: [
            // Treat React JSX elements as value types and hoist them to the highest scope
            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
            ...(isDebug ? [] : ['@babel/transform-react-constant-elements']),
            // Replaces the React.createElement function with one that is more optimized for production
            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
            ...(isDebug ? [] : ['@babel/transform-react-inline-elements']),
            // Remove unnecessary React propTypes from the production build
            // https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
            ...(isDebug ? [] : ['transform-react-remove-prop-types']),
          ],
        },
      },

Edit:
I just realized that I can't build production if I'm using UglifyJS, the build process just goes on forever. If I comment out uglifyjs the build completes in a few minutes and runs fine. Any ideas here?

// Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk).
  optimization: {
    minimizer: [
       new UglifyJsPlugin({
         cache: true,
         parallel: true,
         sourceMap: false // set to true if you want JS source maps
       }),
       new OptimizeCSSAssetsPlugin({})
    ],
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          enforce: true,
        },
        commons: {
          chunks: 'initial',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
        },
      },
    },
  },

[nicolaskruchten]

Have you checked out https://github.com/plotly/plotly-webpack ?

[tim-soft]

Those loaders didn't send to have any effect other then break other libs

[nicolaskruchten]

If you load the dist you need no additional loaders and you can use the ignore plugin to suppress the vertx warning. If you load plotly from source you will have to use the ify plugin etc

[tim-soft]

Instructions aren't super clear, are you saying to do this for a pre-compiled build?

// Import pre-compiled es5 version of plotly
import Plotly from 'plotly.js/dist/plotly';

// Create new react-plotly instance from pre-compiled version
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);

Edit: This seems to be the best way to use Plotly, only include the charts you are actually using. Doing things this way greatly reduced my build times when uglifying/minifying my js + much smaller overall bundle

import PlotlyCore from 'plotly.js/lib/core';
import SankeyChart from 'plotly.js/lib/sankey';
import createPlotlyComponent from 'react-plotly.js/factory';

// Create DIY Plotly Bundle
PlotlyCore.register([ SankeyChart ]);
const Plotly = createPlotlyComponent(PlotlyCore);

{...}
<Plotly />

[vdh]

I used IgnorePlugin (new webpack.IgnorePlugin(/vertx/)) to solve this issue, since the require to vertx seems to be an unnecessary dependency check inside a Promise shim, if I recall correctly.

[nicolaskruchten]

I've updated https://github.com/plotly/plotly-webpack to explain the IgnorePlugin workaround for the vertx issue. This issue is being tracked upstream here: plotly/plotly.js#2466