How to make aliases with Storybook?

I try to make aliases for the storybook, but I have looked on the site to find a solution. However, my problem persists, and it doesn't work. I already have some aliases in my original webpack.config.js, but I don't understand how it cannot be cached. So, when I do yarn storybook, I have an error.

Below is my JS file from the .storybook folder; I used the documentation.

main.js

const path = require('path');
const custom = require('../webpack.config.js');

module.exports = {
  webpackFinal: async (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: [
          {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../'),
          }
        ],
      },
      resolve: { ...config.resolve, alias: custom.resolve.alias}
    };
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
    "../src/**/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "core": {
    "builder": "webpack5"
  }
}

Error

ModuleParseError: Module parse failed: Unexpected token (10:27) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | }; |

const Template = (args) => <Header {...args} />; | | export const Primary = Template.bind({}); at handleParseError (/path/project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:933:19) at /path/project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1035:5 at processResult (/path/project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:755:11) at /path/project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:819:5 at /path/project/node_modules/loader-runner/lib/LoaderRunner.js:406:3 at iterateNormalLoaders (/mnt/d/Sites/chillwatch/node_modules/loader-runner/lib/LoaderRunner.js:232:10) at Array. (/path/project/node_modules/loader-runner/lib/LoaderRunner.js:223:4) at runCallbacks (/path/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15) at /path/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4 at /path/project/node_modules/graceful-fs/graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:75:3)

What am I doing wrong?

GitHub Issue

As mentioned on the above link you can make aliases with the storybook as following:

const path = require("path")

module.exports = {
  "webpackFinal": async (config) => {
    config.resolve.alias['#'] = path.resolve(__dirname, '../src')
    config.resolve.alias['#components'] = path.resolve(__dirname, '../src/components')
    return config
  }
}