Storybook error when compiling trying to compile sass TypeError: this.getOptions is not a function

Question

This is such an annoying issue with storybook. I have seen this now a few times and every-time I end up downgrading packages to solve this issue. The problem with down grading webpack dependancies, is your loose out on the later features/fix's from the later versions which right now is a problem for me as i have am migrating a project from webpack 4 to 5 and upgrading packages for build optimisation.

Just throwing this here to see if anyone has solved this issue without having to downgrade dependancies?

I have been trying to swap out the usage of sass-loader with fast-sass-loader which has been unsuccessful so far :( .

If i find a solution outside of stackoverflow i will be sure to update this thread with my findings - god knows we need one ha!

The Error

TypeError: this.getOptions is not a function

Storybook Main.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve('./src'),
    ];

    config.entry.push(
      path.resolve('./src/storybook.ts'),
    );

    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, "/src/components"),
      '@media': path.resolve(__dirname, "/src/media"),
      '@core': path.resolve(__dirname, "/src/core"),
      '@styles': path.resolve(__dirname, "/src/styles"),
    };


    config.module.rules.push({
      test: /\.(scss|sass)$/,

      use: [
        'css-loader',
        'sass-loader',
        {
          loader: 'fast-sass-loader',
          options: {
            data: `
              @import "fonts/fonts";
              @import "styles/settings/variables";
              @import "styles/mixins/breakpoints";
              @import "styles/mixins/grid";
              @import "styles/mixins/helpers";
              @import "styles/mixins/typography";
              @import "styles/mixins/z-index";
              @import "styles/mixins/gradient";
              @import "styles/mixins/rotate";
            `,
            includePaths:[__dirname, 'src'],
            javascriptEnabled: true,
            ignore: ['node_modules'],
          }
        }
      ]

    });


    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from:'./src/media/',
            to:'./assets/media'
          },
          {
            from:'./src/fonts/',
            to:'./assets/fonts'
          },
        ]
      }),
    );


    return config;
  }
}