Vite: Fix lodash imports with optimizeDeps

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

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

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

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

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

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

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,

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

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 <docs/>' where '/' is a separator char? See https://github.com/storybookjs/storybook/issues/6128
           `
         );

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

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,

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 _-]*$/;

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

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');

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,

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;
 

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

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

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.

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

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 {

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,

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

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

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: {

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<ComponentsProps> = (props) => {
 
 export const ArgsTable: FC<ArgsTableProps> = (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);

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

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

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

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

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

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

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

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: {

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<TOptions extends OptionSpecifier>(
           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`
           );
         }