title: How to resolve aliases in Storybook?
body: <p>I have a React/Typescript project with Storybook. Storybook works great, but as soon as I start importing files with aliases, it crashes.</p>
  <p>Example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Foo from "@components/foo" =&gt; crash
  import Foo from "../../components/foo" =&gt; ok</code></pre>
  </div>
  </div>
  </p>
  <p>The app works fine with the aliases. The issue is only related to Storybook.</p>
  <p>Here is my storybook config:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = {
    stories: ["../**/stories.tsx"],
    webpackFinal: (config) =&gt; {
      return {
        ...config,
        module: {
          ...config.module,
          rules: [
            {
              test: /\.(ts|js)x?$/,
              exclude: /node_modules/,
              use: { loader: "babel-loader" },
            },
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            { test: /\.(png|jpg|gif)$/, use: ["file-loader"] },
            {
              test: /\.svg$/,
              use: [
                {
                  loader: "babel-loader",
                },
                {
                  loader: "react-svg-loader",
                  options: {
                    jsx: true,
                  },
                },
              ],
            },
          ],
        },
      };
    },
    typescript: {
      check: false,
      checkOptions: {},
      reactDocgen: "react-docgen-typescript",
      reactDocgenTypescriptOptions: {
        shouldExtractLiteralValuesFromEnum: true,
        propFilter: (prop) =&gt;
          prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
      },
    },
  };</code></pre>
  </div>
  </div>
  </p>
  <p>My webpack config:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* eslint-env node */
  const path = require("path");
  const TerserPlugin = require("terser-webpack-plugin");
  const Dotenv = require("dotenv-webpack");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  
  const isProductionMode = (mode) =&gt; mode === "production";
  
  module.exports = () =&gt; {
    const env = require("dotenv").config({ path: __dirname + "/.env" });
    const nodeEnv = env.parsed.NODE_ENV;
    return {
      mode: "development",
      entry: "./src/index.tsx",
      output: {
        path: path.join(__dirname, "./dist"),
        filename: "[name].[contenthash].bundle.js",
        publicPath: "/",
      },
      resolve: {
        extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
        alias: {
      "@api": path.resolve(__dirname, "src/api/"),
      "@assets": path.resolve(__dirname, "src/assets/"),
      "@components": path.resolve(__dirname, "src/components/"),
      "@containers": path.resolve(__dirname, "src/containers/"),
      "@data": path.resolve(__dirname, "src/data/"),
      "@i18n": path.resolve(__dirname, "src/i18n/"),
      "@models": path.resolve(__dirname, "src/models/"),
      "@pages": path.resolve(__dirname, "src/pages/"),
      "@src": path.resolve(__dirname, "src/"),
      "@stores": path.resolve(__dirname, "src/stores/"),
      "@utils": path.resolve(__dirname, "src/utils/"),
    },
      },
      module: {
        rules: [
          {
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            use: { loader: "babel-loader" },
          },
          { test: /\.css$/, use: ["style-loader", "css-loader"] },
          { test: /\.(png|jpg|jpeg|gif)$/, use: ["file-loader"] },
          {
            test: /\.svg$/,
            use: [
              {
                loader: "babel-loader",
              },
              {
                loader: "react-svg-loader",
                options: {
                  jsx: true,
                },
              },
            ],
          },
        ],
      },
      devServer: {
        historyApiFallback: true,
        port: 3000,
        inline: true,
        hot: true,
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: "./src/index.html",
        }),
        new Dotenv(),
      ],
      optimization: {
        minimize: isProductionMode(nodeEnv),
        minimizer: isProductionMode(nodeEnv) ? [new TerserPlugin()] : [],
        splitChunks: { chunks: "all" },
      },
    };
  };</code></pre>
  </div>
  </div>
  </p>
  <p>How to fix this? I am on webpack 5.24.2 and storybook 6.1.20, so these are the latest versions.</p>