Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 3 years ago
Webpack Laravel Vue
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Lauris Stepanovs Author 3 years 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.



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



Regards,
Lauris Stepanovs,
Keenthemes Support Team


user
William Troiano 3 years 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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(