How to import and use bpmn file in vue component with aid of raw-loader

Question

I'm new to bpmn-js and try to import and use a .bpmn file in a vue.js component (BPMNViewer.vue). My research only brought up to use the raw-loader. So I'm kind of at a loss here.

<script>
import demo from './examples/demo.bpmn'
...

export default {
  data() {
    return {
      xmlData: demo,
    };
  }
}

This results in the following Error:

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 try to integrate the raw-loader in my vue.config.js:

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();
    }
})

My package.json:

{
  "name": "bpmn-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bpmn-js": "^7.3.1",
    "bpmn-js-cli": "^2.0.0",
    "bpmn-js-properties-panel": "^0.37.2",
    "camunda-bpmn-moddle": "^4.4.0",
    "diagram-js-minimap": "^2.0.3",
    "inherits": "^2.0.4",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "cypress": "^8.3.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "raw-loader": "^3.1.0",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

Seems like I miss something here. Please let me know if I need to provide more information.

Answer 1

This looks like nothing Bpmn-js specific. Can you first ensure that the raw XML is indeed available in your xmlData object?

Your webpack may not be configured to use the raw-loader or not to use it for for the .bpmn extension. An inline solution would be

ìmport demo from 'raw-loader!./examples/demo.bpmn'

(if you don't have the raw-loader yet: npm install raw-loader --save-dev)