Images not loading with preset-create-react-app

[duhseekoh]

I used to have storybook configured where it would auto-detect that my project was create-react-app based. I recently upgraded storybook and started using the cra preset. Using the preset seems to have a tighter integration with react-scripts (e.g. now storybook is as expected transpiling node_modules), so that's great.

However, I'm running into an issue with image imports in my components that used to work without the preset.

When I inspect the broken image in the story, the source is a base64 data uri as expected. When I decode it, it's a webpack path to a non-existent file.

Decodes to: module.exports = __webpack_public_path__ + "static/media/logo.2aa49855.png";

So the images on webpack dev server are not being correctly generated?

Logo.stories.tsx

export default {
  title: 'Graphics/Logo',
  component: Logo,
};

export const logo = () => (
    <Logo />
);

Logo.tsx

import React from 'react';
import styled from 'styled-components/macro';
import logo from '../../../assets/logo.png';

const SWrapper = styled.div`...`;
const SLogo = styled.img`...`;

const Logo = () => (
  <SWrapper>
    <SLogo src={logo} alt="Logo" />
  </SWrapper>
);

export default Logo;

presets.ts

const path = require('path');

module.exports = [
  {
    name: '@storybook/preset-create-react-app',
    options: {
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
      },
    },
  },
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      // Disabling storysource on the docs page. It's currently causing lint errors on SB 5.2.8 when a story is updated.
      sourceLoaderOptions: null,
    },
  },
];

Env info react-scripts: v3.0.1 storybook: v5.2.8 (addon-docs, addon-knobs) preset-create-react-app: v1.3.2

[TonyDalian]

Also encounter this issue... Could anyone tell me how to avoid this issue ?