Why can't I import Dagre into my Vite app?

Problem:
@dagrejs/dagre is CommonJS, whereas internally it does something like require('@dagrejs/graphlib')
it’s Dagre internally doing a dynamic require('@dagrejs/graphlib'), which Vite doesn’t like in ESM mode Because Vite (and ESM builds) cannot statically analyze dynamic require i.e The pre-bundling step cannot statically analyze a dynamic require

Solution:
Use named imports instead of default import like below

import as dagre from '@dagrejs/dagre';

import  as dagre from '@dagrejs/dagre';
import { Position, useVueFlow } from '@vue-flow/core';
import { ref } from 'vue';
export function useLayout() {
  const graph = ref(new dagre.graphlib.Graph());
  function layout(nodes, edges, direction) {
    const dagreGraph = new dagre.graphlib.Graph();
    // configure graph
    dagreGraph.setGraph({ rankdir: direction });
    // add nodes & edges...
    dagre.layout(dagreGraph);
    return nodes;
  }
  return { graph, layout };
}

This works because Vite can statically analyze import * as dagre.

Also check the below given link, its another language(chinese simplified) but addressing the same problem.

Reference article showing how to build a detailed process diagram component using Vue Flow and Dagre.