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 |


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  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle