Controls and MiniMap not rendering

[Devmond]

I have integrated Vueflow into an application by bundling via webpack and included the bundle and css in a webpage. It works for the most part except for some reason the controls and minimap components are not rendered.

I have observed the DOM and can see that those component are not instantiated, there are no errors.

Expected Behavior

Here's my basic html to paste in codepen, also attached is the css.

vueflow.css

<div id="vueflow">
  {{appLabel}}
  <div style="width:100%; height: 100vh;">

    
    <vue-flow :nodes="nodes"  :edges="edges">

      <background pattern-color="#aaa" :gap="8" />
      <controls position="bottom-left" />

    </vue-flow>

  </div>

</div>

Steps To Reproduce

You can include the attached bundle and css to codepen and see the same issue.

vueflow-bundle.js

If you use codepen, just include the attached bundle in
the js editor and add the following code:

window.addEventListener('load', (event) => {
 let vueflowApp = Vue.createApp({
                   "el":`#vueflow`,
                   data(){
                   	 return {
                       appLabel:"Vueflow App",
                     	nodes:[
  {
    id: '1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 0 },
    class: 'light',
  },
  {
    id: '2',
    type: 'output',
    data: { label: 'Node 2' },
    position: { x: 100, y: 100 },
    class: 'light',
  },
  {
    id: '3',
    data: { label: 'Node 3' },
    position: { x: 400, y: 100 },
    class: 'light',
  },
  {
    id: '4',
    data: { label: 'Node 4' },
    position: { x: 150, y: 200 },
    class: 'light',
  },
  {
    id: '5',
    type: 'output',
    data: { label: 'Node 5' },
    position: { x: 300, y: 300 },
    class: 'light',
  },
],
                        edges:[
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    animated: true,
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
    label: 'edge with arrowhead'
  },
  {
    id: 'e4-5',
    type: 'step',
    source: '4',
    target: '5',
    label: 'Node 2',
    style: { stroke: 'orange' },
    labelBgStyle: { fill: 'orange' },
  },
  {
    id: 'e3-4',
    type: 'smoothstep',
    source: '3',
    target: '4',
    label: 'smoothstep-edge',
  },
]
                     }
                   }
              });
  
              const components = {
                //"VueFlow":VueFlowModule.VueFlow.VueFlow,
                "Background":VueFlowModule.Background.Background, 
                //"BackgroundVariant":VueFlowModule.BackgroundVariant,
                "MiniMap":VueFlowModule.MiniMap.MiniMap,
                "MiniMapNode":VueFlowModule.MiniMap.MiniMapNode,
                "Controls":VueFlowModule.Controls.Controls,
                "ControlButton":VueFlowModule.Controls.ControlButton,
                "NodeToolbar":VueFlowModule.NodeToolbar.NodeToolbar,
                "NodeResizer":VueFlowModule.NodeResizer.NodeResizer,
                "NodeResizeControl":VueFlowModule.NodeResizer.NodeResizeControl
              }  
              
function isVueComponent(obj) {
                  return typeof obj === 'object' && obj !== null && typeof obj.setup === 'function';
              }

              for (const key in VueFlowModule.VueFlow) {
                  // Check if the property is a Vue component based on the presence of setup()
                  if (isVueComponent(VueFlowModule.VueFlow[key])) {
                      vueflowApp.component(key, VueFlowModule.VueFlow[key]);
                  }
              }
  
for(const [componentName,component] of Object.entries(components)){
		  vueflowApp.component(componentName,component);
              }   
  try{
  vueflowApp.mount("#vueflow");
  }catch(error){
    console.log(error)
    
  }
})

[bcakmakoglu]

Please provide a proper reproduction of this issue and not just some js file that I will surely not download.

[Devmond]

hi @bcakmakoglu here's a link showing the issue:
https://jsfiddle.net/h0mpn5ca/

The JS editor includes the bundle at the top and the app code at the bottom.

Also on a related note, is there a simple option to allow scrollbars beyond dragging the view pane? There is the prevent-scrolling flag, but turning it off doesn't display scrollbars (either vertical or horizontal).

We want users to be able to use scrollbars to navigate a process flow and use the controls to zoom.

[bcakmakoglu]

hi @bcakmakoglu here's a link showing the issue:
jsfiddle.net/h0mpn5ca

This isn't a proper and clean repro tbh, it's just some bundle code you generated from each VueFlow package and then pushed into a fiddle from what I can tell. It's basically impossible for me to debug and know how you even structured the bundle you generated like idk how you generate VueFlowModule and all its dependencies.

Also on a related note, is there a simple option to allow scrollbars beyond dragging the view pane?

If I understand you correctly, assuming you mean using a scrollbar for the viewport -> No.
What you can do is create a layout around VueFlow, add a translate and node extent to limit movement to that container and add a scrollbar to that container. Alas, I have no example for this so you'd have to figure it out on your own.

[bcakmakoglu]

Also transferring this to discussions since I am fairly certain this is not a bug but just an issue with how you use VueFlow in this context.

[Devmond]

hi @bcakmakoglu , the bundle is just run-of-the-mill webpack bundle.

/* import the required styles */
import "@vue-flow/core/dist/style.css";

/* import the default theme (optional) */
import "@vue-flow/core/dist/theme-default.css";

import '@vue-flow/minimap/dist/style.css';
import '@vue-flow/controls/dist/style.css';

let VueFlow = require("@vue-flow/core");
let Background  = require("@vue-flow/background");
let MiniMap  = require("@vue-flow/minimap");
let Controls = require("@vue-flow/controls");
let NodeToolbar = require("@vue-flow/node-toolbar");
let NodeResizer = require("@vue-flow/node-resizer");
//let { Background, BackgroundVariant, Controls, MiniMap } = requre('@vue-flow/additional-components')
let {  BackgroundVariant  } = require('@vue-flow/additional-components')

export default {VueFlow,Background, BackgroundVariant,MiniMap,Controls,NodeToolbar,NodeResizer};

web-pack config:

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  //mode: 'development',
  entry: './require-vueflow.js', // Your main application entry point
  output: {
    filename: 'vueflow-bundle.js', // Output bundle filename
    path: path.resolve(__dirname, 'dist'), // Output directory
    library: {
    name:'VueFlowModule', // Global variable name for your module
    type: 'var',
    export: 'default'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          //'vue-style-loader',
          'css-loader'          
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'vueflow.css', // Output filename for extracted CSS
    }),
  ],
  externals: {
	vue: "Vue",
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js' // Use the ESM build for bundlers
    }
  },
};

[bcakmakoglu]

I guess sth like this should work: https://jsfiddle.net/6dakb09z/27/

[bcakmakoglu]

Does the fiddle resolve your issue?

[Devmond]

hi @bcakmakoglu , the only difference I see with your change is that you are not using self-closing tags (ie void tags) for the background and controls elements, when I made the same change in my fiddle the issue went away.

It does make sense that those elements cannot be void since they do have children ultimately when rendered but the semantics between vue's tag processing and the DOM are unclear to me. I'd copied from the documentation on vueflow site.

I still can't get it to work in my application but that's likely something else.

In any case, thanks for your help, this can be closed.

[bcakmakoglu]

Depending on the env self-closing tags just don't quite work.

In your app make sure you actually use a browser global build if that's what you're going for and not a CJS build (which is what you used in your initial fiddle) since that is for node/bundler envs.