Storybook переходит на ESM‑only: в версии 10 прекращается поддержка CommonJS

Storybook объявил переход на ESM‑only, начиная с Storybook 10 (сейчас — бета): пакет становится легче примерно на 15% по сравнению с 9-й версией, упрощается кодовая база, а конфигурации и истории должны быть валидным ESM. Это важный шаг для всей экосистемы JavaScript: стандартные ECMAScript-модули работают нативно в браузерах и Node.js и давно стали фундаментом для современных рантаймов, а поддержка двух параллельных систем модулей (ESM и CommonJS) в инструментах и библиотеках создаёт лишнюю сложность, дублирование и ошибки.

Почему это важно

ESM — официальный стандарт модульной системы JavaScript. Он поддерживается нативно в браузерах и в Node.js и лежит в основе таких рантаймов, как Deno и Bun. CommonJS, напротив, — исторически сложившийся, но нестандартизованный формат, который долгое время фактически был де-факто-стандартом в экосистеме Node.js. В последние годы большинство инструментов и библиотек постепенно сходятся к ESM, но долгий период перехода порождал «двойные сборки», сложные сценарии публикации и неожиданные проблемы совместимости.

Команда Storybook годами поддерживала два формата (ESM и CJS), чтобы не ломать проекты пользователей. Это означало компиляцию и публикацию двух дистрибутивов, почти двукратное увеличение размера пакетов, сложность в сопровождении и тонкие баги из‑за дублирования модулей и алиасинга. Переход на ESM‑only завершает этот длительный этап.

Что меняется в Storybook 10

• Поставляется только ESM‑сборка (CJS-дистрибутив удалён).
• Снижен размер установки примерно на 15% по сравнению с Storybook 9.
• Кодовая база стала чище: меньше условных веток и обходных решений.
• Снижается риск багов, связанных с дублированием модулей и несовпадением зависимостей.
• Более надёжный фундамент для экосистемы аддонов и будущих улучшений.

Команда сознательно оставила код не минифицированным, чтобы он был читаемым «из коробки», лучше поддавался отладке и аудиту. Теоретически отказ от одного из двух форматов мог бы дать ~50% экономии, но ставка сделана на долгосрочное качество экосистемы и удобство сопровождения.

Требования и потенциальные несовместимости

• Нужна версия Node.js с поддержкой require() для ESM: 20.16, 22.19, 24 или выше. Это стало возможным благодаря доработкам в Node.js (в частности, работе над require(esm)).
• Конфигурация Storybook и файлы историй должны быть валидным ESM: используйте import/export, расширения .mjs при необходимости или укажите "type": "module" в package.json.

Большинство аддонов будет работать без изменений. Для тех, что опираются на CJS‑специфику, Storybook подготовит рекомендации по миграции.

Как мигрировать

Попробовать Storybook 10 в новом проекте:

npm create storybook@next

Обновить существующий проект со Storybook 9 и воспользоваться мастером миграции:

npx storybook@next upgrade

Практические советы по переходу на ESM:

• Если проект использует package.json без поля type, рассмотрите добавление "type": "module" либо переименуйте конфиги и утилиты в .mjs.
• Проверьте импорты аддонов и внутренних утилит: замените require() на import, используйте named/default‑импорты согласно документации пакетов.
• Убедитесь, что сборщик (Vite, Webpack 5, esbuild, Rspack) и тестовые раннеры (Vitest, Jest с поддержкой ESM) корректно настроены для ESM.
• Для TypeScript проверьте module/moduleResolution в tsconfig.json (например, ES2020 и современная резолюция), а также пути алиасов.
• Если завязаны на CJS‑пакеты, помните: ESM может импортировать CJS через default‑импорт; проверьте инструкции этих библиотек.

Контекст: почему следует отказаться от «двойных сборок»

Поддержка ESM и CJS одновременно увеличивала размер инсталляции, усложняла сценарии разрешения модулей и приводила к трудноуловимым багам при алиасинге и дублировании зависимостей. Отказ от CJS устраняет класс таких проблем и упрощает как поддержку ядра Storybook, так и разработку аддонов.

Благодарности

Переход стал возможен благодаря системной работе сообщества, в том числе тем, кто годами продвигал ESM в популярных проектах, и авторам улучшений в Node.js. Среди них — Titus Wormer, Rich Harris, Marvin Hagemeister, Fred K. Schott, Guy Bedford, Joyee Cheung, Sindre Sorhus и многие другие. Их вклад помог экосистеме созреть для полного отказа от CJS в ключевых инструментах.

Что дальше

Storybook 10 сейчас в бете, стабильный релиз намечен через несколько недель. Команда обещает сохранить максимально плавный путь обновления, а также продолжить работу над производительностью, качеством DX и снижением технической сложности проекта. Переход на ESM‑only — ещё один шаг к более простой и предсказуемой экосистеме JavaScript.