babel-plugin-date-fns

2.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'date-fns' ↓

cause 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

error TypeError: plugin is not a function ↓

cause 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 Error: [BABEL] unknown plugin "date-fns" ↓

cause The plugin is not installed or not in node_modules.

fix

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

error SyntaxError: Unexpected token import ↓

cause 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).

Warnings

breaking Version 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).

gotcha The 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')).

gotcha Dynamic imports (e.g., import('date-fns')) are not transformed. ↓

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

gotcha The 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').

deprecated Babel 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.

Install

npm install babel-plugin-date-fns

yarn add babel-plugin-date-fns

pnpm add babel-plugin-date-fns

Imports

default (plugin)
wrong
```
module.exports = { plugins: ['babel-plugin-date-fns'] }
```
correct
```
module.exports = { plugins: ['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
wrong
```
options: { plugins: [require('babel-plugin-date-fns')] }
```
correct
```
options: { plugins: ['date-fns'] }
```
In babel-loader options, use the string 'date-fns' instead of requiring the plugin directly; Babel resolves it.
imports from date-fns
wrong
```
import { format, addDays } from 'date-fns/esm'
```
correct
```
import { format, addDays } from 'date-fns'
```
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)
wrong
```
import type { format } from 'date-fns'
```
correct
```
import { 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
wrong
```
const format = require('date-fns/format')
```
correct
```
const { format } = require('date-fns')
```
The plugin only transforms ES import statements. CommonJS require calls are not affected.

Quickstart

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";