How to make aliases with Storybook? - reactjs

Question

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?

Answer 1

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
}
}