Mapbox subplots aren't displaying in Webpack production mode.

[elmargasimov]

I am not sure if this issue is related to #2787. My apologies in advance if this turns out to be an implementation issue, but I believe it's a bug, as I can't replicate it further. I am getting an error with the Webpack production build when using the mapbox partial bundle (development mode works fine). For some reason the map/subplots are not displaying, but the plotly mode bar is, as are the traces when you hover over them. I am almost certain this is an error related to minification. Please see below.

Expected

Actual

// Browser console error

Uncaught ReferenceError: e is not defined
    at blob:http://localhost:3000/64e0d16b-5847-48af-a0c4-d537441f88c7:formatted:3
    at blob:http://localhost:3000/64e0d16b-5847-48af-a0c4-d537441f88c7:formatted:12415
(anonymous) @ blob:http://localhost:3000/64e0d16b-5847-48af-a0c4-d537441f88c7:formatted:3
(anonymous) @ blob:http://localhost:3000/64e0d16b-5847-48af-a0c4-d537441f88c7:formatted:12415

// Webpack Common Config

const config = {
  context: path.resolve(__dirname, '..'),
  entry: {
    'react-components': glob.sync('./public/react-components/**/*.js'),
    redux: glob.sync('./public/store/**/*.js'),
    shared: glob.sync('./shared/index.js'),
  },
  output: {
    filename: '[name].js',
    path: compiledDirectory,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'ify-loader']
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(
      [
        path.resolve(compiledDirectory, 'react-components.js'),
        path.resolve(compiledDirectory, 'redux.js'),
        path.resolve(compiledDirectory, 'shared.js'),
      ],
      {
        root: path.resolve(__dirname, '../public'),
      }
    ),
  ],
};

// Webpack Production Config that gets merged

const productionConfig = {
  mode: 'production',
  plugins: [
    new UglifyJSPlugin(),
  ],
};

// React code

import React, { Component } from 'react';
import Plotly from 'plotly.js-mapbox-dist';
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);

Any stear in the right direction would be greatly appreciated.

[elmargasimov]

Below are the package.json versions:

    "plotly.js-mapbox-dist": "^1.46.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "react-plotly.js": "^2.3.0",
    "webpack": "^4.29.6",

[etpinard]

Thanks for reporting.

This looks similar to #2787 - which we resolved in #2789 in #2792

Which minifer are you using?

[elmargasimov]

I hadn't read those ones. I will close this issue. Just to recap for anyone else having this issue, here is the fix with the Terser minifier:

const TerserPlugin = require('terser-webpack-plugin');

const productionConfig = {
  mode: 'production',
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            typeofs: false
          }
        }
      }),
    ],
  },
};

[etpinard]

No worries @elmargasimov ! Searching through old issues on github can be frustrating at best.

Thanks for writing in and thank you for using plotly.js.