Unable to Mock Modules in Storybook

[CyberalDev82]

Summary

Describe the bug

I’ve been attempting to mock modules in one of my projects following this guide, but I can’t get it to work. The mock is never displayed inside Storybook.

Reproduction

In stackblitz I can't reproduce the problem, all it works fine here

The stories is MapLegend.stories.tsx

It works when the text below is displayed :
"GOOD it is the mock"

I have a complicated stack that I can't reproduce in stackblitz
I use :

• nx (https://nx.dev/) in version 19.4.0 to manage a mono repository.
• storybook 8.1.2
• node 18.16.0 (with nvm)
• pnpm 8.3.0

I have tried with node 20.15.0, nx 19.4.0 and storybook 8.2.0-alpha.10 but it doesn't work.
I have tried with node 18.19.1, nx 19.4.0 and storybook 8.2.0-alpha.10 but it doesn't work.

In the package.json I have this :

"#src/pages/ProjectMapPage/hooks/useMapAdapter": {
	"storybook": "./src/pages/ProjectMapPage/hooks/useMapAdapter.mock.ts",
	"default": "./src/pages/ProjectMapPage/hooks/useMapAdapter.ts"
},

how storybook know that the code is run in storybook, in other word how and who set the condition storybook ?
In my case the code run always with the default condition.

We have a ./storybook/main.ts complicated, when I use the main.ts comes from my example it works.

See below my devDependencies.

"devDependencies": {
		"@babel/core": "^7.14.5",
		"@babel/preset-env": "^7.20.2",
		"@babel/preset-react": "^7.18.6",
		"@babel/preset-typescript": "^7.13.0",
		"@docusaurus/core": "3.3.2",
		"@docusaurus/preset-classic": "3.3.2",
		"@docusaurus/types": "3.3.2",
		"@faker-js/faker": "8.4.1",
		"@graphql-codegen/cli": "^3.2.2",
		"@graphql-codegen/client-preset": "^2.1.1",
		"@graphql-codegen/fragment-matcher": "^5.0.0",
		"@graphql-codegen/typescript-document-nodes": "^3.0.4",
		"@graphql-codegen/typescript-msw": "^1.1.6",
		"@graphql-codegen/typescript-react-apollo": "^3.3.7",
		"@graphql-codegen/typescript-resolvers": "3.2.0",
		"@graphql-eslint/eslint-plugin": "^3.20.1",
		"@graphql-tools/graphql-file-loader": "^8.0.0",
		"@graphql-tools/load": "^8.0.0",
		"@graphql-tools/mock": "8.7.20",
		"@graphql-tools/schema": "9.0.18",
		"@graphql-typed-document-node/core": "^3.2.0",
		"@nrwl/linter": "19.0.6",
		"@nx-aws-plugin/nx-aws-cache": "^3.1.0",
		"@nx-plus/docusaurus": "15.0.0-rc.0",
		"@nx/cypress": "19.0.6",
		"@nx/devkit": "19.0.6",
		"@nx/esbuild": "19.0.6",
		"@nx/eslint": "19.0.6",
		"@nx/eslint-plugin": "19.0.6",
		"@nx/jest": "19.0.6",
		"@nx/js": "19.0.6",
		"@nx/node": "19.0.6",
		"@nx/playwright": "19.0.6",
		"@nx/plugin": "19.0.6",
		"@nx/react": "19.0.6",
		"@nx/storybook": "19.0.6",
		"@nx/vite": "19.0.6",
		"@nx/web": "19.0.6",
		"@nx/webpack": "19.0.6",
		"@nx/workspace": "19.0.6",
		"@originjs/vite-plugin-commonjs": "^1.0.3",
		"@pellegrims/nx-remotecache-s3": "^5.0.0",
		"@playwright/experimental-ct-react": "1.30.0",
		"@playwright/test": "^1.36.0",
		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
		"@storybook/addon-coverage": "^0.0.9",
		"@storybook/addon-docs": "8.1.2",
		"@storybook/addon-essentials": "8.1.2",
		"@storybook/addon-interactions": "8.1.2",
		"@storybook/addon-storysource": "8.1.2",
		"@storybook/components": "8.1.2",
		"@storybook/core-common": "8.1.2",
		"@storybook/core-events": "8.1.2",
		"@storybook/core-server": "8.1.2",
		"@storybook/csf-tools": "8.1.2",
		"@storybook/manager-api": "8.1.2",
		"@storybook/preview-api": "8.1.2",
		"@storybook/react": "8.1.2",
		"@storybook/react-vite": "8.1.2",
		"@storybook/react-webpack5": "8.1.2",
		"@storybook/test": "8.1.2",
		"@storybook/test-runner": "0.18.1",
		"@storybook/theming": "8.1.2",
		"@svgr/webpack": "8.1.0",
		"@swc-node/register": "1.4.2",
		"@swc/cli": "0.3.12",
		"@swc/core": "~1.3.85",
		"@swc/jest": "0.2.20",
		"@tanstack/react-query": "5.7.2",
		"@testing-library/jest-dom": "6.4.5",
		"@testing-library/react": "15.0.6",
		"@types/express": "~4.17.13",
		"@types/file-saver": "^2.0.5",
		"@types/geojson-vt": "^3.2.5",
		"@types/jest": "29.5.0",
		"@types/lodash": "^4.14.191",
		"@types/node": "18.16.9",
		"@types/proj4": "2.5.5",
		"@types/react": "18.3.1",
		"@types/react-datepicker": "^4.19.6",
		"@types/react-dom": "18.3.0",
		"@types/react-is": "18.3.0",
		"@types/relay-test-utils": "^14.1.4",
		"@types/styled-components": "5.1.26",
		"@typescript-eslint/eslint-plugin": "7.9.0",
		"@typescript-eslint/parser": "7.9.0",
		"@vitejs/plugin-react": "4.3.0",
		"@vitest/coverage-v8": "^1.0.4",
		"@vitest/ui": "^1.3.1",
		"babel-jest": "29.4.3",
		"babel-loader": "9.1.2",
		"babel-plugin-istanbul": "^6.1.1",
		"babel-plugin-styled-components": "2.1.4",
		"concurrently": "^8.0.1",
		"cypress": "^13.6.6",
		"esbuild": "^0.19.2",
		"eslint": "8.57.0",
		"eslint-config-prettier": "9.0.0",
		"eslint-plugin-cypress": "2.15.1",
		"eslint-plugin-import": "2.27.5",
		"eslint-plugin-jsx-a11y": "6.7.1",
		"eslint-plugin-playwright": "^0.15.3",
		"eslint-plugin-prettier": "^4.2.1",
		"eslint-plugin-react": "7.32.2",
		"eslint-plugin-react-hooks": "4.6.0",
		"eslint-plugin-sonarjs": "^0.18.0",
		"eslint-plugin-storybook": "^0.6.15",
		"graphql-codegen-typescript-mock-data": "^3.5.0",
		"html-webpack-plugin": "^5.5.0",
		"http-server": "^14.1.1",
		"husky": "^8.0.0",
		"jest": "29.4.3",
		"jest-environment-jsdom": "29.4.3",
		"jest-environment-node": "^29.4.1",
		"jest-fetch-mock": "3.0.3",
		"jest-image-snapshot": "6.4.0",
		"jsdom": "22.1.0",
		"json-to-ts": "1.7.0",
		"jsonc-eslint-parser": "^2.1.0",
		"keycloak-js": "23.0.6",
		"mjolnir.js": "2.7.1",
		"msw": "1.0.0",
		"msw-storybook-addon": "1.10.0",
		"nx": "19.0.6",
		"nyc": "^15.1.0",
		"playwright": "1.42.1",
		"prettier": "2.8.8",
		"prettier-eslint": "^16.3.0",
		"react-live": "^3.1.2",
		"react-refresh": "^0.10.0",
		"react-test-renderer": "18.2.0",
		"relay-test-utils": "^16.2.0",
		"storybook": "8.1.2",
		"storybook-addon-mock-date": "^0.5.0",
		"storybook-addon-remix-react-router": "^3.0.0",
		"storybook-addon-swc": "^1.2.0",
		"storybook-react-i18next": "^2.0.9",
		"swc-loader": "0.1.15",
		"ts-essentials": "^9.3.2",
		"ts-jest": "29.1.0",
		"ts-node": "10.9.1",
		"tslib": "^2.5.0",
		"tsx": "4.7.1",
		"typescript": "5.5.2",
		"url-loader": "^4.1.1",
		"vite": "5.2.9",
		"vite-plugin-dts": "2.3.0",
		"vite-plugin-eslint": "1.8.1",
		"vite-tsconfig-paths": "4.2.1",
		"vitest": "^1.3.1",
		"vitest-fetch-mock": "^0.2.2",
		"wait-on": "^7.0.1",
		"webpack": "5.89.0",
		"webpack-bundle-analyzer": "4.8.0"
	},

Additional information

No response

Create a reproduction

https://stackblitz.com/edit/github-iojcfk-zknqec?file=package.json,src%2Fpages%2FProjectMapPage%2Fhooks%2FuseMapAdapter.mock.ts,src%2Fpages%2FProjectMapPage%2Fhooks%2FuseMapAdapter.ts,src%2Fpages%2FProjectMapPage%2FMapLegend%2FMapLegend.stories.tsx,src%2Fpages%2FProjectMapPage%2FMapLegend%2FMapLegend.tsx

[valentinpalkovic]

cc @kasperpeulen

[kasperpeulen]

Which builder are you using? Could you share your main.ts file?

For webpack you can set the condition like this:
https://webpack.js.org/configuration/resolve/#resolveconditionnames

For Vite:
https://vitejs.dev/config/shared-options#resolve-conditions

[CyberalDev82]

I use vite js.

main.ts :

{
  stories: [ '../**/*.stories.@(js|jsx|ts|tsx)' ],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-storysource',
    'storybook-addon-remix-react-router',
    '@nx/react/plugins/storybook',
    '@storybook/addon-coverage',
    'storybook-addon-mock-date'
  ],
  framework: {
    name: '/home/aaa/ihm/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@storybook/react-vite',
    options: { builder: { viteConfigPath: '.storybook/vite.config.ts' } }
  },
  core: { disableTelemetry: true },
  staticDirs: [
    '/home/aaa/ihm/packages/common/assets/fonts',
    '/home/aaa/ihm/.storybook/public'
  ],
  build: { test: { disabledAddons: [Array] } },
  previewHead: [Function: previewHead],
  viteFinal: {
	  root: '/home/aaa/ihm/apps/land',
	  cacheDir: '/home/aaa/ihm/node_modules/.cache/storybook/3095f6873134ea5629f12d4ee121080592c4711e8aceb61930488f0f440c7ba0/sb-vite',
	  plugins: [
		Promise { [Object] },
		{
		  name: 'storybook:package-deduplication',
		  enforce: 'pre',
		  config: [Function: config]
		},
		{
		  name: 'storybook:react-docgen-plugin',
		  enforce: 'pre',
		  transform: [AsyncFunction: transform]
		},
		[ [Object], [Object] ],
		{
		  name: 'nx-vite-ts-paths',
		  configResolved: [AsyncFunction: configResolved],
		  resolveId: [Function: resolveId],
		  writeBundle: [AsyncFunction: writeBundle]
		},
		{
		  name: 'originjs:commonjs',
		  apply: 'serve',
		  transform: [Function: transform]
		},
		{
		  name: 'storybook:code-generator-plugin',
		  enforce: 'pre',
		  configureServer: [Function: configureServer],
		  config: [Function: config],
		  configResolved: [Function: configResolved],
		  resolveId: [Function: resolveId],
		  load: [AsyncFunction: load],
		  transformIndexHtml: [AsyncFunction: transformIndexHtml]
		},
		{
		  name: 'plugin-csf',
		  rollup: [Object],
		  vite: [Object],
		  webpack: [Function: webpack],
		  rspack: [Function: rspack],
		  enforce: 'pre',
		  transform: [AsyncFunction: transform]
		},
		{
		  name: 'storybook:inject-export-order-plugin',
		  enforce: 'post',
		  transform: [AsyncFunction: transform]
		},
		{
		  name: 'storybook:strip-hmr-boundary-plugin',
		  enforce: 'post',
		  transform: [AsyncFunction: transform]
		},
		{
		  name: 'storybook:allow-storybook-dir',
		  enforce: 'post',
		  config: [Function: config]
		},
		{
		  name: 'storybook:external-globals-plugin',
		  enforce: 'post',
		  config: [AsyncFunction: config],
		  transform: [AsyncFunction: transform]
		},
		{
		  name: 'storybook:rollup-plugin-webpack-stats',
		  enforce: 'post',
		  moduleParsed: [Function: moduleParsed],
		  storybookGetStats: [Function: storybookGetStats]
		},
		{
		  name: 'vite:istanbul',
		  apply: 'serve',
		  enforce: 'post',
		  config: [AsyncFunction: config],
		  configResolved: [Function: configResolved],
		  configureServer: [Function: configureServer],
		  transform: [Function: transform]
		}
	  ],
	  configFile: false,
	  base: './',
	  resolve: { alias: { '@land': '/src' } },
	  envPrefix: [ 'VITE_', 'STORYBOOK_' ],
	  build: { target: undefined, sourcemap: true },
	  assetsInclude: [ '/sb-preview/**' ],
	  server: {
		middlewareMode: true,
		hmr: { port: 4401, server: [Server] },
		fs: { strict: true }
	  },
	  appType: 'custom',
	  optimizeDeps: {
		entries: [
		  'src/components/Card/ProgramCard/ProgramCard.stories.tsx',
		  'src/components/Card/ProgramCard/ProgramCardModal/ProgramCardModal.stories.tsx',
		  'src/components/Card/ProjectCard/ProjectBottom/ProjectBottom.stories.tsx',
		  'src/components/Card/ProjectCard/ProjectCard.stories.tsx',
		  'src/components/Card/ProjectCard/ProjectCardModal/ProjectCardModal.stories.tsx',
		  'src/components/Card/common/Content/Content.stories.tsx',
		  'src/components/Card/common/Header/Header.stories.tsx',
		  'src/components/Card/common/Picture/Picture.stories.tsx',
		  'src/components/CorisclimDownloadDocumentLink/CorisclimDownloadDocumentLink.stories.tsx',
		  'src/components/DocumentListModal/DocumentListModal.stories.tsx',
		  'src/components/HtmlViewer/HtmlViewer.stories.tsx',
		  'src/components/MapDataTable/MapDataTable.stories.tsx',
		  'src/components/MapDataTable/PositionDataTable/PositionDataTable.stories.tsx',
		  'src/components/WelcomeMessageModal/WelcomeMessageModal.stories.tsx',
		  'src/layoutComponents/Grid/Grid.stories.tsx',
		  'src/layoutComponents/Skeleton/Skeleton.stories.tsx',
		  'src/pages/DownloadPage/DownloadPage.stories.tsx',
		  'src/pages/LakeSheetPage/LakeSheetPage.stories.tsx',
		  'src/pages/LakeSheetPage/LakeSheetPageAdditionalInfo/LakeSheetPageAdditionalInfo.stories.tsx',
		  'src/pages/ProgramPage/ProgramDescription/ProgramDescription.stories.tsx',
		  'src/pages/ProgramPage/ProgramPage.stories.tsx',
		  'src/pages/ProgramsPage/CustomerContextDescription/CustomerContextDescription.stories.tsx',
		  'src/pages/ProgramsPage/ProgramsPage.stories.tsx',
		  'src/pages/ProjectMapPage/AddLayersPanel/AddLayersPanel.stories.tsx',
		  'src/pages/ProjectMapPage/AddLayersPanel/Spinner/Spinner.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/CorisclimFiltersPanel.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/InfoIconModalContent/InfoIconModalContent.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/fields/Coastline/CoastlineProjectedField/CoastlineProjectedField.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/fields/Coastline/CoastlineReferenceField/CoastlineReferenceField.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/fields/ExtremeEvent/ExtremeEventActiveField/ExtremeEventActiveField.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/fields/ExtremeEvent/ExtremeEventIntensityField/ExtremeEventIntensityField.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/fields/SeaLevelRiseScenarioField/SeaLevelRiseScenarioField.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/fields/VerticalLandMotionSubsidenceField/VerticalLandMotionSubsidenceField.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/CorisclimFiltersPanel/fields/YearsField/YearsField.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/FiltersPanel.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/Header/Header.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/SectionContent/AttributesFilter/AttributesFilterForm/AttributesFilterForm.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/SectionContent/GeographicFilterForm/GeographicFilterForm.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/SectionContent/LayerSelector/LayerSelector.stories.tsx',
		  'src/pages/ProjectMapPage/FiltersPanel/SectionContent/TimeFilterForm/TimeFilterForm.stories.tsx',
		  'src/pages/ProjectMapPage/LayersPanel/LayersPanel.stories.tsx',
		  'src/pages/ProjectMapPage/MapDataSummary/MapDataSummary.stories.tsx',
		  'src/pages/ProjectMapPage/MapLegend/MapLegend.stories.tsx',
		  'src/pages/ProjectMapPage/ProjectMapPage.stories.tsx',
		  'src/pages/ProjectMapPage/TopPanel/FiltersPanelButtons/FiltersPanelButtons.stories.tsx',
		  'src/pages/ProjectMapPage/TopPanel/FiltersPanelTags/FiltersPanelTags.stories.tsx',
		  'src/pages/ProjectMapPage/TopPanel/TopPanel.stories.tsx',
		  'src/pages/ProjectMapPage/layers/HydroLayer/HydroTooltip/HydroTooltip.stories.tsx',
		  'src/pages/ProjectMapPage/overlays/CorisclimOverlays/CorisclimOverlayContent/CorisclimOverlayContent.stories.tsx',
		  'src/pages/ProjectMapPage/overlays/CorisclimOverlays/CorisclimPopover/CorisclimPopover.stories.tsx',
		  'src/pages/ProjectMapPage/overlays/CorisclimOverlays/CorisclimTooltip/CorisclimTooltip.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/AnimalMap.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/Panels/AnimalDetails/ActivitySummary/Activity/Activity.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/Panels/AnimalDetails/ActivitySummary/ActivityIconography/ActivityIconography.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/Panels/AnimalDetails/ActivitySummary/ActivitySummary.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/Panels/AnimalDetails/AnimalDetails.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/Switch/Switch.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/layers/AnimalTracks/AnimalTracks.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/layers/LastPositionLayer/LastPositionLayer.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/layers/LastPositionLayer/PointMenu/PointMenu.stories.tsx',
		  'src/pages/ProjectPage/AnimalMap/layers/LastPositionLayer/Tooltip/Tooltip.stories.tsx',
		  'src/pages/ProjectPage/AnimalSheet/AnimalSheet.stories.tsx',
		  'src/pages/ProjectPage/TopPanel/TopPanel.stories.tsx',
		  'src/pages/myProfile/MyProfilePage.stories.tsx'
		],
		include: [
		  '@storybook/react',
		  'lodash/camelCase.js',
		  'lodash/camelCase',
		  'lodash/cloneDeep.js',
		  'lodash/cloneDeep',
		  'lodash/countBy.js',
		  'lodash/countBy',
		  'lodash/debounce.js',
		  'lodash/debounce',
		  'lodash/isEqual.js',
		  'lodash/isEqual',
		  'lodash/isFunction.js',
		  'lodash/isFunction',
		  'lodash/isPlainObject.js',
		  'lodash/isPlainObject',
		  'lodash/isString.js',
		  'lodash/isString',
		  'lodash/kebabCase.js',
		  'lodash/kebabCase',
		  'lodash/mapKeys.js',
		  'lodash/mapKeys',
		  'lodash/mapValues.js',
		  'lodash/mapValues',
		  'lodash/merge.js',
		  'lodash/merge',
		  'lodash/mergeWith.js',
		  'lodash/mergeWith',
		  'lodash/pick.js',
		  'lodash/pick',
		  'lodash/pickBy.js',
		  'lodash/pickBy',
		  'lodash/startCase.js',
		  'lodash/startCase',
		  'lodash/throttle.js',
		  'lodash/throttle',
		  'lodash/uniq.js',
		  'lodash/uniq',
		  'lodash/upperFirst.js',
		  'lodash/upperFirst',
		  'prettier/parser-babel',
		  'prettier/parser-flow',
		  'prettier/parser-typescript',
		  'react-dom',
		  'react-dom/client',
		  'react-is',
		  'react',
		  'react/jsx-runtime',
		  'regenerator-runtime/runtime.js',
		  '@mdx-js/react',
		  '@storybook/addon-essentials/docs/mdx-react-shim'
		]
	  },
	  define: {
		'process.env.FRONTEND_VERSION': undefined,
		'process.env.FRONTEND_BUILD_TIMESTAMP': '1720706964394'
	  }
	}
}

[kasperpeulen]

Right so you have to set the resolve.conditions = ['storybook'] as described here:
https://vitejs.dev/config/shared-options#resolve-conditions

[CyberalDev82]

Thank you very much, it works fine.