Registry / devops / babel-plugin-date-fns

babel-plugin-date-fns

library2.0.0jsnpmunverified

A Babel plugin that transforms cherry-picked imports from date-fns (e.g., import { format } from 'date-fns') into direct per-function imports (e.g., import format from 'date-fns/format'), reducing bundle size. Current stable version is 2.0.0, which supports date-fns v2 only; v1.x exists for date-fns v1. Release cadence is low, with major versions tied to date-fns major releases. Compared to manual per-function imports, this plugin automates the transformation with zero config. It is heavily inspired by babel-plugin-lodash and babel-plugin-recharts.

devops

npm install babel-plugin-date-fns

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-DATE-

babel-plugin-date-fns

devopsjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (plugin)

✓ module.exports = { plugins: ['date-fns'] }

✗ module.exports = { plugins: ['babel-plugin-date-fns'] }

In .babelrc or babel.config.js, use the short name 'date-fns' (without the 'babel-plugin-' prefix) as Babel automatically resolves it.

babel plugin in webpack

✓ options: { plugins: ['date-fns'] }

✗ options: { plugins: [require('babel-plugin-date-fns')] }

In babel-loader options, use the string 'date-fns' instead of requiring the plugin directly; Babel resolves it.

imports from date-fns

✓ import { format, addDays } from 'date-fns'

✗ import { format, addDays } from 'date-fns/esm'

The plugin expects named imports from the main 'date-fns' module. It transforms them to per-function imports like 'date-fns/format'.

type imports (TypeScript)

✓ import { format } from 'date-fns'

✗ import type { format } from 'date-fns'

The plugin does not handle type-only imports; type imports will not be transformed and remain as-is. Use named imports for runtime values.

require() calls

✓ const { format } = require('date-fns')

✗ const format = require('date-fns/format')

The plugin only transforms ES import statements. CommonJS require calls are not affected.

Shows .babelrc config and how the plugin transforms named imports from date-fns to per-function imports.

// .babelrc { "plugins": ["date-fns"], "presets": ["@babel/preset-env"] } // Before transformation import { differenceInYears, format, formatDistance } from "date-fns"; // After transformation import differenceInYears from 'date-fns/differenceInYears'; import format from "date-fns/format"; import formatDistance from "date-fns/formatDistance";

Debug

Known issues

breakingVersion 2.x supports date-fns v2 only. Do NOT use this version with date-fns v1.

fix

For date-fns v1, use babel-plugin-date-fns@1.x (e.g., npm install babel-plugin-date-fns@1.0.0 --save-dev).

affects: >=2.0.0

gotchaThe plugin only transforms ES import statements (import { … } from 'date-fns'). It does not transform CommonJS require() calls.

fix

Use ES imports exclusively to benefit from the plugin. For CJS, manually import from subpaths (e.g., const format = require('date-fns/format')).

affects: >=0.0.0

gotchaDynamic imports (e.g., import('date-fns')) are not transformed.

fix

Use static imports for automatic transformation. For dynamic imports, manually import from subpaths.

affects: >=0.0.0

gotchaThe plugin does not handle re-exports (e.g., export { format } from 'date-fns').

fix

Manually re-export from subpaths (e.g., export { default as format } from 'date-fns/format').

affects: >=0.0.0

deprecatedBabel 6 compatibility is deprecated. The plugin may not work with Babel 6 after version 2.x.

fix

Upgrade to Babel 7 or later. If using Babel 6, continue using babel-plugin-date-fns@1.x.

affects: >=2.0.0

Errors

Common errors & fixes

Error: Cannot find module 'date-fns'

date-fns is not installed or is a devDependency instead of a dependency.

fix

Install date-fns as a runtime dependency: npm install date-fns --save

TypeError: plugin is not a function

The plugin name is misspelled or the wrong version of Babel is used.

fix

Ensure you are using Babel 7+ and the plugin is specified as 'date-fns' (short name) in .babelrc or babel.config.js.

Error: [BABEL] unknown plugin "date-fns"

The plugin is not installed or not in node_modules.

fix

Install the plugin: npm install babel-plugin-date-fns --save-dev

SyntaxError: Unexpected token import

The code is using ES imports but Babel is not configured with @babel/preset-env or similar.

fix

Add @babel/preset-env to your Babel presets (or ensure you have a preset that handles ES modules).

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

date-fnsrequiredruntime peer dependency; the plugin transforms imports from date-fns

@babel/coreoptionalBabel peer dependency for plugin to work

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/date-fns/babel-plugin-date-fns ↗

packagehttps://www.npmjs.com/package/babel-plugin-date-fns ↗