Does Cesium is not support KmlDataSource to load KML file in vue framework?

In my case, I followed this demo code that it was success.
But, when I import a KML file from this project of folder which always get an error message.

Here is my code and my kml file.

CesiumViewer.vue

import * as Cesium from "cesium"
import "cesium/Source/Widgets/widgets.css";

const viewer = new Cesium.Viewer('app')
viewer.scene.debugShowFramesPerSecond = true
viewer.dataSources.add(Cesium.KmlDataSource.load('../SampleData/demo.kml',
    {
        camera: viewer.scene.camera,
        canvas: viewer.scene.canvas
    })
);

package.json

{
  "name": "vue-cesium",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "cesium": "^1.100.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "copy-webpack-plugin": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "webpack": "^5.75.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Tree Commend

KML File
demo.kml (336.8 KB)


Does Cesium is not support KmlDataSource to load KML file in vue framework?
Or here are some mistake of setting in my project?

Thank you for your anwser. :smile_cat: