Image asset not being found

[BrknRules]

Summary

Upgraded from 6.5 to 8.4, but the default image import that worked out of the box in 6.5 has now broken.

The project is a monorepo with a custom webpack config, with the repo layout like so:

.storybook/
 | main.ts
 | preview.ts
 | webpack.config.js

packages/
 | ...package/
 | | __stories__/
 | | | images/
 | | | | ...any assets used within stories
 | | | *.stories.tsx
 | | src/
 | | | ...component code
 | | ...package specific configs
 | global.d.ts
 | ...configs for all packages

...repo configs

When in SB v6.5, when importing an image in a story file from its corresponding image/ directory, Storybook was able to find the image and add it to static/media as expected from its default behaviour. There wasn't a need in 6.5 to configure file-loader or adjust our webpack config, and removing the webpack config to try and use the 8.4 default config doesn't work either.

// Component.stories.tsx

...imports

import placeholderImage from './images/placeholderImage.png';
console.log(placeholderImage); // string path to 'static/media/packages/react-hva-banner/__stories__/images/placeholderImage.png'

...

The issue is that in SB v8.4, the static/media directory is not in the storybook preview bundle when I inspect it with devtools. In both 6.5 and 8.4, the import does provide the correct path string, it seems that the static media isn't being made in 8.4.

Initially I got a Cannot find module './images/placeholderImage.png' or its corresponding type declarations. error, but I resolved this by following these suggestions.

Now Storybook 8.4 loads without error, but the component does not render at all, I assume due to the missing media.

What's changed in the default webpack config such that this behaviour no longer works out of the box? What should I do to have get this functionality to work again? Thanks!

Additional information

Storybook Environment Info:

System:
OS: macOS 15.2
CPU: (12) arm64 Apple M2 Max
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.17.0 - /opt/homebrew/opt/nvm/versions/node/v20.17.0/bin/node
Yarn: 1.22.21 - /opt/homebrew/opt/nvm/versions/node/v20.17.0/bin/yarn
npm: 10.9.0 - /opt/homebrew/opt/nvm/versions/node/v20.17.0/bin/npm <----- active
Browsers:
Chrome: 131.0.6778.265
Firefox: 126.0
Safari: 18.2
npmPackages:
@storybook/addon-a11y: ^8.4.7 => 8.4.7
@storybook/addon-actions: ^8.4.7 => 8.4.7
@storybook/addon-essentials: ^8.4.7 => 8.4.7
@storybook/addon-interactions: ^8.4.7 => 8.4.7
@storybook/addon-links: ^8.4.7 => 8.4.7
@storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3
@storybook/cli: ^8.4.7 => 8.4.7
@storybook/react: ^8.4.7 => 8.4.7
@storybook/react-webpack5: ^8.4.7 => 8.4.7
@storybook/test: ^8.4.7 => 8.4.7
@storybook/test-runner: 0.13.0 => 0.13.0

Create a reproduction

https://stackblitz.com/edit/github-16phrnka?file=src%2Fstories%2FPage.stories.ts