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 |
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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

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!

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(