As a newcomer to bpmn-js, I am facing the challenge of importing and utilizing a .bpmn file within a vue.js component (BPMNViewer.vue). Despite my efforts in researching, I could only find recommendations to use the raw-loader. Consequently, I am currently stuck at this point.
<script>
import demo from './examples/demo.bpmn'
...
export default {
data() {
return {
xmlData: demo,
};
}
}
The above code snippet leads to the following Error message:
error in ./src/views/BPMNViewer.vue?vue&type=script&lang=js&
Module not found: Error: Can't resolve './examples/demo.bpmn' in '/bpmn-test/src/views'
ERROR in ./src/views/BPMNViewer.vue?vue&type=script&lang=js& (./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BPMNViewer.vue?vue&type=script&lang=js&) 12:0-39
Module not found: Error: Can't resolve './examples/demo.bpmn' in '/bpmn-test/src/views'
@ ./src/views/BPMNViewer.vue?vue&type=script&lang=js& 1:0-134 1:150-153 1:155-286 1:155-286
@ ./src/views/BPMNViewer.vue 2:0-62 3:0-57 3:0-57 10:2-8
@ ./src/router/index.js 3:0-48 12:15-25
@ ./src/main.js 3:0-29 9:2-8
webpack compiled with 1 error
I have attempted to include the raw-loader in my vue.config.js as follows:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack: config => {
config.module
.rule("bpmn")
.test(/\.bpmn$/)
.use("raw-loader")
.loader("raw-loader")
.end();
}
})
This is an excerpt from my package.json:
{
"name": "bpmn-test",
"version": "0.1.0",
"private": true,
...
It seems like there might be something missing in the setup. Any guidance or further information required would be highly appreciated.