Easy method to specify plotly dist package

[ihelmer07]

Plotly and Webpack can be adjusted to use either precompiled versions of plotly (to prevent es6 errors) or reduce size via precompiled packages that can greatly decrease the size of plotly (especially if only 1 basic type is used). see: https://github.com/plotly/plotly-webpack#the-easy-way-recommended

Would there be an easy method to specify this?

[David-Desmaisons]

Thanks for pointing out this one. I will need sometime to take it careffuly and find out what can be done.

[wald-tq]

See my comment for the other vue-plotly library: https://github.com/statnett/vue-plotly/issues/14#issuecomment-545813235

plotly.js is used as external in vue-plotly. If you use vue-plotly in a project your own bundler is looking for plotly.js.

So you can configure to resove plotly.js as you want in your own project. For example with webpack you can do:

webpack.config.js:

resolve: {
  alias: {
    'plotly.js': 'plotly.js/dist/plotly-basic.js'
  }

[soichih]

I tried specifying the plotly.js alias to plotly-basic.js as above, but now I am seeing some build errors.

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/datauis/lifestats.vue
Module not found: Error: Can't resolve 'plotly.js/lib/core' in '/home/hayashis/syncthing/git/warehouse/ui/src/datauis'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/datauis/lifestats.vue 17:13-42
 @ ./src/datauis/lifestats.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/view.vue
 @ ./src/view.vue
 @ ./src/router.js
 @ ./src/main.js

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/datauis/evaluator.vue
Module not found: Error: Can't resolve 'plotly.js/lib/core' in '/home/hayashis/syncthing/git/warehouse/ui/src/datauis'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/datauis/evaluator.vue 15:13-42
 @ ./src/datauis/evaluator.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/view.vue
 @ ./src/view.vue
 @ ./src/router.js
 @ ./src/main.js

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/datauis/lifestats.vue
Module not found: Error: Can't resolve 'plotly.js/lib/histogram' in '/home/hayashis/syncthing/git/warehouse/ui/src/datauis'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/datauis/lifestats.vue 18:17-51
 @ ./src/datauis/lifestats.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/view.vue
 @ ./src/view.vue
 @ ./src/router.js
 @ ./src/main.js

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/datauis/evaluator.vue
Module not found: Error: Can't resolve 'plotly.js/lib/pie' in '/home/hayashis/syncthing/git/warehouse/ui/src/datauis'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/datauis/evaluator.vue 16:17-45
 @ ./src/datauis/evaluator.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/view.vue
 @ ./src/view.vue
 @ ./src/router.js
 @ ./src/main.js

Here is my current bundle composition

I am basically try to get rid of mapbox-gl which I don't use for my project but gets loaded by VuePlotly. . Is there a way to selectively disable some modules?

[wald-tq]

try with plotly.js$:

  alias: {
    'plotly.js$': 'plotly.js/dist/plotly-basic.js'
  }

[soichih]

@wald-tq Thanks! That worked!

[jerkald]

I am stuck. Locally, I can npm build, which runs: vue-cli-service build and everything works out. I can load and use vue-plotly with the entire plotly functionality. But sadly our build system get's a HEAP memory error when building this library, so after googling around I've come to understand I should point to one of the partial installs to get around that. It seems to be a common problem with building plotly apparently. I attempted to do what was pointed out above and our builds still fail.

Perhaps I'm doing something wrong. I'm not familiar with this approach, so I may have a core misconception as to what I should be doing. Any help would be appreciated, since this seems to be the only work around that I've found for our situation.

If I follow correctly, I should have this for my vue.config.js:

module.exports = {
  runtimeCompiler: true,

  configureWebpack: {
    resolve: {
      alias: {
        'plotly.js$': 'plotly.js/dist/plotly-basic.js',
      },
    },
  },
};

I confirmed that my webpack config is picking it up. Because doing a vue-cli-service inspect outputs the generated webpack config:

{
   mode: 'development',
   context: '/var/builds/chdvsqbr/2/x/',
   node: {
     setImmediate: false,
     process: 'mock',
     dgram: 'empty',
     fs: 'empty',
     net: 'empty',
     tls: 'empty',
     child_process: 'empty'
   },
   output: {
     path: '/var/builds/chdvsqbr/2/x/dist',
     filename: 'js/[name].js',
     publicPath: '/x/',
     chunkFilename: 'js/[name].js'
   },
   resolve: {
     alias: {
       '@': '/var/builds/chdvsqbr/2/x/src',
        vue$: 'vue/dist/vue.esm.js',
        'plotly.js$': 'plotly.js/dist/plotly-basic.js'
     },

   ...etc
}

In my package.json, I've got many dependencies, but for vue plotly, I've got these dependencies: "vue": "^2.6.6", "vue-plotly": "^1.1.0", "vue-resize-directive": "^1.2.0", "plotly.js": "^1.52.2",

[wald-tq]

@jerkald: how do you import plotly into your code?

Do your builds still fail with the heap memory error?

Have you tried giving your build host more memory? Is more memory available? Can you configure node.js to use more memory e.g. ENV NODE_OPTIONS "--max-old-space-size=2048" in your Dockerfile?

[jerkald]

edit: previous comments removed for clarity

After doing a bunch of testing I found things were building correctly. I then found out that the build server's memory was boosted and it gave me a false positive, where i though my changes were causing the fix. Of course I posted a bunch of stuff before I realized this, so I've edited that out, as to not confuse anyone.

I also did some additional tests now that it built and found that the alias was working using the approach suggested above, but the HEAP issue was my real problem. I think the answer here is that if you're hitting HEAP issues while building plotly, you'll need to consider adding more memory to your build system and look into using the ENV NODE_OPTIONS "--max-old-space-size=2048" option @wald-tq suggested. We were using the default max-old-space-size (which I guess is 512KB) and had only 1024 MB mem for our build worker.