From 9c984393b162c635cd6a04e26de1f801f6cb9024 Mon Sep 17 00:00:00 2001
From: thtliife <9210782+thtliife@users.noreply.github.com>
Date: Fri, 10 Mar 2023 12:14:04 +1000
Subject: [PATCH] fix: lodash imports force vite optimizeDeps usage
lodash imports using the file extension cause an error in vite unless
included in the `optimizeDeps.include` array in the viteFinal config for
storybook.
This commit replaces lodash imports to exclude the file extension.
eg.
before: `import camelCase from 'lodash/camelCase.js';`
after: `import camelCase from 'lodash/camelCase';`
closes: #21527
---
code/lib/codemod/src/lib/utils.ts | 4 ++--
code/lib/core-server/src/utils/stories-json.test.ts | 2 +-
code/lib/core-server/src/utils/stories-json.ts | 2 +-
code/lib/core-server/src/utils/watch-story-specifiers.ts | 2 +-
code/lib/docs-tools/src/argTypes/convert/convert.test.ts | 2 +-
.../docs-tools/src/argTypes/convert/proptypes/convert.ts | 2 +-
code/lib/manager-api/src/index.tsx | 2 +-
code/lib/manager-api/src/lib/merge.ts | 4 ++--
code/lib/manager-api/src/lib/stories.ts | 6 +++---
code/lib/manager-api/src/modules/layout.ts | 2 +-
.../preview-api/src/modules/preview-web/PreviewWeb.test.ts | 2 +-
.../preview-api/src/modules/preview-web/parseArgsParam.ts | 2 +-
code/lib/preview-api/src/modules/store/StoryStore.ts | 4 ++--
code/lib/preview-api/src/modules/store/args.ts | 2 +-
.../src/modules/store/csf/normalizeInputTypes.ts | 2 +-
code/lib/preview-api/src/modules/store/filterArgTypes.ts | 2 +-
code/lib/preview-api/src/modules/store/inferArgTypes.ts | 2 +-
code/lib/preview-api/src/modules/store/inferControls.ts | 2 +-
code/lib/preview-api/src/modules/store/parameters.ts | 2 +-
code/lib/router/src/utils.ts | 2 +-
.../src/abstract-syntax-tree/generate-helpers.js | 2 +-
.../src/docs/lib/defaultValues/createFromRawDefaultProp.ts | 6 +++---
.../react/template/stories/js-argtypes.stories.jsx | 2 +-
.../react/template/stories/ts-argtypes.stories.tsx | 2 +-
code/ui/.storybook/manager.ts | 2 +-
code/ui/blocks/src/blocks/ArgsTable.tsx | 4 ++--
code/ui/blocks/src/components/ArgsTable/ArgValue.tsx | 2 +-
code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx | 2 +-
code/ui/blocks/src/controls/Color.tsx | 2 +-
code/ui/blocks/src/controls/Object.tsx | 2 +-
code/ui/manager/src/components/layout/persist.ts | 2 +-
code/ui/manager/src/components/sidebar/useExpanded.ts | 2 +-
code/ui/manager/src/components/sidebar/useLastViewed.ts | 2 +-
.../common/storybook-manager-render-label-stories.js.mdx | 2 +-
scripts/utils/options.ts | 4 ++--
35 files changed, 44 insertions(+), 44 deletions(-)
diff --git a/code/lib/codemod/src/lib/utils.ts b/code/lib/codemod/src/lib/utils.ts
index 529c87efe731..ffcd81e59900 100644
--- a/code/lib/codemod/src/lib/utils.ts
+++ b/code/lib/codemod/src/lib/utils.ts
@@ -1,5 +1,5 @@
-import camelCase from 'lodash/camelCase.js';
-import upperFirst from 'lodash/upperFirst.js';
+import camelCase from 'lodash/camelCase';
+import upperFirst from 'lodash/upperFirst';
export const sanitizeName = (name: string) => {
let key = upperFirst(camelCase(name));
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
index bbc0e920c8d1..e9465445bc32 100644
--- a/code/lib/core-server/src/utils/stories-json.test.ts
+++ b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -4,7 +4,7 @@ import fs from 'fs-extra';
import type { Router, Request, Response } from 'express';
import Watchpack from 'watchpack';
import path from 'path';
-import debounce from 'lodash/debounce.js';
+import debounce from 'lodash/debounce';
import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
import type { StoryIndex, StoryIndexer } from '@storybook/types';
import { loadCsf } from '@storybook/csf-tools';
diff --git a/code/lib/core-server/src/utils/stories-json.ts b/code/lib/core-server/src/utils/stories-json.ts
index 6ab44e1dcf5b..4218ee745387 100644
--- a/code/lib/core-server/src/utils/stories-json.ts
+++ b/code/lib/core-server/src/utils/stories-json.ts
@@ -2,7 +2,7 @@ import type { Router, Request, Response } from 'express';
import { writeJSON } from 'fs-extra';
import type { NormalizedStoriesSpecifier, StoryIndex, StoryIndexV3 } from '@storybook/types';
-import debounce from 'lodash/debounce.js';
+import debounce from 'lodash/debounce';
import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
import type { StoryIndexGenerator } from './StoryIndexGenerator';
diff --git a/code/lib/core-server/src/utils/watch-story-specifiers.ts b/code/lib/core-server/src/utils/watch-story-specifiers.ts
index f7946940ed55..8806c311928c 100644
--- a/code/lib/core-server/src/utils/watch-story-specifiers.ts
+++ b/code/lib/core-server/src/utils/watch-story-specifiers.ts
@@ -3,7 +3,7 @@ import slash from 'slash';
import fs from 'fs';
import path from 'path';
import glob from 'globby';
-import uniq from 'lodash/uniq.js';
+import uniq from 'lodash/uniq';
import type { NormalizedStoriesSpecifier, Path } from '@storybook/types';
diff --git a/code/lib/docs-tools/src/argTypes/convert/convert.test.ts b/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
index 5b7b15ec6c63..c2bdc5995412 100644
--- a/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
@@ -1,5 +1,5 @@
import 'jest-specific-snapshot';
-import mapValues from 'lodash/mapValues.js';
+import mapValues from 'lodash/mapValues';
import { transformSync } from '@babel/core';
import requireFromString from 'require-from-string';
import fs from 'fs';
diff --git a/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts b/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
index 6caa89a5d268..1c4b28832c43 100644
--- a/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
@@ -1,5 +1,5 @@
/* eslint-disable no-case-declarations */
-import mapValues from 'lodash/mapValues.js';
+import mapValues from 'lodash/mapValues';
import type { SBType } from '@storybook/types';
import type { PTType } from './types';
import { includesQuotes, trimQuotes } from '../utils';
diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx
index 6822c39e9769..b9fa96a0e494 100644
--- a/code/lib/manager-api/src/index.tsx
+++ b/code/lib/manager-api/src/index.tsx
@@ -9,7 +9,7 @@ import React, {
useMemo,
useRef,
} from 'react';
-import mergeWith from 'lodash/mergeWith.js';
+import mergeWith from 'lodash/mergeWith';
import type {
Args,
ArgTypes,
diff --git a/code/lib/manager-api/src/lib/merge.ts b/code/lib/manager-api/src/lib/merge.ts
index 8ad0c203d7bb..2568e7a3d497 100644
--- a/code/lib/manager-api/src/lib/merge.ts
+++ b/code/lib/manager-api/src/lib/merge.ts
@@ -1,5 +1,5 @@
-import mergeWith from 'lodash/mergeWith.js';
-import isEqual from 'lodash/isEqual.js';
+import mergeWith from 'lodash/mergeWith';
+import isEqual from 'lodash/isEqual';
import { logger } from '@storybook/client-logger';
diff --git a/code/lib/manager-api/src/lib/stories.ts b/code/lib/manager-api/src/lib/stories.ts
index 23372e64b84c..984baa5b60a9 100644
--- a/code/lib/manager-api/src/lib/stories.ts
+++ b/code/lib/manager-api/src/lib/stories.ts
@@ -1,7 +1,7 @@
import memoize from 'memoizerific';
import { dedent } from 'ts-dedent';
-import countBy from 'lodash/countBy.js';
-import mapValues from 'lodash/mapValues.js';
+import countBy from 'lodash/countBy';
+import mapValues from 'lodash/mapValues';
import { sanitize } from '@storybook/csf';
import type {
StoryId,
@@ -178,7 +178,7 @@ export const transformStoryIndexToStoriesHash = (
throw new Error(
dedent`
Invalid part '${name}', leading to id === parentId ('${id}'), inside title '${title}'
-
+
Did you create a path that uses the separator char accidentally, such as 'Vue ' where '/' is a separator char? See https://github.com/storybookjs/storybook/issues/6128
`
);
diff --git a/code/lib/manager-api/src/modules/layout.ts b/code/lib/manager-api/src/modules/layout.ts
index 8c23956e7380..08bb6d38a061 100644
--- a/code/lib/manager-api/src/modules/layout.ts
+++ b/code/lib/manager-api/src/modules/layout.ts
@@ -1,5 +1,5 @@
import { global } from '@storybook/global';
-import pick from 'lodash/pick.js';
+import pick from 'lodash/pick';
import { dequal as deepEqual } from 'dequal';
import { create } from '@storybook/theming/create';
import { SET_CONFIG } from '@storybook/core-events';
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
index 4ab03f8b59af..a477f8ef7b46 100644
--- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
+++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
@@ -3,7 +3,7 @@
*/
import { global } from '@storybook/global';
-import merge from 'lodash/merge.js';
+import merge from 'lodash/merge';
import {
CONFIG_ERROR,
CURRENT_STORY_WAS_SET,
diff --git a/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts b/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts
index 3212a95b3e96..78f0bb4095dc 100644
--- a/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts
+++ b/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts
@@ -2,7 +2,7 @@ import qs from 'qs';
import { dedent } from 'ts-dedent';
import type { Args } from '@storybook/types';
import { once } from '@storybook/client-logger';
-import isPlainObject from 'lodash/isPlainObject.js';
+import isPlainObject from 'lodash/isPlainObject';
// Keep this in sync with validateArgs in router/src/utils.ts
const VALIDATION_REGEXP = /^[a-zA-Z0-9 _-]*$/;
diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts
index 20b13bbff693..8f882fe353dc 100644
--- a/code/lib/preview-api/src/modules/store/StoryStore.ts
+++ b/code/lib/preview-api/src/modules/store/StoryStore.ts
@@ -21,8 +21,8 @@ import type {
StoryContextForLoaders,
StoryId,
} from '@storybook/types';
-import mapValues from 'lodash/mapValues.js';
-import pick from 'lodash/pick.js';
+import mapValues from 'lodash/mapValues';
+import pick from 'lodash/pick';
import { SynchronousPromise } from 'synchronous-promise';
import { HooksContext } from '../addons';
diff --git a/code/lib/preview-api/src/modules/store/args.ts b/code/lib/preview-api/src/modules/store/args.ts
index 4dcccb6261a8..b930b14c5f91 100644
--- a/code/lib/preview-api/src/modules/store/args.ts
+++ b/code/lib/preview-api/src/modules/store/args.ts
@@ -1,7 +1,7 @@
import { dequal as deepEqual } from 'dequal';
import type { Renderer, Args, ArgTypes, InputType, SBType, StoryContext } from '@storybook/types';
import { once } from '@storybook/client-logger';
-import isPlainObject from 'lodash/isPlainObject.js';
+import isPlainObject from 'lodash/isPlainObject';
import { dedent } from 'ts-dedent';
const INCOMPATIBLE = Symbol('incompatible');
diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.ts b/code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.ts
index dbca9af300c2..e4ca3ed23fa0 100644
--- a/code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.ts
+++ b/code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.ts
@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues.js';
+import mapValues from 'lodash/mapValues';
import type {
ArgTypes,
GlobalTypes,
diff --git a/code/lib/preview-api/src/modules/store/filterArgTypes.ts b/code/lib/preview-api/src/modules/store/filterArgTypes.ts
index a9deb2d11e6b..c28c2f99491f 100644
--- a/code/lib/preview-api/src/modules/store/filterArgTypes.ts
+++ b/code/lib/preview-api/src/modules/store/filterArgTypes.ts
@@ -1,5 +1,5 @@
import type { StrictArgTypes } from '@storybook/types';
-import pickBy from 'lodash/pickBy.js';
+import pickBy from 'lodash/pickBy';
export type PropDescriptor = string[] | RegExp;
diff --git a/code/lib/preview-api/src/modules/store/inferArgTypes.ts b/code/lib/preview-api/src/modules/store/inferArgTypes.ts
index 46cd93dc9024..fab33db45862 100644
--- a/code/lib/preview-api/src/modules/store/inferArgTypes.ts
+++ b/code/lib/preview-api/src/modules/store/inferArgTypes.ts
@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues.js';
+import mapValues from 'lodash/mapValues';
import { dedent } from 'ts-dedent';
import { logger } from '@storybook/client-logger';
import type { Renderer, SBType, ArgTypesEnhancer } from '@storybook/types';
diff --git a/code/lib/preview-api/src/modules/store/inferControls.ts b/code/lib/preview-api/src/modules/store/inferControls.ts
index 6deffa912fd7..7c645d315495 100644
--- a/code/lib/preview-api/src/modules/store/inferControls.ts
+++ b/code/lib/preview-api/src/modules/store/inferControls.ts
@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues.js';
+import mapValues from 'lodash/mapValues';
import { logger } from '@storybook/client-logger';
import type { Renderer, ArgTypesEnhancer, SBEnumType, StrictInputType } from '@storybook/types';
import { filterArgTypes } from './filterArgTypes';
diff --git a/code/lib/preview-api/src/modules/store/parameters.ts b/code/lib/preview-api/src/modules/store/parameters.ts
index 872a0d2bd38d..b4ac9cb70186 100644
--- a/code/lib/preview-api/src/modules/store/parameters.ts
+++ b/code/lib/preview-api/src/modules/store/parameters.ts
@@ -1,6 +1,6 @@
// Utilities for handling parameters
import type { Parameters } from '@storybook/types';
-import isPlainObject from 'lodash/isPlainObject.js';
+import isPlainObject from 'lodash/isPlainObject';
/**
* Safely combine parameters recursively. Only copy objects when needed.
diff --git a/code/lib/router/src/utils.ts b/code/lib/router/src/utils.ts
index ab5941cab4ca..a8e583e5ecca 100644
--- a/code/lib/router/src/utils.ts
+++ b/code/lib/router/src/utils.ts
@@ -1,6 +1,6 @@
import { once } from '@storybook/client-logger';
import { dequal as deepEqual } from 'dequal';
-import isPlainObject from 'lodash/isPlainObject.js';
+import isPlainObject from 'lodash/isPlainObject';
import memoize from 'memoizerific';
import type { IStringifyOptions } from 'qs';
import qs from 'qs';
diff --git a/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js b/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
index 7e9f60048d07..3bd1d9918a2a 100644
--- a/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
+++ b/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
@@ -1,5 +1,5 @@
import { storyNameFromExport, sanitize } from '@storybook/csf';
-import mapKeys from 'lodash/mapKeys.js';
+import mapKeys from 'lodash/mapKeys';
import { patchNode } from './parse-helpers';
import getParser from './parsers';
import {
diff --git a/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts b/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts
index 9ccc900a030d..1283b78769f1 100644
--- a/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts
+++ b/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/ban-types */
-import isPlainObject from 'lodash/isPlainObject.js';
-import isFunction from 'lodash/isFunction.js';
-import isString from 'lodash/isString.js';
+import isPlainObject from 'lodash/isPlainObject';
+import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
import reactElementToJSXString from 'react-element-to-jsx-string';
import {
type PropDef,
diff --git a/code/renderers/react/template/stories/js-argtypes.stories.jsx b/code/renderers/react/template/stories/js-argtypes.stories.jsx
index a72d6771dbeb..1fc65b1ecfc0 100644
--- a/code/renderers/react/template/stories/js-argtypes.stories.jsx
+++ b/code/renderers/react/template/stories/js-argtypes.stories.jsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
-import mapValues from 'lodash/mapValues.js';
+import mapValues from 'lodash/mapValues';
import { PureArgsTable as ArgsTable } from '@storybook/blocks';
import { inferControls } from '@storybook/preview-api';
import { ThemeProvider, themes, convert } from '@storybook/theming';
diff --git a/code/renderers/react/template/stories/ts-argtypes.stories.tsx b/code/renderers/react/template/stories/ts-argtypes.stories.tsx
index 21eb492d30e7..7800e3aa7359 100644
--- a/code/renderers/react/template/stories/ts-argtypes.stories.tsx
+++ b/code/renderers/react/template/stories/ts-argtypes.stories.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import mapValues from 'lodash/mapValues.js';
+import mapValues from 'lodash/mapValues';
import { PureArgsTable as ArgsTable } from '@storybook/blocks';
import type { Args, Parameters, StoryContext } from '@storybook/types';
import { inferControls } from '@storybook/preview-api';
diff --git a/code/ui/.storybook/manager.ts b/code/ui/.storybook/manager.ts
index 1ac61cf4d375..047f4ba86918 100644
--- a/code/ui/.storybook/manager.ts
+++ b/code/ui/.storybook/manager.ts
@@ -1,5 +1,5 @@
import { addons } from '@storybook/manager-api';
-import startCase from 'lodash/startCase.js';
+import startCase from 'lodash/startCase';
addons.setConfig({
sidebar: {
diff --git a/code/ui/blocks/src/blocks/ArgsTable.tsx b/code/ui/blocks/src/blocks/ArgsTable.tsx
index 8322254e8791..3b5f8295ca1f 100644
--- a/code/ui/blocks/src/blocks/ArgsTable.tsx
+++ b/code/ui/blocks/src/blocks/ArgsTable.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react';
import React, { useContext, useEffect, useState, useCallback } from 'react';
-import mapValues from 'lodash/mapValues.js';
+import mapValues from 'lodash/mapValues';
import type { ArgTypesExtractor } from '@storybook/docs-tools';
import type { PropDescriptor } from '@storybook/preview-api';
import { filterArgTypes } from '@storybook/preview-api';
@@ -214,7 +214,7 @@ export const ComponentsTable: FC = (props) => {
export const ArgsTable: FC = (props) => {
deprecate(dedent`The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
-
+
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
`);
const context = useContext(DocsContext);
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx b/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
index 131aab285a1b..8d9d582c122e 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
@@ -1,7 +1,7 @@
import type { FC } from 'react';
import React, { useState } from 'react';
import memoize from 'memoizerific';
-import uniq from 'lodash/uniq.js';
+import uniq from 'lodash/uniq';
import { styled } from '@storybook/theming';
import { WithTooltipPure, Icons, SyntaxHighlighter, codeCommon } from '@storybook/components';
import type { PropSummaryValue } from './types';
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
index a54dc89d95f5..a900e0a4a58d 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react';
import React from 'react';
-import pickBy from 'lodash/pickBy.js';
+import pickBy from 'lodash/pickBy';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { includeConditionalArg } from '@storybook/csf';
diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx
index b126c80e3b2d..7a4ecec1e436 100644
--- a/code/ui/blocks/src/controls/Color.tsx
+++ b/code/ui/blocks/src/controls/Color.tsx
@@ -2,7 +2,7 @@ import type { FC, ChangeEvent, FocusEvent } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
import convert from 'color-convert';
-import throttle from 'lodash/throttle.js';
+import throttle from 'lodash/throttle';
import { styled } from '@storybook/theming';
import { TooltipNote, WithTooltip, Form, Icons } from '@storybook/components';
diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
index d1dbd5525299..e82dffba166c 100644
--- a/code/ui/blocks/src/controls/Object.tsx
+++ b/code/ui/blocks/src/controls/Object.tsx
@@ -1,5 +1,5 @@
import { global } from '@storybook/global';
-import cloneDeep from 'lodash/cloneDeep.js';
+import cloneDeep from 'lodash/cloneDeep';
import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react';
import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
import { styled, useTheme, type Theme } from '@storybook/theming';
diff --git a/code/ui/manager/src/components/layout/persist.ts b/code/ui/manager/src/components/layout/persist.ts
index 0f5b998cc568..1a304438cdfa 100644
--- a/code/ui/manager/src/components/layout/persist.ts
+++ b/code/ui/manager/src/components/layout/persist.ts
@@ -1,5 +1,5 @@
import store from 'store2';
-import debounce from 'lodash/debounce.js';
+import debounce from 'lodash/debounce';
import memoize from 'memoizerific';
export { store };
diff --git a/code/ui/manager/src/components/sidebar/useExpanded.ts b/code/ui/manager/src/components/sidebar/useExpanded.ts
index 854796c317f0..1d7bd6d91ad5 100644
--- a/code/ui/manager/src/components/sidebar/useExpanded.ts
+++ b/code/ui/manager/src/components/sidebar/useExpanded.ts
@@ -2,7 +2,7 @@ import type { StoriesHash } from '@storybook/manager-api';
import { useStorybookApi } from '@storybook/manager-api';
import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
import { global } from '@storybook/global';
-import throttle from 'lodash/throttle.js';
+import throttle from 'lodash/throttle';
import type { Dispatch, MutableRefObject } from 'react';
import type React from 'react';
import { useCallback, useEffect, useReducer } from 'react';
diff --git a/code/ui/manager/src/components/sidebar/useLastViewed.ts b/code/ui/manager/src/components/sidebar/useLastViewed.ts
index 1bc8d679883a..1fccc6a93d83 100644
--- a/code/ui/manager/src/components/sidebar/useLastViewed.ts
+++ b/code/ui/manager/src/components/sidebar/useLastViewed.ts
@@ -1,4 +1,4 @@
-import debounce from 'lodash/debounce.js';
+import debounce from 'lodash/debounce';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import store from 'store2';
diff --git a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx
index b5ea56ba10af..cfbc658cfc03 100644
--- a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx
+++ b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx
@@ -3,7 +3,7 @@
import { addons } from '@storybook/manager-api';
-import startCase from 'lodash/startCase.js';
+import startCase from 'lodash/startCase';
addons.setConfig({
sidebar: {
diff --git a/scripts/utils/options.ts b/scripts/utils/options.ts
index b741d80afcb2..8977644c7065 100644
--- a/scripts/utils/options.ts
+++ b/scripts/utils/options.ts
@@ -7,7 +7,7 @@ import type { PromptObject, Falsy, PrevCaller, PromptType } from 'prompts';
import program from 'commander';
import dedent from 'ts-dedent';
import chalk from 'chalk';
-import kebabCase from 'lodash/kebabCase.js';
+import kebabCase from 'lodash/kebabCase';
// Option types
@@ -140,7 +140,7 @@ export function getOptions(
const possibleOptions = chalk.cyan(option.values.join(', '));
throw new Error(
dedent`Unexpected value '${chalk.yellow(raw)}' for option '${chalk.magenta(key)}'.
-
+
These are the possible options: ${possibleOptions}\n\n`
);
}