Maximum call stack size exceeded error when running new Vue 3 app

[ErikCH]

Version

4.5.15

Reproduction link

github.com

Environment info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.11.1 - ~/.nvm/versions/node/v16.11.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.11.1/bin/yarn
    npm: 8.0.0 - ~/.nvm/versions/node/v16.11.1/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Edge: Not Found
    Firefox: 91.6.0
    Safari: 15.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.15 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.15 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-router:  4.5.15 
    @vue/cli-plugin-vuex:  4.5.15 
    @vue/cli-service: ~4.5.0 => 4.5.15 
    @vue/cli-shared-utils:  4.5.15 
    @vue/compiler-core:  3.2.31 
    @vue/compiler-dom:  3.2.31 
    @vue/compiler-sfc: ^3.0.0 => 3.2.31 
    @vue/compiler-ssr:  3.2.31 
    @vue/component-compiler-utils:  3.3.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.2.31 
    @vue/reactivity-transform:  3.2.31 
    @vue/runtime-core:  3.2.31 
    @vue/runtime-dom:  3.2.31 
    @vue/server-renderer:  3.2.31 
    @vue/shared:  3.2.31 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.0.0 => 7.20.0 
    vue: ^3.0.0 => 3.2.31 
    vue-eslint-parser:  7.11.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.8 (16.8.3)
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. vue create test-vue-app123
2. Choose Vue 3 Default
3. cd test-vue-app123
4. npm run serve

See error
ERROR Failed to compile with 1 error 10:23:21 AM

error in ./src/App.vue?vue&type=script&lang=js

Syntax Error: RangeError: ....App.vue: Maximum call stack size exceeded
at Array.map ()
at Array.map ()
at Array.map ()
at Array.map ()
at Array.map ()

@ ./src/App.vue?vue&type=script&lang=js 1:0-262 1:0-262 1:263-514 1:263-514
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.128:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

What is expected?

No errors when running

What is actually happening?

Can't compile, app won't run.

[9mm]

YESSS...... this was driving me insane all morning. I'm so glad it's not just me

[tony19]

Seems to be getting stuck in an infinite recursion in @ampproject/remapping while building the source maps.

Call stack

 (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:230)
build (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:206)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:230)
build (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:206)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:230)
build (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:206)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:230)
build (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:206)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:230)
build (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:206)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:230)
build (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:206)
buildSourceMapTree (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:198)
remapping (/Users/tony/src/tmp/test-vue-app123/node_modules/@ampproject/remapping/dist/remapping.umd.js:273)
mergeSourceMap (/Users/tony/src/tmp/test-vue-app123/node_modules/@babel/core/lib/transformation/file/merge-map.js:19)
generateCode (/Users/tony/src/tmp/test-vue-app123/node_modules/@babel/core/lib/transformation/file/generate.js:75)
run (/Users/tony/src/tmp/test-vue-app123/node_modules/@babel/core/lib/transformation/index.js:55)
transform (/Users/tony/src/tmp/test-vue-app123/node_modules/@babel/core/lib/transform.js:25)
step (/Users/tony/src/tmp/test-vue-app123/node_modules/gensync/index.js:261)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/gensync/index.js:273)
async.call.result.err.err (/Users/tony/src/tmp/test-vue-app123/node_modules/gensync/index.js:223)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/gensync/index.js:189)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/@babel/core/lib/gensync-utils/async.js:74)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/gensync/index.js:113)
step (/Users/tony/src/tmp/test-vue-app123/node_modules/gensync/index.js:287)
 (/Users/tony/src/tmp/test-vue-app123/node_modules/gensync/index.js:273)
async.call.result.err.err (/Users/tony/src/tmp/test-vue-app123/node_modules/gensync/index.js:223)

A workaround is to configure Webpack's devtool to something other than eval or eval-source-map (e.g., you can pick eval-cheap-source-map):

Vue CLI 5.x:

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  configureWebpack: {
    devtool: 'eval-cheap-source-map',
  },
})

Vue CLI 4.x:

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'eval-cheap-source-map',
  },
}

[bertday]

@tony19 would love to use your workaround but I'm getting an error:

 ERROR  TypeError: defineConfig is not a function

I'm using @vue/cli-service 4.5.0.

---

SOLVED: I took out the call to defineConfig per the Vue CLI docs and it works! Thanks again for this awesome quickfix!

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'eval-cheap-source-map',
  },
};

[efess]

I'm getting this error while running build as well, and am currently working around it by disabling source maps using productionSourceMap: false

[bonlando]

I too am having the same issue, same with a co-worker

[tony19]

This was caused by babel/babel#14273. Fixed in Babel v7.17.4.

[ErikCH]

I just deleted my lock files and node_modules and it's working again!

[sodatea]

Closing as it's been fixed in babel.

[wal0x]

After updating my vue 2 app cli dependecies from 4.5.18 to 4.5.19 I got the error Maximum call stack size exceeded when I run the Mocha/Chai unit tests. I found that it was specifically caused by the sub dependency babel-preset-app:4.5.19.
Didn't find a solution until I tried desperately to add the line suggested by @tony19 devtool: 'eval-cheap-source-map' and it worked.