Fix for storybook to resolve alias

README.md

@@ -11,6 +11,7 @@ We are currently in early development and hope to release an alpha version by la
 - [Contributing](#contributing)
 - [Local Development](#local-development)
   - [Configuration Options](#configuration-options)
+  - [Frontend](#frontend)
   - [Linting](#linting)
   - [Running tests](#running-tests)
   - [Opening a shell in the container](#opening-a-shell-in-the-container)
@@ -52,6 +53,9 @@ If you want to use Mathesar with a preexisting Postgres DB, modify the `DATABASE
 
 **Please don't do this unless you have full confidence in what you're doing since Mathesar is not stable yet and may make unexpected changes to the database that you connect to it.**
 
+### Frontend
+For more detailed information on Mathesar's frontend development, please refer the [readme file within mathesar_ui directory](https://github.com/centerofci/mathesar/blob/master/mathesar_ui/README.md).
+
 ### Linting
 
 To lint the project, run the `lint.sh` script from the root of the repository. The script requires that the Python virtual environment with `flake8` be activated and that Node modules be installed in `mathesar_ui/`. Alternatively, ESLint and Flake8 should be installed globally on the system.

mathesar_ui/.storybook/main.js

@@ -1,6 +1,26 @@
 const sveltePreprocess = require('svelte-preprocess');
+const data = require('../tsconfig.json');
+const path = require("path");
+
+function getAlias() {
+  const { paths } = data.compilerOptions;
+  Object.keys(paths).forEach((alias) => {
+    paths[alias] = path.resolve(__dirname, `../${paths[alias][0]}`);
+  });
+  return paths;
+}
 
 module.exports = {
+  "core": { builder: "webpack5" },
+  "webpackFinal": (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      ...getAlias(),
+      svelte: path.resolve('node_modules', 'svelte')
+    }
+    config.resolve.extensions.push(".ts", ".tsx", ".mjs", ".js", ".svelte");
+    return config;
+  },
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"