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 |
Just correcting a mistake, the command runned to get the erros actually is: npm run serve
Hi Gustavo,
Thank you for your feedback.
Unfortunately, we were not able to reproduce these errors in the latest Metronic version with the same node and npm versions.
It could be something related to your environment setup.
Can you try to remove endingShape properties from the apex-chart configuration?
Also please check KTDataTable.vue file name in folder src/components/kt-datatable/ it should be "KTDataTable.vue".
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
It worked with Yarn 1.22.19
Thank you for you answer!
Glad to hear that. All the best with your project!