Webpack 5: raw-loader deprecated, require.context approach no longer working

After the upgrade to builder-webpack5 and 6.3.12 on storybook, I noticed that the approach suggested in the readme is no longer working. Attempting to load all scss files in a folder no longer provides the sourcecode:

const svgIconsReq = require.context('!!raw-loader!../../../assets/icons', true, /\.svg/);
const svgIconTokenFiles = svgIconsReq
  .keys()
  .map(filename => ({ filename, content: svgIconsReq(filename).default }));

...

> svgIconTokenFiles
[... { filename: './add.svg', content: undefined }, { filename: './delete.svg', content: undefined } ...]

It looks like the raw-loader approach is no longer going to be supported moving forward (see: https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax), and using the new method isn’t going to allow inlining without modifications to the existing rules: (see: https://github.com/webpack/webpack/issues/12900). The only files that weren’t dropped from importing were ones that were marked as entrypoints.

[Sqrrl]

Hey. Just published v2.0.0-beta.0 with some “experimental” changes. It implements a different way of loading source files and simplifies the addon configuration. I hope it gets rid of the issues with webpack 5.

Would be great if you could check it out.

Migration:

• Bump addon version to v2.0.0-beta.0
• Get rid of the token file loading in your .storybook/preview.js

Before:

const tokenContext = require.context(
  '!!raw-loader!../src',
  true,
  /.\.(css|less|scss|svg)$/
);

const tokenFiles = tokenContext.keys().map(function (filename) {
  return { filename: filename, content: tokenContext(filename).default };
});

export const parameters = {
  designToken: {
    defaultTab: 'Colors',
    files: tokenFiles
  }
};

After:

export const parameters = {
  designToken: {
    defaultTab: 'Colors'
  }
};

[thayna-oliveira]

Hi @Sqrrl, I checked here and it works like a charm!! Thank you, you saved my day!!! ❤️ 😍 ✨