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:
/
instead of /node_modules
.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.
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.