Babel's modular runtime helpers that provide transpilation support for modern JavaScript features
94
Module interoperability helpers provide seamless compatibility between CommonJS and ES Modules, handling import/export transformations and ensuring consistent behavior across different module systems.
Handles default imports from CommonJS modules, ensuring proper default export access.
/**
* Handles default imports from CommonJS
* @param obj - Module object to check for default export
* @returns Object with default property or original object
*/
function interopRequireDefault(obj: any): { default: any } | any;Usage Example:
import _interopRequireDefault from '@babel/runtime/helpers/esm/interopRequireDefault';
// Used by Babel for: import defaultExport from 'commonjs-module';
const _commonjsModule = _interopRequireDefault(require('commonjs-module'));
const defaultExport = _commonjsModule.default;
// Handles both cases:
// - CommonJS: module.exports = function() {}
// - ES Module: export default function() {}Behavior:
// CommonJS module without __esModule flag
const cjsModule = { foo: 'bar' };
interopRequireDefault(cjsModule);
// Returns: { default: { foo: 'bar' } }
// ES Module (has __esModule: true)
const esModule = { __esModule: true, default: 'value', named: 'export' };
interopRequireDefault(esModule);
// Returns: { __esModule: true, default: 'value', named: 'export' }
// CommonJS module that's a function
const fnModule = function() { return 'hello'; };
interopRequireDefault(fnModule);
// Returns: { default: function() { return 'hello'; } }Handles namespace imports from CommonJS modules, providing access to all exports.
/**
* Handles namespace imports from CommonJS
* @param obj - Module object to create namespace from
* @returns Namespace object with all exports
*/
function interopRequireWildcard(obj: any): any;Usage Example:
import _interopRequireWildcard from '@babel/runtime/helpers/esm/interopRequireWildcard';
// Used by Babel for: import * as namespace from 'commonjs-module';
const namespace = _interopRequireWildcard(require('commonjs-module'));
// Access exports
const { namedExport } = namespace;
const defaultExport = namespace.default;Behavior:
// CommonJS module
const cjsModule = {
foo: 'bar',
baz: function() { return 'qux'; }
};
interopRequireWildcard(cjsModule);
// Returns: {
// default: { foo: 'bar', baz: [Function] },
// foo: 'bar',
// baz: [Function]
// }
// ES Module
const esModule = {
__esModule: true,
default: 'defaultValue',
named: 'namedValue'
};
interopRequireWildcard(esModule);
// Returns: {
// __esModule: true,
// default: 'defaultValue',
// named: 'namedValue'
// }Creates deferred import proxies for dynamic import optimization.
/**
* Deferred import proxy creation
* @param init - Initialization function that returns the module
* @returns Proxy object that defers module loading
*/
function importDeferProxy(init: () => any): any;Usage Example:
import _importDeferProxy from '@babel/runtime/helpers/esm/importDeferProxy';
// Used by Babel for deferred dynamic imports
const deferredModule = _importDeferProxy(() => import('./heavy-module'));
// Module is only loaded when first accessed
const { heavyFunction } = deferredModule; // Triggers actual importThe helpers use several strategies to detect module types:
// ES Modules are marked with __esModule property
const isESModule = obj && obj.__esModule === true;// CommonJS modules lack __esModule property
const isCommonJS = !obj || !obj.__esModule;// Safe handling of null/undefined modules
if (obj == null) {
// Create appropriate wrapper
return { default: obj };
}// Source: import React from 'react';
import _interopRequireDefault from '@babel/runtime/helpers/esm/interopRequireDefault';
const _react = _interopRequireDefault(require('react'));
const React = _react.default;// Source: import * as fs from 'fs';
import _interopRequireWildcard from '@babel/runtime/helpers/esm/interopRequireWildcard';
const fs = _interopRequireWildcard(require('fs'));// Source: import React, { Component } from 'react';
import _interopRequireDefault from '@babel/runtime/helpers/esm/interopRequireDefault';
import _interopRequireWildcard from '@babel/runtime/helpers/esm/interopRequireWildcard';
const _react = _interopRequireWildcard(require('react'));
const React = _interopRequireDefault(_react).default;
const Component = _react.Component;// Source: const module = await import('./module');
import _interopRequireDefault from '@babel/runtime/helpers/esm/interopRequireDefault';
const module = await Promise.resolve().then(() => _interopRequireDefault(require('./module')));// CommonJS: module.exports = function() {}
const fnExport = function() { return 'hello'; };
interopRequireDefault(fnExport);
// Returns: { default: function() { return 'hello'; } }// CommonJS: module.exports = 'string';
const stringExport = 'hello world';
interopRequireDefault(stringExport);
// Returns: { default: 'hello world' }// CommonJS: module.exports = new Date();
const dateExport = new Date('2023-01-01');
interopRequireDefault(dateExport);
// Returns: { default: Date('2023-01-01') }The helpers handle circular dependency scenarios gracefully by avoiding infinite recursion and maintaining reference integrity.
// Module object interface
interface Module {
__esModule?: boolean;
default?: any;
[key: string]: any;
}
// CommonJS module interface
interface CommonJSModule {
exports: any;
require: (id: string) => any;
id: string;
filename: string;
loaded: boolean;
parent: CommonJSModule | null;
children: CommonJSModule[];
}
// ES Module interface
interface ESModule {
__esModule: true;
default?: any;
[exportName: string]: any;
}
// Namespace import result
interface NamespaceImport {
default?: any;
[exportName: string]: any;
}
// Deferred import proxy
interface DeferredImportProxy {
[key: string]: any;
}
// Import initialization function
type ImportInitializer = () => Promise<any> | any;Install with Tessl CLI
npx tessl i tessl/npm-babel--runtimedocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10