Using import in Vue components gives “RangeError: Maximum call stack size exceeded” when building

Question

When building the Vue project, I get the following error:

ERROR Failed to compile with 1 errors
7:30:01 PM RangeError: Maximum call stack size exceeded

Array.join

loader.js:228 Function.Module._findPath internal/modules/cjs/loader.js:228:56

loader.js:578 Function.Module._resolveFilename internal/modules/cjs/loader.js:578:25

loader.js:507 Function.Module._load internal/modules/cjs/loader.js:507:25

loader.js:637 Module.require internal/modules/cjs/loader.js:637:17

helpers.js:22 require internal/modules/cjs/helpers.js:22:18

extract-chunks.js:35 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:35:22

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

extract-chunks.js:44 getNames [bidconnect-redefined]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

ERROR Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: vue-cli-service build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I deduced that there is a problem in import statement to import router. I confirmed it by adding this statement to another component and reproduced the same error.

import { router } from "@router";

Please advise me on how to address this issue.

Here is the index.js inside folder router:

import Vue from 'vue'
import Router from 'vue-router'
import AppLayout from '../components/admin/AppLayout'
import AuthLayout from '../components/auth/AuthLayout'
import lazyLoading from './lazyLoading'

Vue.use(Router)

const demoRoutes = []
if (process.env.NODE_ENV === 'development') {
  const VueBook = require('vue-book')

  demoRoutes.push(
    VueBook.createRoute({
      requireContext: require.context('./..', true, /.demo.vue$/),
      path: '/demo',
    }),
    VueBook.createRoute({
      requireContext: require.context('./../components', true, /.vue$/),
      path: '/presentation',
    }),
  )

  Vue.use(VueBook.VueBookComponents)
}

const EmptyParentComponent = {
  template: '<router-view></router-view>',
}

const router = new Router({
  routes: [
    ...demoRoutes,
    {
      path: '*',
      redirect: { name: 'dashboard' },
    },
    {
      path: '/auth',
      component: AuthLayout,
      children: [
        {
          name: 'login',
          path: 'login',
          component: lazyLoading('auth/login/Login'),
        },
        {
          name: 'logout',
          path: 'logout',
          component: lazyLoading('auth/logout/Logout'),
        },
        {
          name: 'signup',
          path: 'signup',
          component: lazyLoading('auth/signup/Signup'),
        },
        {
          name: 'company',
          path: 'company',
          component: lazyLoading('auth/company/Company'),
        },
        {
          name: 'companycontact',
          path: 'companycontact',
          component: lazyLoading('auth/companycontact/Companycontact'),
        },
        {
          path: '',
          redirect: { name: 'login' },
        },
      ],
    },
  ],
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    let user
    Vue.prototype.$Amplify.Auth.currentAuthenticatedUser().then((data) => {
      if (data && data.signInUserSession) {
        user = data
        next()
      }
    }).catch((e) => {
      console.log(e)
      next('/auth/login')
    })
    if (!user) {
      next()
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

Here is the Logout.vue component:

<template>
  <div class="logout">
  </div>
</template>

<script>
import { Auth } from 'aws-amplify'
import { AmplifyEventBus } from 'aws-amplify-vue';
import { store } from '@/store';
import { router } from '@/router';

export default {
  name: 'logout',

  data() {
    return {
      email: '',
      password: ''
      // signedIn: false
    }
  },

  created(){
    Auth.signOut()
        .then(
          data =>{
          this.$store.state.signedIn = !!data;
          alert("Logged out");
          this.$router.push('/auth/login');
        } )
        .catch(err => console.log(err));
  },

  }

</script>

<style lang="scss">
.login {

  @include media-breakpoint-down(md) {
    width: 100%;
    padding-right: 2rem;
    padding-left: 2rem;
    .down-container {
      display: none;
    }
  }

  h2 {
    text-align: center;
  }
  width: 21.375rem;

  .down-container {
    margin-top: 3.125rem;
  }
}
</style>

Abulafia Abulafia · Accepted Answer · 2019-01-26T16:20:07

It is quite hard to tell, but I think you've got a cyclical dependency. Correct me if I'm wrong, but

Fact: router/index.js is requiring the components context.

Assumption: Logout.vue is in the components directory.

Therefore: router/index.js has Logout.vue as dependency.

Assmption: Logout.vue's reference to @/router resolves to router/index.js

Therefore: Logout.vue has router/index.js as dependency.

If logout needs router need logout need router need logout needs router.... you see my point. Therefore the builder is running out of memory since it's hitting an infinite loop.

I think the way you are handling routing currently is completely impossible, since it seems that cyclical dependency is unavoidable. I'm afraid I am not a Vue expert, so can't tell you off the top of my head how you should be doing it. I would suggest making a new question asking how routing should be done, since that is actually the underlying problem here, not anything to do with imports.

Using import in Vue components gives “RangeError: Maximum call stack size exceeded” when building

1 Answers