Build: Add extensions to lodash imports

.ci/danger/dangerfile.ts

@@ -3,9 +3,9 @@ import { execSync } from 'child_process';
 
 execSync('npm install lodash');
 
-const flatten = require('lodash/flatten');
-const intersection = require('lodash/intersection');
-const isEmpty = require('lodash/isEmpty');
+const flatten = require('lodash/flatten.js');
+const intersection = require('lodash/intersection.js');
+const isEmpty = require('lodash/isEmpty.js');
 
 const pkg = require('../../code/package.json'); // eslint-disable-line import/newline-after-import
 const prLogConfig = pkg['pr-log'];

code/.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
     'eslint-comments/no-unused-disable': 'error',
     'react-hooks/rules-of-hooks': 'off',
+    'import/extensions': 'off', // for mjs, we sometimes need extensions
     'jest/no-done-callback': 'off',
     '@typescript-eslint/dot-notation': [
       'error',

code/frameworks/nextjs/template/stories/Image.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
-// eslint-disable-next-line import/extensions
+
 import StackAlt from '../../assets/colors.svg';
 
 export default {

code/frameworks/nextjs/template/stories_12-js/ImageFuture.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Image from 'next/future/image';
-// eslint-disable-next-line import/extensions
+
 import StackAlt from '../../assets/colors.svg';
 
 export default {

code/frameworks/nextjs/template/stories_default-js/ImageLegacy.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Image from 'next/legacy/image';
-// eslint-disable-next-line import/extensions
+
 import StackAlt from '../../assets/colors.svg';
 
 export default {

code/lib/builder-vite/src/vite-config.ts

@@ -96,7 +96,7 @@ export async function pluginConfig(options: ExtendedOptions) {
 
   // TODO: framework doesn't exist, should move into framework when/if built
   if (frameworkName === '@storybook/glimmerx-vite') {
-    // eslint-disable-next-line global-require, import/extensions
+    // eslint-disable-next-line global-require
     const plugin = require('vite-plugin-glimmerx/index.cjs');
     plugins.push(plugin.default());
   }

code/lib/cli/bin/index.js

@@ -1,4 +1,3 @@
 #!/usr/bin/env node
 
-// eslint-disable-next-line import/extensions
 require('../dist/generate.js');

code/lib/codemod/src/lib/utils.ts

@@ -1,5 +1,5 @@
-import camelCase from 'lodash/camelCase';
-import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase.js';
+import upperFirst from 'lodash/upperFirst.js';
 
 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';
+import debounce from 'lodash/debounce.js';
 import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
 import type { StoryIndex, StoryIndexer } from '@storybook/types';
 import { loadCsf } from '@storybook/csf-tools';
@@ -881,7 +881,7 @@ describe('useStoriesJson', () => {
     });
 
     it('debounces invalidation events', async () => {
-      (debounce as jest.Mock).mockImplementation(jest.requireActual('lodash/debounce') as any);
+      (debounce as jest.Mock).mockImplementation(jest.requireActual('lodash/debounce.js') as any);
 
       const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
       useStoriesJson({

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';
+import debounce from 'lodash/debounce.js';
 
 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';
+import uniq from 'lodash/uniq.js';
 
 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';
+import mapValues from 'lodash/mapValues.js';
 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';
+import mapValues from 'lodash/mapValues.js';
 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';
+import mergeWith from 'lodash/mergeWith.js';
 import type {
   Args,
   ArgTypes,

code/lib/manager-api/src/lib/merge.ts

@@ -1,5 +1,5 @@
-import mergeWith from 'lodash/mergeWith';
-import isEqual from 'lodash/isEqual';
+import mergeWith from 'lodash/mergeWith.js';
+import isEqual from 'lodash/isEqual.js';
 
 import { logger } from '@storybook/client-logger';
 

code/lib/manager-api/src/lib/stories.ts

@@ -1,6 +1,7 @@
 import memoize from 'memoizerific';
 import { dedent } from 'ts-dedent';
-import countBy from 'lodash/countBy';
+import countBy from 'lodash/countBy.js';
+import mapValues from 'lodash/mapValues.js';
 import { sanitize } from '@storybook/csf';
 import type {
   StoryId,
@@ -20,8 +21,6 @@ import type {
   API_HashEntry,
   SetStoriesPayload,
 } from '@storybook/types';
-
-import mapValues from 'lodash/mapValues';
 // eslint-disable-next-line import/no-cycle
 import { type API, combineParameters } from '../index';
 import merge from './merge';

code/lib/manager-api/src/modules/layout.ts

@@ -1,5 +1,5 @@
 import { global } from '@storybook/global';
-import pick from 'lodash/pick';
+import pick from 'lodash/pick.js';
 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';
+import merge from 'lodash/merge.js';
 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';
+import isPlainObject from 'lodash/isPlainObject.js';
 
 // 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';
-import pick from 'lodash/pick';
+import mapValues from 'lodash/mapValues.js';
+import pick from 'lodash/pick.js';
 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';
+import isPlainObject from 'lodash/isPlainObject.js';
 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';
+import mapValues from 'lodash/mapValues.js';
 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';
+import pickBy from 'lodash/pickBy.js';
 
 export type PropDescriptor = string[] | RegExp;
 

code/lib/preview-api/src/modules/store/inferArgTypes.ts

@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues';
+import mapValues from 'lodash/mapValues.js';
 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';
+import mapValues from 'lodash/mapValues.js';
 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';
+import isPlainObject from 'lodash/isPlainObject.js';
 
 /**
  * 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';
+import isPlainObject from 'lodash/isPlainObject.js';
 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';
+import mapKeys from 'lodash/mapKeys.js';
 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';
-import isFunction from 'lodash/isFunction';
-import isString from 'lodash/isString';
+import isPlainObject from 'lodash/isPlainObject.js';
+import isFunction from 'lodash/isFunction.js';
+import isString from 'lodash/isString.js';
 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';
+import mapValues from 'lodash/mapValues.js';
 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';
+import mapValues from 'lodash/mapValues.js';
 import { PureArgsTable as ArgsTable } from '@storybook/blocks';
 import type { Args, Parameters, StoryContext } from '@storybook/types';
 import { inferControls } from '@storybook/preview-api';

code/renderers/web-components/src/docs/sourceDecorator.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/extensions */
 import { html } from 'lit-html';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { addons, useEffect } from '@storybook/preview-api';

code/renderers/web-components/src/render.ts

@@ -6,7 +6,7 @@ import { global } from '@storybook/global';
 import { dedent } from 'ts-dedent';
 import { render as litRender } from 'lit-html';
 // Keep `.js` extension to avoid issue with Webpack (related to export map?)
-// eslint-disable-next-line import/extensions
+
 import { isTemplateResult } from 'lit-html/directive-helpers.js';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api';
 import type { RenderContext, ArgsStoryFn } from '@storybook/types';

code/renderers/web-components/template/components/Pre.js

@@ -1,6 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import { html, LitElement } from 'lit';
-// eslint-disable-next-line import/extensions
+
 import { styleMap } from 'lit-html/directives/style-map.js';
 
 const { customElements } = globalThis;

code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js

@@ -1,6 +1,6 @@
 import { global } from '@storybook/global';
 import { LitElement, html } from 'lit';
-// eslint-disable-next-line import/extensions
+
 import { demoWcCardStyle } from './demoWcCardStyle.css.js';
 
 const { CustomEvent } = global;

code/renderers/web-components/template/stories/demo-wc-card/index.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/extensions
 import { DemoWcCard } from './DemoWcCard.js';
 
 // eslint-disable-next-line no-undef

code/ui/.storybook/manager.ts

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/manager-api';
-import startCase from 'lodash/startCase';
+import startCase from 'lodash/startCase.js';
 
 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';
+import mapValues from 'lodash/mapValues.js';
 import type { ArgTypesExtractor } from '@storybook/docs-tools';
 import type { PropDescriptor } from '@storybook/preview-api';
 import { filterArgTypes } from '@storybook/preview-api';

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';
+import uniq from 'lodash/uniq.js';
 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';
+import pickBy from 'lodash/pickBy.js';
 import { styled } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } 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';
+import throttle from 'lodash/throttle.js';
 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';
+import cloneDeep from 'lodash/cloneDeep.js';
 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';
+import debounce from 'lodash/debounce.js';
 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';
+import throttle from 'lodash/throttle.js';
 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';
+import debounce from 'lodash/debounce.js';
 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';
+import startCase from 'lodash/startCase.js';
 
 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';
+import kebabCase from 'lodash/kebabCase.js';
 
 // Option types