Babel 7.7 Released With Improved TypeScript Support, Top-Level Await and More

MMS Founder
MMS Bruno Couriol

Article originally posted on InfoQ. Visit InfoQ

The recently released Babel 7.7 now parses top-level await, Flow enum declarations (Flow proposal), and proposes recovery options from certain syntax errors. Babel 7.7 now supports TypeScript 3.7. Babel also introduces a new optional babel.config.json configuration files, and miscellaneous other features and bug fixes.

Top-level await enables ECMAScript Modules (ESM) to await resources, causing other modules which import them to wait before they start evaluating their body. The Stage 3 proposal for instance allows developers to conditionally load a dependency or to perform app initialization:

const strings = await import(`./i18n/${navigator.language}.mjs`);

const connection = await dbConnector();

Usage of top-level await assumes that the module bundler also supports it. Developers using Rollup can enable the experimentalTopLevelAwait option. Developers using webpack 5 can use the experiments.topLevelAwait option. Starting Babel 7.7, @babel/preset-env will automatically enable @babel/plugin-syntax-top-level-await if the caller supports it.

By default, the Babel parser of prior versions throws an error whenever some invalid syntax is encountered. While this behavior fits the main babel use case (i.e. transpiling), it causes some inconveniences for other use cases originating from other babel clients (like babel-eslint or prettier). Babel 7.7 adds a new errorRecovery option to @babel/parser. When set to true, the resulting AST will have an errors property containing all the errors the parser was able to recover from.

Babel 7.7 additionally improves support for TypeScript 3.7. To optional chaining (a?.b) and nullish coalescing (a ?? b), supported in Babel since 7.0, Babel 7.7 adds the possibility for developers to use assertion functions and declare in class fields:

function assertString(x): assert x is string {
  if (typeof x !== "string") throw new Error("It must be a string!");

class Developer extends Person {
  declare usingBabel: boolean;

The support for declare in class fields is available behind a "allowDeclareFields" flag, supported by both @babel/plugin-transform-typescript and @babel/preset-typescript.

Babel 7.7.0 also brings support for a new babel.config.json configuration file, with the same behavior as babel.config.js. The new JSON format has better cacheability and serializability.

The Babel 7.7 release also comes with a host of bug fixes and other improvements, including memory usage improvements.

Babel is available under the MIT open source license. Contributions are welcome via the Babel GitHub organization and should follow Babel’s contribution guidelines and code of conduct. Donations to support the project may also be made via Open Collective.

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.