[Bug]: "RangeError: Maximum call stack size exceeded" error (v7.17.2 -> v7.17.3)

[yusufkandemir]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

Faulty version:
https://github.com/yusufkandemir/quasar-babel-7.17.3-error

To reproduce the issue:

1. Clone the project
2. Run yarn to install the dependencies
3. Run yarn quasar dev to run the project
4. See the error

Working version with @babel/core v7.17.2:
https://github.com/yusufkandemir/quasar-babel-7.17.3-error/tree/babel-core-7.17.2

Configuration file name

babel.config.js

Configuration

{
  "assumptions": {},
  "compact": false,
  "filename": "/home/yusuf/dev/local/maximum-call-stack-test/src/App.vue",
  "inputSourceMap": {
    "version": 3,
    "sources": [
      "/home/yusuf/dev/local/maximum-call-stack-test/src/App.vue"
    ],
    "names": [],
    "mappings": ";;;;;wBACE,aAAe",
    "file": "/home/yusuf/dev/local/maximum-call-stack-test/src/App.vue",
    "sourceRoot": "",
    "sourcesContent": [
      "<template>\n  <router-view />\n</template>\n<script>\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"App\",\n});\n</script>\n"
    ]
  },
  "sourceMaps": true,
  "sourceFileName": "/home/yusuf/dev/local/maximum-call-stack-test/src/App.vue",
  "caller": {
    "name": "babel-loader",
    "target": "web",
    "supportsStaticESM": true,
    "supportsDynamicImport": true,
    "supportsTopLevelAwait": true
  },
  "targets": {
    "android": "91.0.0",
    "chrome": "89.0.0",
    "edge": "95.0.0",
    "firefox": "88.0.0",
    "ios": "12.0.0",
    "opera": "79.0.0",
    "safari": "13.0.0"
  },
  "cloneInputAst": true,
  "babelrc": false,
  "configFile": false,
  "browserslistConfigFile": false,
  "passPerPreset": false,
  "envName": "development",
  "cwd": "/home/yusuf/dev/local/maximum-call-stack-test",
  "root": "/home/yusuf/dev/local/maximum-call-stack-test",
  "rootMode": "root",
  "plugins": [],
  "presets": [
    [
      "@quasar/babel-preset-app",
      {}
    ]
  ]
}

Current and expected behavior

It is throwing RangeError: Maximum call stack size exceeded, I would expect it to run without any errors.

Error log:

 App •  ERROR  •  UI  in ./src/layouts/MainLayout.vue?vue&type=script&lang=js

RangeError: Maximum call stack size exceeded
  
  - sourcemap-codec.umd.js:36 Object.decode
    [maximum-call-stack-test]/[@jridgewell]/sourcemap-codec/dist/sourcemap-codec.umd.js:36:20
  
  - trace-mapping.umd.js:187 new TraceMap
    [maximum-call-stack-test]/[@jridgewell]/trace-mapping/dist/trace-mapping.umd.js:187:48
  
  - remapping.umd.js:230 
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:230:26
  
  - Array.map
  
  - remapping.umd.js:206 build
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:206:42
  
  - remapping.umd.js:230 
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:230:20
  
  - Array.map
  
  - remapping.umd.js:206 build
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:206:42
  
  - remapping.umd.js:230 
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:230:20
  
  - Array.map
  


 App •  ERROR  •  UI  in ./src/App.vue?vue&type=template&id=7ba5bd90

RangeError: Maximum call stack size exceeded
  
  - trace-mapping.umd.js:182 
    [maximum-call-stack-test]/[@jridgewell]/trace-mapping/dist/trace-mapping.umd.js:182:52
  
  - Array.map
  
  - trace-mapping.umd.js:182 new TraceMap
    [maximum-call-stack-test]/[@jridgewell]/trace-mapping/dist/trace-mapping.umd.js:182:48
  
  - remapping.umd.js:230 
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:230:26
  
  - Array.map
  
  - remapping.umd.js:206 build
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:206:42
  
  - remapping.umd.js:230 
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:230:20
  
  - Array.map
  
  - remapping.umd.js:206 build
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:206:42
  
  - remapping.umd.js:230 
    [maximum-call-stack-test]/[@ampproject]/remapping/dist/remapping.umd.js:230:20


 App •  COMPILATION FAILED  • Please check the log above for details.

Environment

System:
  OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
Binaries:
  Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
  Yarn: 1.22.17 - ~/.nvm/versions/node/v16.14.0/bin/yarn
  npm: 8.4.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
npmPackages:
  @babel/eslint-parser: ^7.13.14 => 7.17.0 
  eslint: ^7.14.0 => 7.32.0
  @babel/core: ^7.17.0 => 7.17.3

Possible solution

No response

Additional context

It works with v7.17.2, see the explanations and links in the Input code section.

[babel-bot]

Hey @yusufkandemir! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[alecslupu]

This may be related to #14272 ( which is fixed already, but not included in 7.17.3 )

[JLHwung]

This is likely a regression introduced in #14253.

[phryneas]

We had tons of reports on that for a basic reproduction of npx create-react-app js-test --template redux over in
reduxjs/redux-toolkit#2037 and reduxjs/redux-toolkit#2036

[jamesaucode]

Having the same issue with build amplify-js. Pinning to 7.17.2 solved the issue for now.

[JLHwung]

Fixed in v7.17.4.

[nicknish]

Thank you for the quick turnaround folks!