How can I include dagre/graphlib in a vue.js site built with vite

Question

I want to include dagre (or graphlib, get same issues) in a vite based vue project but hitting issues at either runtime or build time depending on options I've tried.

➜ npm create vite@latest
✔ Project name: … demo
✔ Select a framework: › vue
✔ Select a variant: › vue

I add the library npm install dagre and import it in the hello-world template that was created, resulting in

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import dagre from 'dagre'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

If I run npm run dev the site loads in the browser happily. If I run npm run build && npm run preview I get the following error:

TypeError: Cannot read properties of undefined (reading 'Graph')

This seems to be to do with the import mechanism of the commonjs libraries.

I install npm install @rollup/plugin-commonjs --save-dev and moved over to the following config (vite.config.js)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import commonjs from '@rollup/plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
            plugins: [commonjs()]
        }
    }
})

But now hit an error at build time:

> [email protected] build
> vite build

vite v2.9.8 building for production...
transforming (31) node_modules/dagre/lib/greedy-fas.jsUnexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000./lib/graphlib?commonjs-proxy"
(commonjs) load "\u0000./lib/layout?commonjs-proxy"
(commonjs) load "\u0000./lib/debug?commonjs-proxy"
(commonjs) load "\u0000./lib/util?commonjs-proxy"
(commonjs) load "\u0000./lib/version?commonjs-proxy"
(commonjs) load "\u0000./lodash?commonjs-proxy"
(commonjs) load "\u0000./acyclic?commonjs-proxy"
(commonjs) load "\u0000./normalize?commonjs-proxy"
(commonjs) load "\u0000./rank?commonjs-proxy"
(commonjs) load "\u0000./util?commonjs-proxy"
(commonjs) load "\u0000./parent-dummy-chains?commonjs-proxy"
(commonjs) load "\u0000./nesting-graph?commonjs-proxy"
(commonjs) load "\u0000./add-border-segments?commonjs-proxy"
(commonjs) load "\u0000./coordinate-system?commonjs-proxy"
(commonjs) load "\u0000./order?commonjs-proxy"
(commonjs) load "\u0000./position?commonjs-proxy"
(commonjs) load "\u0000./graphlib?commonjs-proxy"
(commonjs) load "\u0000./greedy-fas?commonjs-proxy"
(commonjs) load "\u0000./feasible-tree?commonjs-proxy"
(commonjs) load "\u0000./network-simplex?commonjs-proxy"
error during build:
Error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000./lib/graphlib?commonjs-proxy"
(commonjs) load "\u0000./lib/layout?commonjs-proxy"
(commonjs) load "\u0000./lib/debug?commonjs-proxy"
(commonjs) load "\u0000./lib/util?commonjs-proxy"
(commonjs) load "\u0000./lib/version?commonjs-proxy"
(commonjs) load "\u0000./lodash?commonjs-proxy"
(commonjs) load "\u0000./acyclic?commonjs-proxy"
(commonjs) load "\u0000./normalize?commonjs-proxy"
(commonjs) load "\u0000./rank?commonjs-proxy"
(commonjs) load "\u0000./util?commonjs-proxy"
(commonjs) load "\u0000./parent-dummy-chains?commonjs-proxy"
(commonjs) load "\u0000./nesting-graph?commonjs-proxy"
(commonjs) load "\u0000./add-border-segments?commonjs-proxy"
(commonjs) load "\u0000./coordinate-system?commonjs-proxy"
(commonjs) load "\u0000./order?commonjs-proxy"
(commonjs) load "\u0000./position?commonjs-proxy"
(commonjs) load "\u0000./graphlib?commonjs-proxy"
(commonjs) load "\u0000./greedy-fas?commonjs-proxy"
(commonjs) load "\u0000./feasible-tree?commonjs-proxy"
(commonjs) load "\u0000./network-simplex?commonjs-proxy"
    at process.handleEmptyEventLoop (/Users/wob/src/tmp/vuevitetest/demo/node_modules/rollup/dist/shared/rollup.js:23127:20)
    at Object.onceWrapper (node:events:642:26)
    at process.emit (node:events:527:28)

What am I missing? (This may well be common to other commonjs systems, but other libs have worked so I feel there is something specific in the idioms used in dagre at play here).

Answer 1

A workaround is to add an option to the CommonJS compilation module, it's discussed on GitHub: https://github.com/vitejs/vite/issues/5759#issuecomment-1034461225

Vite's config file should be changed like so:

build: {
    commonjsOptions: {
        ignoreTryCatch: false
    }
}

Also be sure to remove the CommonJS Rollup plugin.