Setting Node_Env to Production causes page to become unresponsive

[adrian549092]

Hi r3code team. I am fairly new to VUE and JS in general, and it is very possible that this issue is something that I have done wrong, but it seems to have something to do with having vue-vis-network component and setting the node_env environment variable to production. That being said, when I run my app with node_env set to development, everything seems to work perfectly fine. I would greatly appreciate if someone could give me a hand with this issue.

Also, I am currently using Webpack and vue-cli-service build to minify the app and serve it in production

This is how my app is set up:

//main.js

import { Network } from 'vue-vis-network';
import App from '@/App.vue';
import router from '@/router';
import store from '@/store';

Vue.component('network', Network);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

//MulticastFlows.vue

<template>
  <div>
    <v-container fluid grid-list-xs>
      <v-layout row class="multicastFlowsLayout">
        <v-flex d-flex xs8 class="mr-1">
          <MulticastFlowGraph
                  :loadingElements="loadingElements"
                  :nodes="nodes"
                  :edges="edges"
                  :options="options"
          />
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  name: 'MulticastFlows',
  components: {
    MulticastFlowGraph,
  },
  data() {
    return {
      loadingElements: false,
      nodes: [
        {
          id: '1',
          label: '1',
        },
        {
          id: '2',
          label: '2',
        },
      ],
      edges: [{ from: '1', to: '2', label: '1122' }],
      options: {
        layout: {
          hierarchical: {
            nodeSpacing: 200,
            levelSeparation: 100,
            edgeMinimization: false,
            blockShifting: false,
            direction: 'UD',
            sortMethod: 'directed',
          },
        },
        edges: {
          shadow: { enabled: true },
          arrows: 'to',
          arrowStrikethrough: false,
          smooth: {
            type: 'continuous',
          },
        },
        nodes: {
          physics: false,
          shape: 'box',
          shadow: { enabled: true },
        },
        physics: {
          enabled: false,
        },
      },
    };
  },
};
</script>

<style scoped>
  .multicastFlowsLayout {
    position: absolute;
    width: 98%;
    height: 95%;
  }
</style>

//MulticastFlowGraph.vue

<template>
    <v-card class="pa-2 mx-2 networkCard elevation-5">
        <network class="network"
                 ref="network"
                 :nodes="nodes"
                 :edges="edges"
                 :options="options"/>
    </v-card>
</template>

<script>
export default {
  name: 'MulticastFlowGraph',
  props: [
    'nodes',
    'edges',
    'options',
  ],
  data() {
    return {
    };
  },
};
</script>

<style scoped>
    .network {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;

    }
</style>

[amanpatel]

I am experiencing very similar issue. Although I'm not using vue-vis-network. Suggesting this might have something to do with vue and vue's build tooling.

[emptyfortress]

Same problem here. Interesting, but if I clear :options for vis-network and use just empty object - all worked fine in dev and prod mode. But if I set hierarchical layout in options, then page freeze in prod mode. May be this help.

[emptyfortress]

This may be related to this issue I manage to fix problem with this methods - manually set hierarchical layout in mounted hook.