babel-plugin-module-extension

0.1.3 verified Sat Apr 25 auth: no javascript

A Babel plugin that transforms module import/require extensions during compilation. Version 0.1.3 (latest, but no recent updates). It allows mapping original extensions (e.g., .less) to new ones (e.g., .css) or removing extensions entirely. Unlike babel-plugin-transform-import-extension, it focuses solely on extension replacement. Low maintenance, likely experimental.

Common errors

error Error: Module side-effects are not supported. ↓

cause Babel plugin runs on import statements only, not dynamic requires or side-effect imports.

fix

Use explicit imports for side-effect modules.

error TypeError: Cannot read property 'includes' of undefined ↓

cause Missing options object in plugin config.

fix

Provide at least an empty object: ["module-extension", {}].

error babel-plugin-module-extension: Unrecognized extension '' ↓

cause Empty string as target for an extension mapping without dot prefix.

fix

Use an empty string with dot prefix for removal: {".js": ""}.

Warnings

gotcha Plugin may not work with Babel 7+ because the API has changed (deprecated babel.transform). ↓

fix Test compatibility. Consider using babel-plugin-transform-import-extension instead.

gotcha Only transforms import/require statements, not dynamic import() calls in some Babel presets. ↓

fix Ensure parser supports import() (e.g., @babel/plugin-syntax-dynamic-import).

gotcha Options keys must include the leading dot (e.g., '.less' vs 'less') for correct matching in some versions. ↓

fix Use keys with dot prefix: {'.less': '.css'}.

Install

npm install babel-plugin-module-extension

yarn add babel-plugin-module-extension

pnpm add babel-plugin-module-extension

Imports

babel-plugin-module-extension

wrong

import plugin from 'babel-plugin-module-extension';
// Works only in modern JavaScript, not as Babel plugin API

correct

// Use in .babelrc as plugin reference
{
  "plugins": [
    ["module-extension", { "less": "css", "js": "" }]
  ]
}

Used as a Babel plugin name in config, not imported directly.

require('babel-plugin-module-extension')
```
const plugin = require('babel-plugin-module-extension');
```
CommonJS require for Node.js or e2e test setups.

plugin function

wrong

const plugin = require('babel-plugin-module-extension').default;
// No default export, returns function directly

correct

import plugin from 'babel-plugin-module-extension';

ESM import returns the plugin function directly. No .default needed.

Quickstart

Configures module-extension plugin to replace .less with .css and .ts with .js in import statements.

// Run via Babel CLI or programmatic API.
// Example .babelrc
{
  "plugins": [
    ["module-extension", {
      ".less": ".css",
      ".ts": ".js"
    }]
  ]
}
// Input: import styles from './style.less';
// Output: import styles from './style.css';