New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Laravel Starter Install


I am new to Laravel and have followed this guide here: https://preview.keenthemes.com/laravel/metronic/docs/getting-started

Based on version: metronic_laravel_v8.3.1\starterkit

The deployment installs ok and the site is there, can login - there are some user management pages that maybe linked to laravel/breeze? however on the dashboard there are issues with charts / js in general. The button to expand the menu doesn't work and some charts are loaded multiple times.

Given I think this should work out of the box I can only suspect it's something in my setup. Current console output:


scripts.bundle.js:7903 
Uncaught TypeError: searchObject.on is not a function
at Object.init (scripts.bundle.js:7903:26)
at HTMLDocument.<anonymous> (scripts.bundle.js:7925:20)
at forwardEvent (livewire.js?id=df3a17f2:9440:14)
at HTMLDocument.<anonymous> (livewire.js?id=df3a17f2:9437:56)
at fireEventForOtherLibrariesToHookInto (livewire.js?id=df3a17f2:8039:14)
at livewire.js?id=df3a17f2:8016:7
Root.ts:413
Uncaught Error: You cannot have multiple Roots on the same DOM node
at Root.ts:413:11
at Module.o (Array.ts:93:3)
at new F (Root.ts:411:3)
at F.new (Root.ts:445:16)
at init (widgets.bundle.js:9096:23)
at widgets.bundle.js:9331:4
at Module.o (Utils.ts:27:3)
at initChart (widgets.bundle.js:9329:7)
at Object.init (widgets.bundle.js:9347:4)
at HTMLDocument.<anonymous> (widgets.bundle.js:9359:20)
Root.ts:413
Uncaught Error: You cannot have multiple Roots on the same DOM node
at Root.ts:413:11
at Module.o (Array.ts:93:3)
at new F (Root.ts:411:3)
at F.new (Root.ts:445:16)
at init (widgets.bundle.js:11078:23)
at widgets.bundle.js:11360:4
at Module.o (Utils.ts:27:3)
at initChart1 (widgets.bundle.js:11359:7)
at Object.init (widgets.bundle.js:11376:4)
at HTMLDocument.<anonymous> (widgets.bundle.js:11388:19)
create-app.js:24
Uncaught TypeError: stepperObj.on is not a function
at initStepper (create-app.js:24:14)
at Object.init (create-app.js:317:4)
at HTMLDocument.<anonymous> (create-app.js:326:17)
at forwardEvent (livewire.js?id=df3a17f2:9440:14)
at HTMLDocument.<anonymous> (livewire.js?id=df3a17f2:9437:56)
at fireEventForOtherLibrariesToHookInto (livewire.js?id=df3a17f2:8039:14)
at livewire.js?id=df3a17f2:8016:7
users-search.js:66
Uncaught TypeError: searchObject.on is not a function
at Object.init (users-search.js:66:26)
at HTMLDocument.<anonymous> (users-search.js:76:23)
at forwardEvent (livewire.js?id=df3a17f2:9440:14)
at HTMLDocument.<anonymous> (livewire.js?id=df3a17f2:9437:56)
at fireEventForOtherLibrariesToHookInto (livewire.js?id=df3a17f2:8039:14)
at livewire.js?id=df3a17f2:8016:7
plugins.bundle.js:41068
[Tagify]: input element is already Tagified - Same instance is returned.
Root.ts:1955
Uncaught TypeError: Failed to execute "getComputedStyle" on "Window": parameter 1 is not of type "Element".
at F._updateComputedStyles (Root.ts:1955:25)
at F._checkComputedStyles (Root.ts:1970:12)
at F._renderFrame (Root.ts:1083:9)
at F._runTicker (Root.ts:1115:22)
at Root.ts:1164:10
Root.ts:1955
Uncaught TypeError: Failed to execute "getComputedStyle" on "Window": parameter 1 is not of type "Element".
at F._updateComputedStyles (Root.ts:1955:25)
at F._checkComputedStyles (Root.ts:1970:12)
at F._renderFrame (Root.ts:1083:9)
at F._runTicker (Root.ts:1115:22)
at Root.ts:1164:10


I tried the version 9 however this didn't seem to have the user management in the menu but the dashboards looked ok. Maybe just not a fully fledged demo as yet but given the framework is new to me looking for a running start.

Any help greatly appreciated.


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)


Thank you for your response.

Unfortunately there was no improvement after following the steps provided.
There are also no errors when running npm run dev.



Hi Matthew

Could you please try to rebuild the assets.

Delete the existing compiled assets:
Remove everything inside public/js and public/css folders.

Open your terminal in your project root and run:
npm install

This will install all required dependencies.

Then run:
npm run dev

Try to clear cache:
php artisan cache:clear
php artisan view:clear

Check your terminal for any errors during npm run dev.


Thanks


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