vue.jsvuejs3vitedmnkogito

Wrong path and missing dependencies when integrating @kie-tools/kie-editors-standalone into Vue 3/Vite app


I'm building a Vue 3/TypeScript/Vite app, where one page is dedicated to showing a read-only DMN editor with a rules file. To this end, I'm using @kie-tools/kie-editors-standalone. Here is the Vue file in question:

<template>
  <h1>Rules</h1>

  <div id="dmn-editor-container"></div>

  <ErrorDialogueBox ref="errorDialogueBox"/>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import axios from "axios";
import {useAppConfigStore} from "@/stores/config.store";
import {storeToRefs} from "pinia";
import {useAuthStore} from "@/stores/auth.store";
import * as DmnEditor from "@kogito-tooling/kie-editors-standalone/dist/dmn";
import ErrorDialogueBox from "@/components/ErrorDialogueBox.vue";
import type {ApiError} from "@/api";

const {token} = storeToRefs(useAuthStore());
const {backendApi} = useAppConfigStore();

const webApi = backendApi();

const errorDialogueBox = ref<InstanceType<typeof ErrorDialogueBox> | null>(null);
const showError = (title: string, message: string) => errorDialogueBox.value?.showError(title, message);

onMounted(() => {
  webApi.get("/rules",
            {
              headers: {Authorization: `Bearer ${token.value}`},
            })
        .then(result => {
          const xml = result.data;
          const element = document.getElementById("dmn-editor-container");
          if (element) {
            DmnEditor.open({
              container: element,
              initialContent: Promise.resolve(xml),
              readOnly: true
            });
          } else {
            showError("DOM error", "Could not find dmn-editor-container element");
          }
        })
        .catch(error => {
          if (axios.isAxiosError(error)) {
            const apiError = error.response?.data as ApiError;
            console.log(apiError);
            showError("Could not fetch details", apiError.message || error.message);
          } else {
            console.log(error);
            showError("Could not fetch details", error as string);
          }
        });
});
</script>

<style scoped>
#dmn-editor-container {
  height: 70vh;
}
</style>

This is the package.json:

{
  "name": "woof-service-web",
  "version": "1.0.0-SNAPSHOT",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test": "echo 'no test'",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "e2e": "echo 'no e2e'",
    "package": "npm pack",
    "publish-to-nexus": "npm publish"
  },
  "publishConfig": {
    "registry": "https://nexus.woof.com/repository/WOOF-NPM-SNAPSHOTS/"
  },
  "dependencies": {
    "@kie-tools/kie-editors-standalone": "^0.30.0",
    "@types/bootstrap": "^5.2.6",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "keycloak-js": "^21.1.1",
    "pinia": "^2.1.3",
    "pinia-plugin-persistedstate": "^3.1.0",
    "sass": "^1.63.6",
    "vue": "^3.3.4",
    "vue-i18n": "^9.3.0-beta.21",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@tsconfig/node18": "^2.0.1",
    "@types/jsdom": "^21.1.1",
    "@types/node": "^18.16.17",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.3.2",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "jsdom": "^22.1.0",
    "npm-run-all": "^4.1.5",
    "typescript": "~5.0.4",
    "vite": "^4.3.9",
    "vitest": "^0.32.0",
    "vue-tsc": "^1.6.5"
  }
}

The diagram actually renders correctly, but the decision tables are all empty when clicking the pencil icon. There are also a lot of 404 errors in the console:

GET http://localhost:5173/jquery-ui/jquery-ui.min.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/bootstrap-daterangepicker/daterangepicker.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/bootstrap-select/css/bootstrap-select.min.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/uberfire-patternfly.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/patternfly.min.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/patternfly-additions.min.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/bootstrap-datepicker3-1.6.4.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/animate-3.5.2.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/bootstrap-notify-custom.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/card-1.0.1.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/bootstrap-slider-9.2.0.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/bootstrap-datetimepicker-2.4.4.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/typeahead-0.10.5.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/5E35D07B5D1913F943BD3FF64D140ED4.cache.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/clear.cache.gif 404 (Not Found)
GET http://localhost:5173/fonts/RedHatDisplay-Medium.woff2 net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/RedHatDisplay-Medium.woff net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/overpass-light.woff2 net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/overpass-light.woff net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/RedHatText-Regular.woff2 net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/RedHatText-Regular.woff net::ERR_ABORTED 404 (Not Found)

(Edited for clarity; over 1000 lines of error messages aren't very useful.)

So what appears to be going wrong:

  1. It attempts to load from the document root / instead of /node_modules.
  2. None of these are to be found anywhere in the library's package.json as a dependency.

As mentioned, I used Vite, whereas the library uses Webpack. I don't know if that makes a difference.

Any help is greatly appreciated.

Edit: updated to @kie-tools/kie-editors-standalone instead of @kogito-tooling/kie-editors-standalone, but that doesn't make a difference.


Solution

  • Turns out that this is (a bug in) the Spring Boot component. When requesting the DMN file, for some reason it doesn't return the decision tables. I got around it by creating my own endpoint that returns the DMN file.