Demo 4 Vue JS Error

Throwing this error when executing "npm run serve"

Already implemented
import { useI18n } from "vue-i18n";

Module not found: Error: Package path ./index is not exported from package D:\Development\Quote-Tool\Test\demo4\node_modules\vue-i18n (see exports field in D:\Development\Quote-Tool\Test\demo4\node_modules\vue-i18n\package.json)

ERROR in ./src/core/plugins/i18n.ts 1:0-44
Module not found: Error: Package path ./index is not exported from package D:\Development\Quote-Tool\Test\demo4\node_modules\vue-i18n (see exports field in D:\Development\Quote-Tool\Test\demo4\node_modules\vue-i18n\package.json)
@ ./src/main.ts 9:0-39 25:8-12

webpack compiled with 1 error
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: {

ERROR in src/components/widgets/charts/Widget2.vue:133: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?: { ...; } |...'.
131 | horizontal: false,
132 | columnWidth: "30%",
> 133 | endingShape: "rounded",
| ^^^^^^^^^^^^^^^^^^^^^^
134 | },
135 | },
136 | legend: {

ERROR in src/components/widgets/charts/Widget5.vue:133: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?: { ...; } |...'.
131 | horizontal: false,
132 | columnWidth: "12%",
> 133 | endingShape: "rounded",
| ^^^^^^^^^^^^^^^^^^^^^^
134 | },
135 | },
136 | legend: {

ERROR in src/components/widgets/charts/Widget6.vue:136:9
TS2322: Type '{ horizontal: false; endingShape: string; columnWidth: 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?: { ...; } |...'.
134 | bar: {
135 | horizontal: false,
> 136 | endingShape: "rounded",
| ^^^^^^^^^^^^^^^^^^^^^^
137 | columnWidth: "12%",
138 | },
139 | },

ERROR in src/components/widgets/mixed/Widget10.vue:116: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?: { ...; } |...'.
114 | horizontal: false,
115 | columnWidth: "50%",
> 116 | endingShape: "rounded",
| ^^^^^^^^^^^^^^^^^^^^^^
117 | },
118 | },
119 | legend: {

WAIT Compiling... 4:32:50 pm

Compiling...


ERROR Failed to compile with 1 error 4:33:24 pm

error in ./src/core/plugins/i18n.ts

Module not found: Error: Package path ./index is not exported from package D:\Development\Quote-Tool\Test\demo4\node_modules\vue-i18n (see exports field in D:\Development\Quote-Tool\Test\demo4\node_modules\vue-i18n\package.json)

ERROR in ./src/core/plugins/i18n.ts 1:0-44
Module not found: Error: Package path ./index is not exported from package D:\Development\Quote-Tool\Test\demo4\node_modules\vue-i18n (see exports field in D:\Development\Quote-Tool\Test\demo4\node_modules\vue-i18n\package.json)
@ ./src/main.ts 9:0-39 25:8-12

webpack compiled with 1 error
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: {

ERROR in src/components/widgets/charts/Widget2.vue:133: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?: { ...; } |...'.
131 | horizontal: false,
132 | columnWidth: "30%",
> 133 | endingShape: "rounded",
| ^^^^^^^^^^^^^^^^^^^^^^
134 | },
135 | },
136 | legend: {

ERROR in src/components/widgets/charts/Widget5.vue:133: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?: { ...; } |...'.
131 | horizontal: false,
132 | columnWidth: "12%",
> 133 | endingShape: "rounded",
| ^^^^^^^^^^^^^^^^^^^^^^
134 | },
135 | },
136 | legend: {

ERROR in src/components/widgets/charts/Widget6.vue:136:9
TS2322: Type '{ horizontal: false; endingShape: string; columnWidth: 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?: { ...; } |...'.
134 | bar: {
135 | horizontal: false,
> 136 | endingShape: "rounded",
| ^^^^^^^^^^^^^^^^^^^^^^
137 | columnWidth: "12%",
138 | },
139 | },

ERROR in src/components/widgets/mixed/Widget10.vue:116: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?: { ...; } |...'.
114 | horizontal: false,
115 | columnWidth: "50%",
> 116 | endingShape: "rounded",
| ^^^^^^^^^^^^^^^^^^^^^^
117 | },
118 | },
119 | legend: {

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 (3)

Hi Mikenify,

From your error it seems that in some widgets there are wrong properties in the chart configuration, it must be fixed in the latest Metronic version.

Can you try to remove these properties which throws error?

Thank you the error is fixed now

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