{"id":19037,"library":"babel-plugin-date-fns","title":"babel-plugin-date-fns","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/date-fns/babel-plugin-date-fns","tags":["javascript","babel-plugin","cherry-pick","date-fns"],"install":[{"cmd":"npm install babel-plugin-date-fns","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-date-fns","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-date-fns","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"runtime peer dependency; the plugin transforms imports from date-fns","package":"date-fns","optional":false},{"reason":"Babel peer dependency for plugin to work","package":"@babel/core","optional":true}],"imports":[{"note":"In .babelrc or babel.config.js, use the short name 'date-fns' (without the 'babel-plugin-' prefix) as Babel automatically resolves it.","wrong":"module.exports = { plugins: ['babel-plugin-date-fns'] }","symbol":"default (plugin)","correct":"module.exports = { plugins: ['date-fns'] }"},{"note":"In babel-loader options, use the string 'date-fns' instead of requiring the plugin directly; Babel resolves it.","wrong":"options: { plugins: [require('babel-plugin-date-fns')] }","symbol":"babel plugin in webpack","correct":"options: { plugins: ['date-fns'] }"},{"note":"The plugin expects named imports from the main 'date-fns' module. It transforms them to per-function imports like 'date-fns/format'.","wrong":"import { format, addDays } from 'date-fns/esm'","symbol":"imports from date-fns","correct":"import { format, addDays } from 'date-fns'"},{"note":"The plugin does not handle type-only imports; type imports will not be transformed and remain as-is. Use named imports for runtime values.","wrong":"import type { format } from 'date-fns'","symbol":"type imports (TypeScript)","correct":"import { format } from 'date-fns'"},{"note":"The plugin only transforms ES import statements. CommonJS require calls are not affected.","wrong":"const format = require('date-fns/format')","symbol":"require() calls","correct":"const { format } = require('date-fns')"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\"date-fns\"],\n  \"presets\": [\"@babel/preset-env\"]\n}\n\n// Before transformation\nimport { differenceInYears, format, formatDistance } from \"date-fns\";\n\n// After transformation\nimport differenceInYears from 'date-fns/differenceInYears';\nimport format from \"date-fns/format\";\nimport formatDistance from \"date-fns/formatDistance\";","lang":"javascript","description":"Shows .babelrc config and how the plugin transforms named imports from date-fns to per-function imports."},"warnings":[{"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).","message":"Version 2.x supports date-fns v2 only. Do NOT use this version with date-fns v1.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use ES imports exclusively to benefit from the plugin. For CJS, manually import from subpaths (e.g., const format = require('date-fns/format')).","message":"The plugin only transforms ES import statements (import { … } from 'date-fns'). It does not transform CommonJS require() calls.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use static imports for automatic transformation. For dynamic imports, manually import from subpaths.","message":"Dynamic imports (e.g., import('date-fns')) are not transformed.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Manually re-export from subpaths (e.g., export { default as format } from 'date-fns/format').","message":"The plugin does not handle re-exports (e.g., export { format } from 'date-fns').","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Upgrade to Babel 7 or later. If using Babel 6, continue using babel-plugin-date-fns@1.x.","message":"Babel 6 compatibility is deprecated. The plugin may not work with Babel 6 after version 2.x.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install date-fns as a runtime dependency: npm install date-fns --save","cause":"date-fns is not installed or is a devDependency instead of a dependency.","error":"Error: Cannot find module 'date-fns'"},{"fix":"Ensure you are using Babel 7+ and the plugin is specified as 'date-fns' (short name) in .babelrc or babel.config.js.","cause":"The plugin name is misspelled or the wrong version of Babel is used.","error":"TypeError: plugin is not a function"},{"fix":"Install the plugin: npm install babel-plugin-date-fns --save-dev","cause":"The plugin is not installed or not in node_modules.","error":"Error: [BABEL] unknown plugin \"date-fns\""},{"fix":"Add @babel/preset-env to your Babel presets (or ensure you have a preset that handles ES modules).","cause":"The code is using ES imports but Babel is not configured with @babel/preset-env or similar.","error":"SyntaxError: Unexpected token import"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}