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

[Banou26]

🐛 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

[mischnic]

Works for me with the package.json you posted and doing a fresh yarn install.

{
  "scripts": {
    "build": "parcel build index.js"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
    "parcel": "^2.0.0-alpha.3.2"
  }
}

Maybe some dependency in your lockfile is outdated?

---

Unrelated:

"main": "index.js",
"dev": "parcel src/index.html"

The input and output file type don't match up.

[Banou26]

It seems the problem only occurs in my lerna monorepo, if i yarn install && yarn dev outside of it, everything works but once in it, it throws that error

[mischnic]

Indeed

[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

parcel/packages/transformers/babel/src/config.js

Lines 36 to 40 in 92fd22f

	let partialConfig = babelCore.loadPartialConfig({
	filename: config.searchPath,
	cwd: path.dirname(config.searchPath),
	root: options.projectRoot,
	});

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
}

[noahehall]

had this issue with parcel "parcel": "1.12.4",

upgrading to alpha saved my afternoon

edit

nope, still not working - seems to be the workspaces issue with bable. but I have my bableroots specified

root babelconfig

'use strict';

const path = require('path');

const corejs = {
  version: 3.4,
  proposals: true,
};

module.exports = function (api) {
  api.cache(true);
  const presets = [
    [
      // @see https://github.com/zloirock/core-js#babelpreset-env
      '@babel/preset-env',
      {
        targets: {
          node: true,
          browsers: 'last 2 versions, > 5%, safari tp, ie 10'
        },
        // import corejs polyfils as used by each file
        useBuiltIns: 'usage',
        // enable
        corejs,

      }
    ],
    '@babel/preset-react',
  ];
  const plugins = [
    'inline-dotenv',
    '@babel/transform-runtime',
    [
      'babel-plugin-root-import',
      {
        paths: [
          {
            root: path.resolve(__dirname, '@nirv', 'client'),
            // path from root
            rootPathSuffix: './app', // rename to src
            // expected import prefix
            rootPathPrefix: 'nirvClient/'
          },
          {
            root: path.resolve(__dirname, '@nirv', 'apiServer'),
            rootPathSuffix: './src',
            rootPathPrefix: 'nirvApi/',
          },
          {
            root: path.resolve(__dirname, '@nirv', 'pushServer'),
            rootPathSuffix: './src',
            rootPathPrefix: 'nirvPushServer/'
          },
          {
            root: path.resolve(__dirname, '@nirv', 'playerServer'),
            rootPathSuffix: './src',
            rootPathPrefix: 'nirvPlayerServer/'
          },
          {
            root: path.resolve(__dirname, '@nirv', 'activityServer'),
            rootPathSuffix: './src',
            rootPathPrefix: 'nirvActivityServer/'
          },
          {
            root: path.resolve(__dirname, '@nirv', 'skillzServer'),
            rootPathSuffix: './src',
            rootPathPrefix: 'nirvSkillzServer/'
          },
          {
            root: path.resolve(__dirname, '@nirv', 'verbzServer'),
            rootPathSuffix: './src',
            rootPathPrefix: 'nirvVerbzServer/'
          },
        ],
      },
    ],
    'tailcall-optimization',
    [
      '@babel/plugin-proposal-decorators',
      {
        decoratorsBeforeExport: true,
      }
    ],
    'lodash',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-private-methods',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-modules-commonjs',
    '@babel/plugin-transform-react-constant-elements',
    '@babel/plugin-transform-react-inline-elements',
    'dynamic-import-node',
    'transform-export-extensions',
  ];
  return {
    babelrcRoots: [
      // Keep the root as a root
      ".",

      // Also consider monorepo packages "root" and load their .babelrc files.
      "./@nirv/*"
    ],
    presets,
    plugins
  }
}

root/packages/childPackage/babel.confg

'use strict';

module.exports = function (api) {
  api.cache(false);
  return {
    extends:  '../../babel.config.js',
  }
}

[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.

[astegmaier]

@mischnic - I think that @Banou26's original issue was fixed by #4132, so it might be okay to close this.

For @xfoxfu's issue, it looks like there's some discussion in #4085 about how to make typescript features like class properties (and presumably also optional chaining) compile out-of-the-box.

@noahehall - if you use a nightly build that contains #4132 (post 2.0.0-nightly.125), I would expect your scenario to work) as long as your child package babel config is a babelrc file (not a babel.config.json file). See this matrix for an explanation of what is expected to work.

[xzilja]

Also it's a bit confusing at the moment to figure out what additional features are needed as babel plugins i.e. nullish coalescing works for me "out of the box" and apparently optional chaining needs plugin?

I started discussion here: #4819 but it seems like I just need to add optional chaining babel plugin at the root of my monorepo (babel.config.json file) or in my individual package (.babelrc file)?

Is #4132 available on latest alpha? And I am unable to test in nightly atm, it builds some weird output with .tsx files in dist folder

[devongovett]

I think the original issue here is fixed by #4133

As for when you need a babel plugin or not, that's up to what's included in babel-preset-env.

[lukejagodzinski]

This is still not fixed. I'm trying to use:

{
  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

in my .babelrc and it shows @parcel/transformer-babel: Support for the experimental syntax 'jsx' isn't currently enabled error.

When I move .babelrc to main monorepo directory then it starts working. It also works when I remove .babelrc file all together. So is it necessary to have Babel config or not? Do I just need to install plugin packages and it will pick it automatically without configuring?

[mischnic]

Are you using React? Parcel 2 applies preset-react by default in a React project if you don't have a babel config. You'll need add it explcitily if you add a babelrc

[lukejagodzinski]

@mischnic Yep I'm using React. I wasn't using .babelrc config for that project. And wanted to add support for the experimental feature, so I thought that when I add .babelrc with just this plugin then Parcel 2 will automatically detect it. But apparently it's enough to add it to the packages.json and it will be picked. So no need for me to add .babelrc. I don't know if it's described in docs or not but it was a little bit confusing for me. I will probably end up using .babelrc anyway as I need the same config for Jest. It would be probably good if Parcel 2 creates .babelrc automatically with proper config and just updates it when new feature is used

[mischnic]

But apparently it's enough to add it to the packages.json and it will be picked.

Nullish coalescing should be supported by a recent @babel/preset-env version, maybe you just need to bump your deps. Adding the dep might have caused that, Parcel doesn't determine the babel config packages on your dependencies.

It would be documented here once we get around to it https://v2.parceljs.org/languages/babel/...