babel-plugin-named-exports-order

0.0.2 verified Sat Apr 25 auth: no javascript

Babel plugin (v0.0.2, stable) that adds a `__namedExportsOrder` array to JavaScript files preserving the original order of named exports. Bundlers like Webpack 5 do not guarantee export order, but tools like Storybook rely on it for features such as story ordering. This plugin inserts a constant array listing export names in declaration order, enabling consumers to reconstruct the intended sequence. Lightweight and zero-config, but only works with static named exports (not dynamic or re-exports).

Common errors

error Cannot find module 'babel-plugin-named-exports-order' ↓

cause Plugin not installed as dev dependency.

fix

Run npm install --save-dev babel-plugin-named-exports-order or yarn add -D babel-plugin-named-exports-order.

error __namedExportsOrder is not defined ↓

cause File does not have any static named exports, or plugin is not configured correctly.

fix

Verify .babelrc includes the plugin and that the file has at least one static named export declaration.

Warnings

gotcha Plugin only processes static named exports; dynamic exports (e.g., `export { variable }`) or re-exports (`export * from`) are not captured in __namedExportsOrder. ↓

fix Ensure all exports to be ordered are static named exports declared directly in the file.

gotcha The __namedExportsOrder array is added as an additional export, which might cause duplicate if the file already exports a variable with that name. ↓

fix Avoid naming any export `__namedExportsOrder` in files processed by this plugin.

gotcha This plugin does not modify export order in the module system; it only inserts an array for downstream consumers to reorder. Bundlers may still reorder the actual export bindings. ↓

fix Use the __namedExportsOrder array in consuming code (e.g., Storybook) to reorder imports as needed.

Install

npm install babel-plugin-named-exports-order

yarn add babel-plugin-named-exports-order

pnpm add babel-plugin-named-exports-order

Imports

default plugin

wrong

module.exports = { plugins: [require('babel-plugin-named-exports-order')] }

correct

module.exports = { plugins: ['babel-plugin-named-exports-order'] }

Simple string reference in Babel config is preferred over requiring the module.

default export (ESM)

wrong

import { babelPluginNamedExportsOrder } from 'babel-plugin-named-exports-order'

correct

import babelPluginNamedExportsOrder from 'babel-plugin-named-exports-order'

Plugin exports a single function as default. Named import will be undefined.

Quickstart

Shows basic Babel configuration and the transform effect on a file with three named exports.

// .babelrc.js
module.exports = {
  plugins: ['babel-plugin-named-exports-order'],
};

// Example input file (stories.js)
export const A = () => {};
export const B = () => {};
export const C = () => {};

// After transform, output includes:
export const A = () => {};
export const B = () => {};
export const C = () => {};
export const __namedExportsOrder = ['A', 'B', 'C'];