@babel/preset-env with target specified is not able to compile

[monsonjeremy]

I've had multiple instances where I have has issues with @babel/preset-env when specifying targets in my config for example

// .babelrc
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "node": true
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ],
  "sourceMaps": "inline",
  "retainLines": true,
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

When I run my application I get the following error:

TypeError: /src/server/preferences/handlers/sessions.js: Property name expected type of string but got null
    at validate (/node_modules/@babel/types/lib/definitions/utils.js:164:13)
    at Object.validate (/node_modules/@babel/types/lib/definitions/utils.js:201:7)
    at validateField (node_modules/@babel/types/lib/validators/validate.js:22:9)
    at validate (/node_modules/@babel/types/lib/validators/validate.js:16:3)
    at builder (/node_modules/@babel/types/lib/builders/builder.js:38:27)
    at Object.Identifier (/node_modules/@babel/types/lib/builders/generated/index.js:334:31)
    at /node_modules/regenerator-transform/lib/hoist.js:32:29
    at Array.forEach (<anonymous>)
    at varDeclToExpr (/node_modules/regenerator-transform/lib/hoist.js:29:23)
    at exit (/node_modules/regenerator-transform/lib/hoist.js:51:20)

I'm not entirely sure why this is happening but if I update my config to the following, it works:

// .babelrc
{
  "presets": [
     "@babel/env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ],
  "sourceMaps": "inline",
  "retainLines": true,
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

[babel-bot]

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

[nicolo-ribaudo]

What is your node version? Also, please add debug: true to preset-env's options and post the output.

[monsonjeremy]

@nicolo-ribaudo I've added the deubg option,
here is my updated babelrc:

// babelrc
{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "usage",
        "debug": true,
        "targets": {
          "node": true
        },
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ],
  "sourceMaps": "inline",
  "retainLines": true,
  "env": {
    "test": {
      "plugins": [
        "istanbul"
      ]
    }
  }
}

here is the output:

@babel/preset-env: `DEBUG` option

Using targets:
{
  "node": "12.13"
}

Using modules transform: auto

Using plugins:
  syntax-async-generators { "node":"12.13" }
  syntax-object-rest-spread { "node":"12.13" }
  syntax-json-strings { "node":"12.13" }
  syntax-optional-catch-binding { "node":"12.13" }
  transform-modules-commonjs { "node":"12.13" }
  proposal-dynamic-import { "node":"12.13" }

Using polyfills with `usage` option:

[/src/index.js] Based on your code and targets, core-js polyfills were not added.
New Relic enabled: false
/node_modules/@babel/core/lib/transformation/index.js:58
    throw e;
    ^

TypeError: /src/server/preferences/handlers/sessions.js: Property name expected type of string but got null
    at validate (/node_modules/@babel/types/lib/definitions/utils.js:164:13)
    at Object.validate (/node_modules/@babel/types/lib/definitions/utils.js:201:7)
    at validateField (/node_modules/@babel/types/lib/validators/validate.js:22:9)
    at validate (/node_modules/@babel/types/lib/validators/validate.js:16:3)
    at builder (/node_modules/@babel/types/lib/builders/builder.js:38:27)
    at Object.Identifier (/node_modules/@babel/types/lib/builders/generated/index.js:334:31)
    at /node_modules/regenerator-transform/lib/hoist.js:32:29
    at Array.forEach (<anonymous>)
    at varDeclToExpr (/node_modules/regenerator-transform/lib/hoist.js:29:23)
    at exit (/node_modules/regenerator-transform/lib/hoist.js:51:20) {
  code: 'BABEL_TRANSFORM_ERROR'

[JLHwung]

@monsonjeremy Can you draft a minimal reproducible example on REPL from /src/server/preferences/handlers/sessions.js?

[monsonjeremy]

Sorry for the delay @JLHwung.. Here's a really small example to reproduce.

// /src/server/preferences/handlers/sessions.js
export const deleteHandler = async (req, res) => {
  const { params } = req;
};

[monsonjeremy]

@JLHwung I've gone ahead and made a repo to test this out on, it should error out if you run npm start (node version 12)

[monsonjeremy]

@JLHwung I'm sorry I totally did not notice that I didn't link the repo.. Here is the link: https://github.com/monsonjeremy/babel-error-example

Edit: I've also updated the code to be an even more minimum reproducible example, seems like the issue lies in the transform regenerator plugin.

[JLHwung]

@monsonjeremy Thanks for the repo!

The issue comes from the fact regenerator does not recognize the object pattern in your source: (i.e. const { param } = req) We could submit an upstream fix to regenerator, but practically, if an engine does not support generator, it does not support destructuring either. Here is a list of supported engine versions.

"transform-regenerator": {
    "chrome": "50",
    "edge": "13",
    "firefox": "53",
    "safari": "10",
    "node": "6",
    "ios": "10",
    "samsung": "5",
    "opera": "37",
    "electron": "1.1"
  },

"transform-destructuring": {
    "chrome": "51",
    "edge": "15",
    "firefox": "53",
    "safari": "10",
    "node": "6.5",
    "ios": "10",
    "samsung": "5",
    "opera": "38",
    "electron": "1.2"
  },

As you can see versions with destructuring native support is greater than generator. So as a workaround, please add @babel/plugin-transform-destructuring to your babel config.

Out of curiosity, why do you add es2015 transforms as long as @babel/preset-env? Shouldn't @babel/preset-env prepare the minimal necessary transforms given your targets config?

[monsonjeremy]

@JLHwung This is an oversight on my part I guess. So if I have @babel/preset-env then I don't need any ES2015 transforms, only new transforms like @babel/plugin-proposal-optional-chaining? Or is preset env smart enough to see code like a?.b and transform it?

[JLHwung]

@monsonjeremy Yes. If you are using latest @babel/preset-env, @babel/plugin-proposal-optional-chaining has been included and will activate when your targets setting does not have native support.

[monsonjeremy]

Thanks for your help @JLHwung, really appreciate it! Feel free to close if needed!