Metronic 8.1.2 Vuejs Demo1 Compiling Error

Hello,

I downloaded the Demo1 source for VueJs, however I couldn't compile it, may I ask your help?

Node: 16.14.2 npm: 8.5.0 Metronic: 8.1.2

When I run the command npm run start, it comes the following error by the end of compilation:

12 problems (12 errors, 0 warnings) like this: [eslint] /mnt/d/sandbox/metronic-vue/src/components/modals/forms/CreateAPIKeyModal.vue 270:5 error Name "Form" is reserved in HTML vue/no-reserved-component-names

Then several erros related to CaseSensitivePathsPlugin

Module not found: Error: [CaseSensitivePathsPlugin] /mnt/d/sandbox/metronic-vue/src/components/kt-datatable/KTDataTable.vue does not match the corresponding path on disk KTDatatable.vue.

Then a couple errors related to a endingShape property

webpack compiled with 7 errors ERROR in src/components/widgets/charts/Widget1.vue:135:9 TS2322: Type '{ horizontal: false; columnWidth: string; endingShape: string; }' is not assignable to type '{ horizontal?: boolean | undefined; columnWidth?: string | undefined; barHeight?: string | undefined; distributed?: boolean | undefined; borderRadius?: number | number[] | undefined; rangeBarOverlap?: boolean | undefined; rangeBarGroupRows?: boolean | undefined; colors?: { ...; } | undefined; dataLabels?: { ...; } |...'. Object literal may only specify known properties, and 'endingShape' does not exist in type '{ horizontal?: boolean | undefined; columnWidth?: string | undefined; barHeight?: string | undefined; distributed?: boolean | undefined; borderRadius?: number | number[] | undefined; rangeBarOverlap?: boolean | undefined; rangeBarGroupRows?: boolean | undefined; colors?: { ...; } | undefined; dataLabels?: { ...; } |...'. 133 | horizontal: false, 134 | columnWidth: "30%",

135 | endingShape: "rounded", | ^^^^^^^^^^^^^^^^^^^^^^ 136 | }, 137 | }, 138 | legend: {

And lastly this error related to KTDataTable

ERROR in src/views/apps/customers/CustomersListing.vue:176:23 TS1261: Already included file name '/mnt/d/sandbox/metronic-vue/src/components/kt-datatable/KTDataTable.vue.ts' differs from file name '/mnt/d/sandbox/metronic-vue/src/components/kt-datatable/KTDatatable.vue.ts' only in casing. The file is in the program because: Imported via "@/components/kt-datatable/KTDataTable.vue" from file '/mnt/d/sandbox/metronic-vue/src/views/apps/customers/CustomersListing.vue.ts' Imported via "@/components/kt-datatable/KTDataTable.vue" from file '/mnt/d/sandbox/metronic-vue/src/components/customers/cards/overview/PaymentRecords.vue.ts' Imported via "@/components/kt-datatable/KTDataTable.vue" from file '/mnt/d/sandbox/metronic-vue/src/components/customers/cards/overview/Invoices.vue.ts' Imported via "@/components/kt-datatable/KTDataTable.vue" from file '/mnt/d/sandbox/metronic-vue/src/components/customers/cards/statments/Statement.vue.ts' Imported via "@/components/kt-datatable/KTDataTable.vue" from file '/mnt/d/sandbox/metronic-vue/src/views/apps/subscriptions/SubscriptionList.vue.ts' Imported via "@/components/kt-datatable/KTDataTable.vue" from file '/mnt/d/sandbox/metronic-vue/src/components/subscriptions/view/Invoices.vue.ts' Root file specified for compilation 174 | <script lang="ts"> 175 | import { defineComponent, ref, onMounted } from "vue";

176 | import Datatable from "@/components/kt-datatable/KTDataTable.vue"; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 177 | import { Sort } from "@/components/kt-datatable//table-partials/models"; 178 | import ExportCustomerModal from "@/components/modals/forms/ExportCustomerModal.vue"; 179 | import AddCustomerModal from "@/components/modals/forms/AddCustomerModal.vue";

In order to contextualize, I downloaded the source code from ThemeForest, then I also tried from the private repository on github. I also tried to compile on the Windows environment with PowerShell terminal, and on Linux environment with WSL. In all cases the error persists.

I'll appreciate any help!

Thank you.