Use of transform-runtime + proposal-decorators plugins causes Maximum call stack size exceeded

[purtuga]

Bug Report

Current Behavior
The use of @babel/plugin-proposal-decorators together with @babel/plugin-transform-runtime generates a bundle that causes a infinite loop (around _typeof() and _typeof2() eventually causing the browser to throw Uncought RangeError: Maximum call stack size exceeded.

If I remove transform-runtime from the configuration, the bundle generated does not emit any errors.

Input Code

• REPL or Repo link if applicable:

class Foo {
    @propDecorator
    get method1() {
        return  "one";
    }
}

function propDecorator(d) {
    return d;
}

Expected behavior/code
The transformed code should not cause an infinite loop

Babel Configuration (.babelrc, package.json, cli command)

{
    "test": {},
    "loader": "babel-loader",
    "options": {
        "babelrc": false,
        "presets": [
            [
                "@babel/preset-env",
                {
                    "modules": false,
                    "loose": false,
                    "forceAllTransforms": true
                }
            ]
        ],
        "plugins": [
            [
                "@babel/plugin-transform-runtime",
                {
                    "corejs": false,
                    "helpers": true,
                    "regenerator": true,
                    "useESModules": true
                }
            ],
            [
                "@babel/plugin-proposal-decorators",
                {
                    "legacy": false,
                    "decoratorsBeforeExport": true
                }
            ]
        ]
    }
}

Environment

• Babel version(s): 7.2.0
• Node/npm version: Node v8.9.0, NPM v5.5.1
• OS: Windows
• Monorepo No
• How you are using Babel: Loader (webpack)

All packages:

    "@babel/core": "^7.2.0",
    "@babel/plugin-proposal-class-properties": "^7.2.1",
    "@babel/plugin-proposal-decorators": "^7.2.0",
    "@babel/plugin-transform-async-to-generator": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/runtime": "^7.2.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.27.0",
    "webpack-cli": "^3.1.2"

Thank you in advance for your help/assistance.

[babel-bot]

Hey @purtuga! 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.

[ChALkeR]

@purtuga have you tried the (undocumented) version option?

I.e.

"@babel/plugin-transform-runtime",
{
  "version": "7.3.0",
  "corejs": false,
  "helpers": true,
  "regenerator": true,
  "useESModules": true
}

Make sure that version is greater or equal to 7.1.0 and not greater than your @babel/runtime version.

Refs: #8766

[purtuga]

@ChALkeR - thanks for responding... I seem to remember another post that mentioned that undocumented option... I don't recall now if I tried it... but... whatever I did in my real project, it seems to be working now. Trying to remember back - I think at the time I was upgrading my entire build project, and might have been picking up some pre-built modules instead of importing from src.

I'm still on babel 7.2.0, but will try to find some time to upgrade and re-validate this to see if it is still an issue (I have to find the source for the example I posted above 😄 ).

Thanks again - appreciate your time on this.

[HiEv]

FYI, I've seen this problem twice now. Both times the code was something like:
if (typeof someObject.someProperty === "object") {
and the compiled version would cause some kind of "Maximum call stack size exceeded" error, because Babel would turn it into this:
if ("object" === _typeof(someObject.someProperty)) {
which would trigger the error.

In my case I just changed the code to:
if (someObject.someProperty) {
and that fixed it for me. That said, I only really needed to see if it was defined or not, I didn't specifically need to know that it was an object.

The other case (not my code) I just saw on Reddit:
Reddit: Trying to move to Tweego, weird macro problem

In both cases the tool used to compile the code was this here:
https://github.com/ChapelR/tweego-setup

[dryoma]

I can confirm that this

if (typeof someObject.someProperty === "object") {

is causing the InternalError: too much recursion (Firefox) | RangeError: Maximum call stack size exceeded (Chrome) | Error: Out of stack space (Edge) error.

Here's what babel packages are being used:

    "@babel/core": "7.4.3",
    "@babel/preset-env": "7.4.3",
    "@babel/preset-react": "7.0.0",
    "@babel/register": "7.4.0",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "babel-plugin-array-includes": "2.0.3",
    "babel-plugin-transform-es2015-typeof-symbol": "6.23.0",
    "babel-plugin-transform-object-assign": "6.22.0",