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

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',
        },
      },
    },
  },

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