Parcel 2: @parcel/transformer-babel: Support for the experimental syntax 'optionalChaining' isn't currently enabled:

🐛 bug report

When trying to use a babel proposal, e.g optional chaining, Parcel 2 throws an error

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

.babelrc

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

{
  "private": true,
  "name": "web",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
    "parcel": "^2.0.0-alpha.3.2"
  },
  "scripts": {
    "dev": "parcel src/index.html"
  },
  "browserslist": [
    "last 1 Chrome versions"
  ]
}

🤔 Expected Behavior

Parcel should use the current babelrc config

😯 Current Behavior

Parcel throws

× @parcel/transformer-babel: Support for the experimental syntax 'optionalChaining' isn't currently enabled

💻 Code Sample

const foo = undefined?.bar

[xfoxfu]

I have a similar problem, when using parcel v2 alpha3 with a TypeScript file, the optional chaining operator also raises the error above. I think TypeScript files compiled by tsc does not emit an optional chaining operator.

[mischnic]

3917-babel-proposal
├── package.json // {"workspaces": ["test"]}
├── test
│   ├── .babelrc // {"plugins": ["@babel/plugin-proposal-optional-chaining"]}
│   ├── index.js
│   └── package.json
└── yarn.lock

The babelrc isn’t used because this to babel https://github.com/parcel-bundler/parcel/blob/92fd22f262eb6f301bfd00769066a8f6fb2ef1e4/packages/transformers/babel/src/config.js#L36-L40 doesn’t find it.

By default, Babel will only search for .babelrc files within the “root” package because otherwise Babel cannot know if a given .babelrc is meant to be loaded, or if it’s “plugins” and “presets” have even been installed, since the file being compiled could be inside node_modules, or have been symlinked into the project. https://babeljs.io/docs/en/options#babelrcroots

cc @padmaia might have more insight into the babel config resolution.

> require("@babel/core").loadPartialConfig({
... 	filename: '.../3917-babel-proposal/test/index.js',
... 	cwd:'.../3917-babel-proposal/test/',
... 	root:'.../3917-babel-proposal'
... })
PartialConfig {
  options: {
    filename: '.../3917-babel-proposal/test/index.js',
    cwd: '.../3917-babel-proposal/test',
    root: '.../3917-babel-proposal',
    babelrc: false,
    configFile: false,
    passPerPreset: false,
    envName: 'development',
    plugins: [],
    presets: []
  },
  babelignore: undefined,
  babelrc: undefined,
  config: undefined
}

To explicitly allow them with babelrcRoots:

> require("@babel/core").loadPartialConfig({
... 	filename: '.../3917-babel-proposal/test/index.js',
... 	cwd:'.../3917-babel-proposal/test/',
... 	root:'.../3917-babel-proposal',
... 	babelrcRoots: [".","./test"]
... })
PartialConfig {
  options: {
    filename: '.../3917-babel-proposal/test/index.js',
    cwd: '.../3917-babel-proposal/test',
    root: '.../3917-babel-proposal',
    babelrcRoots: [ '.', './test' ],
    babelrc: false,
    configFile: false,
    passPerPreset: false,
    envName: 'development',
    plugins: [ [ConfigItem] ],
    presets: []
  },
  babelignore: undefined,
  babelrc: '.../3917-babel-proposal/test/.babelrc',
  config: undefined
}