I am running vuejs-laravel application, on local server its running with no error, but when I upload the files to live server, i am getting RangeError: Maximum call stack size exceeded on 2 pages and rest the application is working fine.
I have multi time checked there is no recursive function, no variable overriding and even there is not such big data or request i am sending or receiving.
The most important point is that the 2 pages are working in Firefox but i am getting the error in Google Chrome, i need someone to help me out been stuck in this error from 2 weeks.
Regards
app.js
import { createApp } from 'vue';
window.axios = require('axios');
import App from './App.vue';
import router from './router';
import store from './store';
import VueNextSelect from 'vue-next-select';
import vueCountriesCities from "vue-countries-cities";
import vue3StarRatings from "vue3-star-ratings";
global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
import './assets/css/main.css';
import './assets/scss/main.scss';
const app = createApp(App);
app.component('vue-select', VueNextSelect);
app.component("countriesCities", vueCountriesCities);
app.component("vue3-star-ratings", vue3StarRatings);
app.use(store).use(router).mount('#app');
router.js
import { createRouter, createWebHistory } from 'vue-router';
import { elementScrollIntoView } from "seamless-scroll-polyfill";
const routes = [
{
path: '/',
name: 'Main',
component: () => import('./pages/Main.vue')
},
{
path: '/about',
name: 'About',
component: () => import('./pages/About.vue')
},
{
path: '/trainers',
name: 'Our Trainers',
component: () => import('./pages/OurTrainers.vue')
},
];
//MIX_API_URL
const router = createRouter({
history: createWebHistory(process.env.API_URL),
routes,
scrollBehavior(to, from, savedPosition) {
elementScrollIntoView(document.getElementById('app'), {
behavior: 'smooth',
block: "start"
})
}
});
export default router;
store.js
import { createStore } from 'vuex';
import { trainers } from './trainers';
export default createStore({
modules: {
trainers,
}
});
App.vue
<template>
<main>
<Header />
<div class="mt-1">
<router-view></router-view>
</div>
<!-- <Partners /> -->
<Cookies />
<Footer />
</main>
</template>
<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import Cookies from "./components/Cookies.vue";
// import Partners from "./components/Partners.vue";
export default {
components: {
Header,
Footer,
Cookies,
// Partners,
},
};
</script>
<style>
</style>
Home.vue
<template>
<div>
<main class="main-page">
<!-- <div class="main-slider"></div> -->
<div class="main-context container">
<div class="main-text">
<h1 class="main-header search-header">
Find the perfect trainer for yourself
</h1>
<Search />
</div>
<div class="sportsmen"></div>
</div>
<Partners />
</main>
<!-- Section starts -->
<section class="about container">
<div class="left">
<h2 class="section-heading">
<span>About</span><br />
BeMyPrivateTrainer
</h2>
<hr class="gradient-hr" />
<p>
<span class="bold">BeMyPrivateTrainer</span> is the platform where
trainers, dietitians and people who are seeking them can meet.
</p>
<p>
<span class="bold">With us</span>, you can find a highly qualified
trainer in any kind of sports or dietitian to keep you heartless near
you or any part of the world.
</p>
<p>
<span class="bold">Only professionals</span> with proven records and
certificationsare registered on our platform. We want you to be healthy
and good looking. Find your trainer or dietitians with us!
</p>
</div>
<div class="iframe-main-item">
<iframe src="https://www.youtube.com/embed/3LUOzeyXXAE" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</section>
<!-- Section starts -->
<section class="about container">
<div class="left">
<img class="fighters" src="../assets/img/Fighters.png" alt="" />
</div>
<div class="right">
<h2 class="section-heading">What we do</h2>
<hr class="gradient-hr" />
<p>
<span class="bold">For users:</span> <br />
We help you to find trainers and dietitians according to your criteria
of selection, in your city or area.
</p>
<p>
Just through two simple steps: <br />
Step 1: Browse into our website and sign up with us.<br />
Step 2: Log in to your account and search for the best private and
professional trainer according to your choice.
</p>
<p>
<span class="bold">For trainers and dietitians:</span>
<br />
Trainers and Dietitians should have to register to be able to get hired
by the prospective members in their city or area and they can
consequently earn money by guiding training and diet.
</p>
<p>
We are committed to giving our members the best available choices to
enable them to get the best outcomes they are looking for; as we are
aware of the fact that each member has distinctive goals in terms of
sport and training.
</p>
</div>
</section>
<article class="colorful-part">
<div class="colorful-part__content container">
<div class="colorful-part_text">
<h3 class="colorful-part_heading">Become a partner</h3>
<button @click="showPartnerForm" class="white-btn">Get Started</button>
</div>
<img src="../assets/img/become-partner.png" alt="article picture" />
<transition name="fade">
<ParnerForm v-if="partherFormVisible" @closePartnerForm="closePartnerForm" />
</transition>
</div>
</article>
<!-- Section starts -->
<section class="our-trainers container">
<h2 class="section-heading">Our trainers</h2>
<hr class="gradient-hr" />
<!-- trainers card slider -->
<Slider />
</section>
<section class="world">
<div class="container">
<h2 class="section-heading">We are all over the world</h2>
<hr class="gradient-hr" />
</div>
<div class="world-pic"></div>
</section>
</div>
</template>
<script>
import Slider from "../components/Trainerslider.vue";
import ParnerForm from "../components/popup/BecomePartnerForm.vue";
import Search from "../components/Search.vue";
import Partners from "../components/Partners.vue";
export default {
data() {
return {
partherFormVisible: false,
};
},
components: {
Slider,
ParnerForm,
Search,
Partners
},
methods: {
showPartnerForm() {
this.partherFormVisible = true;
},
closePartnerForm() {
this.partherFormVisible = false;
},
},
};
</script>