Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

Laravel Vue Compilation Issues


Longtime metronic owner here, god I just love this theme.


I have been trying to install the Vue version into laravel, following the documentation, but I am encountering several issues.

Docs: https://preview.keenthemes.com/metronic8/vue/docs/#/vue-laravel-integration

1.) The build is EXTREMELY SLOW - Like for the stock, nothing custom it is taking 15+ Minutes, sometimes longer before #2 below happens... I am not on a resource-limited machine and this issue is only when I try to compile metronic.

- I've removed and reinstalled the node_modules many times
- I even tried on a fresh laravel project, Could not get it to compile either and was very slow

2.) Then even worse than waiting for it to compile, it errors. But I don't understand the error because I followed the documentation. I must admit when it comes to frontend technologies I am not as knowledgeable as I am with the backend so I don't even really know how to go about debugging this.

If anyone has any knowledge of how to fix this, would be appreciated.


user
William Troiano 1 year ago
Laravel Webpack Vue
2 Answers
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 (2)

user
William Troiano 1 year ago

Compiled with some errors in 28.61m <-- ouch

ERROR in ./resources/assets/metronic/v8.1.1/ts/src/layout/aside/Aside.vue?vue&type=script&lang=ts (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/ts-loader/index.js??clonedRuleSet-6!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/assets/metronic/v8.1.1/ts/src/layout/aside/Aside.vue?vue&type=script&lang=ts) 2:0-41
Module not found: Error: Package path ./index is not exported from package /var/www/html/node_modules/vue-i18n (see exports field in /var/www/html/node_modules/vue-i18n/package.json)

ERROR in ./resources/assets/metronic/v8.1.1/ts/src/layout/aside/Menu.vue?vue&type=script&lang=ts (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/ts-loader/index.js??clonedRuleSet-6!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/assets/metronic/v8.1.1/ts/src/layout/aside/Menu.vue?vue&type=script&lang=ts) 2:0-41
Module not found: Error: Package path ./index is not exported from package /var/www/html/node_modules/vue-i18n (see exports field in /var/www/html/node_modules/vue-i18n/package.json)

ERROR in ./resources/assets/metronic/v8.1.1/ts/src/layout/header/Menu.vue?vue&type=script&lang=ts (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/ts-loader/index.js??clonedRuleSet-6!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/assets/metronic/v8.1.1/ts/src/layout/header/Menu.vue?vue&type=script&lang=ts) 3:0-41
Module not found: Error: Package path ./index is not exported from package /var/www/html/node_modules/vue-i18n (see exports field in /var/www/html/node_modules/vue-i18n/package.json)

ERROR in ./resources/assets/metronic/v8.1.1/ts/src/layout/header/partials/UserMenu.vue?vue&type=script&lang=ts (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/ts-loader/index.js??clonedRuleSet-6!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/assets/metronic/v8.1.1/ts/src/layout/header/partials/UserMenu.vue?vue&type=script&lang=ts) 2:0-41
Module not found: Error: Package path ./index is not exported from package /var/www/html/node_modules/vue-i18n (see exports field in /var/www/html/node_modules/vue-i18n/package.json)

ERROR in ./resources/assets/metronic/v8.1.1/ts/src/core/plugins/i18n.ts 1:0-44
Module not found: Error: Package path ./index is not exported from package /var/www/html/node_modules/vue-i18n (see exports field in /var/www/html/node_modules/vue-i18n/package.json)

ERROR in /var/www/html/resources/assets/metronic/v8.1.1/ts/src/components/widgets/mixed/Widget10.vue.ts
82:8-30
[tsl] ERROR in /var/www/html/resources/assets/metronic/v8.1.1/ts/src/components/widgets/mixed/Widget10.vue.ts(82,9)
TS2322: Type '{ horizontal: false; columnWidth: string; endingShape: string; }' is not assignable to type '{ horizontal?: boolean | undefined; columnWidth?: string | undefined; barHeight?: string | und
efined; 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?: { ...; } |...'.

ERROR in /var/www/html/resources/assets/metronic/v8.1.1/ts/src/components/widgets/charts/Widget1.vue.ts
82:8-30
[tsl] ERROR in /var/www/html/resources/assets/metronic/v8.1.1/ts/src/components/widgets/charts/Widget1.vue.ts(82,9)
TS2322: Type '{ horizontal: false; columnWidth: string; endingShape: string; }' is not assignable to type '{ horizontal?: boolean | undefined; columnWidth?: string | undefined; barHeight?: string | und
efined; 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?: { ...; } |...'.

ERROR in /var/www/html/resources/assets/metronic/v8.1.1/ts/src/components/widgets/charts/Widget2.vue.ts
79:8-30
[tsl] ERROR in /var/www/html/resources/assets/metronic/v8.1.1/ts/src/components/widgets/charts/Widget2.vue.ts(79,9)
TS2322: Type '{ horizontal: false; columnWidth: string; endingShape: string; }' is not assignable to type '{ horizontal?: boolean | undefined; columnWidth?: string | undefined; barHeight?: string | und
efined; 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?: { ...; } |...'.

'.


Latest errors - which are actually different from my original errors - are down from 66 to these 10


user
Lauris Stepanovs Author1 year ago

Hi,

Yes there is a problem, mix task bundles all the Vue files and it takes a while, we will check this problem and fix it in upcoming releases.

For now, you can consider using a different approach from the tutorial below.

https://vegibit.com/how-to-use-vuejs-with-laravel-blade/

You can also try to keep a Vue as a separate instance and then write API using Laravel.
Check the tutorial below.

https://laraveldaily.com/laravel-8-vue-3-crud-composition-api/

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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