Maximum callstack size Vite / Page keeps reloading

I’m using vite with rails and loading my custom-component like this:

main.js

import { defineCustomElement } from 'vue';
import Panel from '~/components/panel_custom/Panel.ce.vue';


const CustomElement = defineCustomElement(Panel);
window.customElements.define('panel-custom', CustomElement);

erb file

<panel-custom data="<%= props %>"></panel-custom>

<%= vite_javascript_tag 'note_panel' %>

When now opening the page it keeps reloading permanently. When commenting the import of my component the continuous reload stops. I thought it mioght be a problem in the component itself, but commenting all javascript didn’t fix the problem. And even using an empty component didn’t fix it. Is there a problem in including the custom-component?

May I ask how exactly you solved this problem? I think I have the same issue and can’t figure out how to fix it

It was a problem with the vite.json configuration file. The host config was missing:

  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036,
    "host": "0.0.0.0"  <-- HERE
  },

If you start your dev server and this part is missing, that’s the problem:

 vite v2.6.3 dev server running at:

  > Local: http://localhost:3036/vite-dev/
  > Network: use `--host` to expose          <-- MISSING

  ready in 429ms.

1 Like