babel-plugin-add-import-extension

1.6.0 verified Sat Apr 25 auth: no javascript

A Babel plugin that automatically adds file extensions to import and export specifiers for local modules, useful when using TypeScript with Babel and not writing explicit extensions in source files. Version 1.6.0 is the latest stable release, updated occasionally. It defaults to adding .js extension, with options to specify custom extension, replace existing extensions, and configure observed script extensions. Differentiates itself by focusing solely on extension addition without other transforms.

Common errors

error Error: Cannot find module 'babel-plugin-add-import-extension' ↓

cause Plugin not installed or not in devDependencies.

fix

Run npm install --save-dev babel-plugin-add-import-extension

error TypeError: Cannot read properties of undefined (reading 'configure') ↓

cause Incorrect plugin configuration order or missing options array.

fix

Ensure plugin is specified as ["babel-plugin-add-import-extension", { extension: 'js' }] not as separate arguments.

error The plugin "babel-plugin-add-import-extension" didn't return a visitor object. ↓

cause Using an incompatible version of @babel/core (less than 7.0.0).

fix

Upgrade @babel/core to >=7.0.0.

Warnings

gotcha Plugin only adds extensions to local modules (not in node_modules). It does not affect bare specifiers for npm packages. ↓

fix Ensure imports from node_modules are left untouched as intended; no action needed.

gotcha When using replace: true, only extensions listed in observedScriptExtensions are replaced. Defaults are js, ts, jsx, tsx. ↓

fix If you need to replace other extensions (e.g., .mjs), add them to observedScriptExtensions.

gotcha The plugin does not handle dynamic imports (import()) or require() calls; only static import/export declarations. ↓

fix Use additional Babel plugins for dynamic imports if needed.

deprecated The repository was migrated back to GitHub after being on SourceHut; old issues lost. ↓

fix Refer to current GitHub repo for issues and documentation.

Install

npm install babel-plugin-add-import-extension

yarn add babel-plugin-add-import-extension

pnpm add babel-plugin-add-import-extension

Imports

default

wrong

plugins: [['babel-plugin-add-import-extension', {}]] (unnecessary nesting without options)

correct

plugins: ['babel-plugin-add-import-extension']

Use string shorthand when no options are needed, array form only when specifying options.

options

wrong

plugins: ['babel-plugin-add-import-extension', { extension: 'mjs' }] (second argument is misinterpreted)

correct

plugins: [['babel-plugin-add-import-extension', { extension: 'mjs' }]]

Options must be supplied via the array form; the string shorthand does not accept options.

configuration

wrong

import babelPluginAddImportExtension from 'babel-plugin-add-import-extension' (not importable as a module)

correct

module.exports = { plugins: ['babel-plugin-add-import-extension'] }

This plugin is configured as a string in Babel config, not imported programmatically.

Quickstart

Installs the plugin, configures it to add .js extension, and shows a simple import transformation.

// Install
npm install --save-dev babel-plugin-add-import-extension

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-add-import-extension', { extension: 'js' }]
  ]
};

// Input: import { add } from './math';
// Output: import { add } from './math.js';