preset-create-react-app: CRA build configuration affected where Storybook's generated CSS is placed about presets

[ignas-sedunovas]

Thanks for looking into this, @mrmckeb. Here's the repo: https://github.com/ignas-sedunovas/storybook-preset-create-react-app-issue.

Some details that might be helpful:

• I added CRA + TS and Storybook. Then I wrote a story. At this point fonts are rendering correctly both in local server and static file (repo at this commit) ✔
• Then I converted the story to TSX and added @storybook/preset-create-react-app addon. At this point Storybook complained about missing Webpack loaders. Therefore, I moved the story under /src folder. Now the Storybook successfully loads the story. Unfortunately, when I use the static build, the font is not loaded because of incorrect path (see image below) ❌

[functionalDev]

this issue seems to be a dublication of storybookjs/storybook#9564
I found a workaround by adjusting the config for the file-loader in main.js

const getFileLoader = (config) => {
  const { oneOf } = config.module.rules.find(({oneOf}) => oneOf);
  return oneOf.find(({loader}) => /file-loader/.test(loader));
};
module.exports = {
  stories: ['../src/stories/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
  ],
  webpackFinal:  async (config) => {
    const getFileLoader = (config) => {
      const { oneOf = [] } = config.module.rules.find(({ oneOf }) => oneOf);
      return oneOf.find(({loader}) => /file-loader/.test(loader));
    };
    
    const mutateLoaderToMakePathAbsolute = (loader) => {
        if(loader && loader.options && loader.options.name) {
          loader.options.name = '/' + loader.options.name;
        }
    };

    const fileLoader = getFileLoader(config);
    mutateLoaderToMakePathAbsolute(fileLoader);
    return config;
  },
};

[mrmckeb]

Hi @ignas-sedunovas, I think I understand the problem here. We're now fully using the CRA webpack config, instead of relying on a mix of CRA and Storybook - as this caused a lot of issues.

Are you able to provide a minimal repro repo? I can then take a look and resolve this one.

[VojGin]

The same happens to me for images linked from CSS files

[mrmckeb]

Hi @ignas-sedunovas and @VojGin - I'm very sorry for the long time between replies. I was away on business.

I think this is likely caused by the CRA preset's implementation of file-loader, but I need to investigate more to understand why. The repo provided above will be very helpful @ignas-sedunovas.

It may be as simple as redefining the static path...

I'll be able to look later this week - but if anyone can take a look beforehand, that would be greatly appreciated.

[zeorin]

I'm also having this problem. In my case Storybook is not served on the root path, instead on /components behind Nginx. How might I fix this in a relative-url manner?
I tried loader.options.name = '../../' + loader.options.name;, which fixes the import path, but doesn't actually include the files in the output.

[mrmckeb]

This should now be solved in the latest release. Can someone please test?

If using the preset, we strongly recommend you don't have any custom Webpack config.

[ocean90]

@mrmckeb Thanks, confirmed that it's now working with 2.1.1.

[mrmckeb]

Thank you! WIll close this off.

[andrewmadridista]

Hello. Issue is reproduced with the new versions:
"@storybook/react": "6.0.22",
"@storybook/preset-create-react-app": "3.1.4",
"react-scripts": "3.4.3"
Adjusting the config for the file-loader in main.js still fixes the issue.