How Can I Configure Storybook.js Webpack To Work With Absolute Image Paths In CSS Modules In A Next.js Project?

I am trying to configure Storybook to work with Next.js, Ant Design, Less, and TypeScript. In Next.js, images have to be stored in the public/ folder and referenced with absolute p

Solution 1:

Basically you already have had an image loader configured which means you're able to load image in your app. The issue is css-loader doesn't resolve absolute path /images/cucumber.png (since it just supports relative path). In order to fix this, you can manually resolve as following:

newConfig.resolve.alias['/images/cucumber.png'] = path.resolve(__dirname, '../public/images/cucumber.png');

return newConfig;

Solution 2:

You can define a static folder for Storybook in your run script: "start-storybook": "start-storybook -s ./public -p 9001"