Set server.hmr.overlay to false to disable the server error overlay.

when i write the npm run dev
its running but when i go to the website
this error is display to me :

Cannot read properties of undefined (reading 'length')
at memoizedBinarySearch (file:///D:/DevOps/Sahab-Vue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:9948:25)
at traceSegmentInternal (file:///D:/DevOps/Sahab-Vue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:10055:17)
at originalPositionFor$1 (file:///D:/DevOps/Sahab-Vue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:10041:23)
at formatError (file:///D:/DevOps/Sahab-Vue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40037:54)
at TransformContext.error (file:///D:/DevOps/Sahab-Vue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39971:19)
at Object.transform (file:///D:/DevOps/Sahab-Vue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40231:25)
at async loadAndTransform (file:///D:/DevOps/Sahab-Vue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36615:29
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

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

Hi,

Could you please specify which metronic version and which demo are you using?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

i used the 8.1.6 version and i used the demo number 8

Unfortunately, we were not able to reproduce this issue in the latest Metronic version.

Can you specify which node and npm versions are you using?

Do you have the same error in other demos?

Also if there are any steps on how we can reproduce this please describe them.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

The demo I'm using is number8 that works well
But I am working on a special project
And when this demo is updated
I'm doing a comparison with my own project
This error occurred when running
node v18.12.0
npm 9.1.2

Hi,

It looks like this issue might be related to how you are referring to the node_modules folder.
For example, in App.vue, when you are importing styles instead of @import "~bootstrap-icons/font/bootstrap-icons.css"; use
@import "bootstrap-icons/font/bootstrap-icons.css";.

Alternatively, you can add a new alias to your vite.config.js.

resolve: {
...
alias: [
{
find: /^~(.*)$/,
replacement: 'node_modules/$1',
},
],
},

Regards,
Lauris Stepanovs,
Keenthemes Support Team

i dont know if this issue or not but i think yes this is the issue
because i returned the migrate files again from 8.1.5 to 8.1.6 so now its working
thanks Keenthemes Support Team
thanks Lauris Stepanovs

Hi,

In Metronic v8.1.6 we migrated to Vue-create with Vite which is now recommended stack for Vue projects.

If in your project you are using vue-cli, then some of the paths might not be compatible, Metronic older versions can be downloaded from our Github page.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

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