storybook: Cant add aliases in storybook config

I think the problem may be trailing slashes. Try using ~ and ../src/ exactly. It seems to work for me in all the variants below (Storybook 6.0.21 and 6.0.27).

Shortest:

webpackFinal: async (config) => {
  config.resolve.alias['~'] = path.resolve(__dirname, '../src/');
  return config;
},

Short:

webpackFinal: async (config) => {
  config.resolve.alias = {
    ...config.resolve?.alias,
    '~': path.resolve(__dirname, '../src/'),
  };
  return config;
},

Longer:

webpackFinal: async (config) => ({
  ...config,
  resolve: {
    ...config.resolve,
    alias: {
      ...config.resolve?.alias,
      '~': path.resolve(__dirname, '../src/'),
    },
  },
}),

If someone could create a reproduction repo, that’d be super helpful fixing this bug.

if this doesn’t work

const path = require("path");

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "~/": path.resolve(__dirname, "../src/"),
    };
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
  },
};

then that’s a bug.

This works properly for me on the latest version:

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

Here is a workaround for using aliases from tsconfig (*.mdx stories are supported as well):

const {TsconfigPathsPlugin} = require('tsconfig-paths-webpack-plugin');

module.exports = {
    stories: [
        '../src/**/*.stories.@(ts|tsx|mdx)'
    ],
    addons: [
        '@storybook/addon-essentials'
    ],

    webpackFinal: async (config) => {
        [].push.apply(config.resolve.plugins, [
            new TsconfigPathsPlugin({extensions: config.resolve.extensions})
        ]);

        return config;
    }
};

I guess this should be added to Storybook docs.

I know this is an old ticket with numerous “try this” things listed in it, but fundamentally, the issue is reproducible by doing this:

npm init vue@latest

Select:

✔ Project name: … foo
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No 
✔ Add Vue Router for Single Page Application development? … No 
✔ Add Pinia for state management? … No 
✔ Add Vitest for Unit Testing? … No 
✔ Add Cypress for both Unit and End-to-End testing? … No 
✔ Add ESLint for code quality? … No

Now install storybook

cd foo
npx storybook init
npm install

Now create a basic component:

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'  // <--- Using an alias
</script>

<template>
  <div>
    <hello-world msg="hi"/>
  </div>
</template>

<style scoped>
</style>

and a basic story:

import Hello from './Hello.vue';

export default {
    title: 'Hello',
    component: Hello,
    argTypes: {},
};

export const Default = () => ({
    components: {Hello},
    setup: () => ({}),
    template: `<hello/>`,
});

and run:

npm run storybook

You will see:

8:33:34 pm [vite] Internal server error: Failed to resolve import "@/components/HelloWorld.vue" from "src/components/Hello.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/doug/dev/nest-rpg/foo/src/components/Hello.vue
  1  |  import { defineComponent as _defineComponent } from "vue";
  2  |  import HelloWorld from "@/components/HelloWorld.vue";
     |                          ^
  3  |  const _sfc_main = /* @__PURE__ */ _defineComponent({
  4  |    name: "Hello",

…but why?

Well, bluntly because the storybook configuration is wrong.

The automatically generated vite config for storybook and the vite config from the vue scaffold are different; the scaffold looks like this:

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

and tsconfig.json that says:

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

and .storybook/main.js doesn’t load that file. Or doesn’t process it. Or something.

If you modify main.js to have this import, it works, eg:

const { mergeConfig } = require('vite');
const path = require("path");

module.exports = {
  ...
  "features": {
    "storyStoreV7": true
  },
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      resolve: {
        alias: { '@': path.resolve(path.dirname(__dirname), "src")},
      },
    });
  },

So is this an issue or not?

Well, lets put it this way.

Anyone who uses the official (https://vuejs.org/guide/quick-start.html#with-build-tools) vue scaffold, with the official storybook install (https://storybook.js.org/docs/vue/get-started/install), will get an ‘out of the box’ copy of storybook that is broken.

I don’t know why this issue is closed with ‘completed’ because a work around exists, but, for anyone who finds this post, no, it’s not just you, it’s broken.

If you feel strongly about it, consider opening a new issue, a PR…

…but please appreciate that fundamentally the reason this is broken is because the alias is defined in the root configuration files, and those files are not used by storybook; the version generated by storybook does not include them; if you want to fix it, you need to look at what your configuration actually does and back port that into the storybook config, not just randomly copy and paste changes from this thread.

this was working fine for me with Storybook 5.x, but is now broken in 6.x

the exact scenario described by @ndelangen is not working for me, so i’m inclined to believe that this is a bug

i also still see info => Using default Webpack setup. in the console, even though i am providing custom config like so:

const webpackConfig = require('../.webpack/client.js');

module.exports = {
  webpackFinal: (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      ...webpackConfig.resolve,
      alias: {
        ...config.resolve.alias,
        ...webpackConfig.resolve.aliases,
      },
    },
  }),
  //other config properties
}

@monolithed posted a nice solution, but i wish this was cleaner with my prettier formating it looks like this

  webpackFinal: async (config) => {
    ;[].push.apply(config.resolve.plugins, [
      new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
    ])

    return config
  },

Apart from that for TypeScript users this is how i have it setup: in tsconfig.ts

{
  "compilerOptions": {
    "baseUrl": "./src",
  },
}

and in ./.storybook/main.js

const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin')

module.exports = {
  stories: ['../**/src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    ;[].push.apply(config.resolve.plugins, [
      new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
    ])

    return config
  },
}

Update: looks like this is a cleaner version

  webpackFinal: async (config) => {
    config.resolve.plugins = [new TsconfigPathsPlugin({ extensions: config.resolve.extensions })]
    return config
  },

I’m also running into this issue, having tried the solution here https://github.com/storybookjs/storybook/issues/11989#issuecomment-674833064.

@ndelangen Check out this repro repository – https://github.com/mattrothenberg/sb6-resolve-alias-error

You should be able to clone, run yarn && yarn storybook and see that the tilde (“~”) alias doesn’t resolve for the Button component.

For me, using NextJs, this is solved the problem:

/.storybook/main.js

const path = require('path')
module.exports = {
   // ...others configs
   
   
    webpackFinal: async (config) => {
      config.resolve.modules = [
        ...(config.resolve.modules || []),
        path.resolve(__dirname, "../"),
      ];

      config.resolve.alias = {
        ...config.resolve.alias,
        '@components': path.resolve(__dirname, '../components'),
        '@public': path.resolve(__dirname, '../public'),
        '@styles': path.resolve(__dirname, '../styles')
      }
  
      return config;
    },
  }

I just came across this after having some issues having upgraded storybook to 6.

Turned out my problem was an incorrect resolve function for whatever reason.

My main.js is in .storybook and I am using this function:

function resolve(dir) {
  return path.join(__dirname, dir)
}

Example:

alias: {
  '@': resolve('../src'),
},

Otherwise the same setup described by @ndelangen above and it is working.

Without thinking too far, I think updating config object might not work as expected. A simple workaround for you @toastyboost

webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve?.alias,
          ...aliases,
        },
      },
    };
  },

In addition with 0 config typescript, you no longer need config.resolve.extensions.push(".ts", ".tsx");

Do we have any update for this issue? I’m still facing this issue with latest Storybook version. I believe this issue happens to multiple layer folders structure as @jkincheloe33 mentioned above.

Above solution works for me except when I add an additional folder layer. @images fails for me

webpackFinal: async config => {
   config.resolve.alias['@components'] = path.resolve(__dirname, '../components')
   config.resolve.alias['@images'] = path.resolve(__dirname, '../assets/images')
   return config
}

Storybook version 6.1 I also faced with alias problems, but fixed that using approach below.

TypeScript Storybook use different paths to tsconfig, for TsconfigPathsPlugin he uses tsconfig.app.json For redefine config, just add to main.js next code

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
.....
webpackFinal: async (config, { configType }) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({
      configFile: './.storybook/tsconfig.json',
    }));

    return config;
  }

SCSS

webpackFinal: async (config) => {
    config.resolve.alias['@someAlias'] = path.resolve(__dirname, '../path')
    return config;
  }

Also, there are two configs of webpack: managerWebpack and webpackFinal

This works properly for me on the latest version:

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

I was struggling to find the solution and then i found yours solution. By the way i was missing a double quotes on webpackFinal. That’s all. Thanks

I’m running into this as well and I assume this will break a lot of Storybook devs experience.

    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve('../')
    ]

This is what I had before that allowed to resolve to my root path properly, but for whatever reason this doesn’t help in my upgrade.

Here’s how I was able to resolve tsconfig path aliases in a React + TypeScript + Vite Storybook project, in case any other lost souls end up here: How to resolve aliases in Storybook? – Stackoverflow. The thread also details equivalent solutions for Webpack.

It works without slashes:

const path = require("path");

module.exports = {
	addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
	webpackFinal: (config) => {
		config.resolve.alias = {
			...config.resolve.alias,
			"~": path.resolve(__dirname, "../src"),
		};
		return config;
	},
};

When I encountered this issue, I was expecting the aliases to resolve correctly for files in the .storybook/ directory. What I found was that it seems the aliases are not for resolving in the .storybook/ directory (.storybook “config” files?), but instead for resolving when running the Storybook webpack build (npm run storybook).

One thing we noted was that our custom React “add on” component, being registered in.storybook/register.js, was being resolved like the other files in the .storybook/ directory.

We resolved our issue by using relative paths for .storybook/ files and addons, and are leveraging aliases, as described in this issue, for our actual Storybook story files.

For our working Storybook webpack server aliases, we configured .storybook/main.js like:

// .storybook/main.js

const webpackConfig = require('../webpack.config')

module.exports = {
  webpackFinal: (config) => {
    config.resolve.alias = {
      ...webpackConfig.resolve.alias,
      ...config.resolve.alias,
    }
    return config;
  },
};

Thanks All!

trailing slash in alias key was the problem for me:

before	after
config.resolve.alias[“@commons/”] = path.resolve(__dirname, ‘…/commons/src/’);	config.resolve.alias[“@commons”] = path.resolve(__dirname, ‘…/commons/src/’);

Late to the party, but I had to change my choice of character. I changed $ to @ and it now works fine

-   config.resolve.alias['$'] = path.resolve(__dirname, '../src/components/')
-   config.resolve.alias['$utils'] = path.resolve(__dirname, '../src/utils/')
+   config.resolve.alias['@'] = path.resolve(__dirname, '../src/components/')
+   config.resolve.alias['@utils'] = path.resolve(__dirname, '../src/utils/')

I’ve been doing some testing with this and there seems to be somewhat of an issue. I’ve setup a repo here to triage this. So far from my testing i saw a couple of things:

• What was introduced in this comment works well in development mode (running yarn storybook). But as soon as i issue a production build with yarn build-storybook i’m faced with the following error:

$ build-storybook -s public --no-dll
info @storybook/react v6.0.28
info 
info clean outputDir..
info => Copying static files from: public
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => manager built (8.32 s)
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
info => Compiling preview..
ERR! => Failed to build the preview
ERR! /Users/myFolder/example/src/pages/MyPage.stories.tsx
ERR! TypeScript error in /Users/myFolder/example/src/pages/MyPage.stories.tsx(6,54):
ERR! Cannot find module '@components/MyOtherComponent' or its corresponding type declarations.  TS2307
ERR! 
ERR!     4 | import {MyPage,MyPageProps} from "./MyPage";
ERR!     5 | 
ERR!   > 6 | import {MyOtherComponent,MyOtherComponentProps} from '@components/MyOtherComponent'
ERR!       |                                                      ^
ERR!     7 | 
ERR!     8 | import Image2 from '@images/image_2.jpg'
ERR!     9 | import Image3 from '@images/image_3.jpg'
ERR! /Users/myFolder/example/src/pages/MyPage.tsx
ERR! TypeScript error in /Users/myFolder/example/src/pages/MyPage.tsx(3,32):
ERR! Cannot find module '@components/MyOtherComponent' or its corresponding type declarations.  TS2307
ERR! 
ERR!     1 | import React from "react";
ERR!     2 | 
ERR!   > 3 | import {MyOtherComponent} from "@components/MyOtherComponent";
ERR!       |                                ^
ERR!     4 | 
ERR!     5 | export interface MyPageProps {
ERR!     6 |   /**
ERR! asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
ERR! This can impact web performance.
ERR! Assets: 
ERR!   static/media/image_3.003791f5.jpg (275 KiB)
ERR!   vendors~main.1a5d3ddbfe354d6a78b4.bundle.js (3.54 MiB)
ERR! entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
ERR! Entrypoints:
ERR!   main (3.58 MiB)
ERR!       runtime~main.1a5d3ddbfe354d6a78b4.bundle.js
ERR!       vendors~main.1a5d3ddbfe354d6a78b4.bundle.js
ERR!       static/css/main.0b660ce0.chunk.css
ERR!       main.1a5d3ddbfe354d6a78b4.bundle.js
ERR! 
ERR! webpack performance recommendations: 
ERR! You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
ERR! For more info visit https://webpack.js.org/guides/code-splitting/
node:internal/process/promises:218
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Object]".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

• I factored in the comments above with the tsconfig-paths-webpack-plugin usage and included a branch in the repo to do additional testing. Based on the configuration provided i’m faced with the following issue once i run yarn storybook:

info @storybook/react v6.0.28
info 
info => Loading static files from: /Users/myUser/myFolder/example/public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
webpack built d661ea12d96509bc01c5 in 17766ms
✖ ｢wdm｣: Hash: d661ea12d96509bc01c5
Version: webpack 4.44.2
Time: 17766ms
Built at: 18/11/2020 17:38:57
                                          Asset      Size        Chunks                                Chunk Names
                            asset-manifest.json  1.18 KiB                [emitted]                     
                                    iframe.html  2.92 KiB                [emitted]                     
            main.d661ea12d96509bc01c5.bundle.js   133 KiB          main  [emitted] [immutable]         main
        main.d661ea12d96509bc01c5.bundle.js.map  52.9 KiB          main  [emitted] [dev]               main
    runtime~main.d661ea12d96509bc01c5.bundle.js  35.1 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.d661ea12d96509bc01c5.bundle.js.map  36.3 KiB  runtime~main  [emitted] [dev]               runtime~main
        static/media/code-brackets.2e1112d7.svg  1.42 KiB                [emitted] [immutable]         
               static/media/colors.a4bd0486.svg  8.31 KiB                [emitted] [immutable]         
             static/media/comments.a3859089.svg  1.49 KiB                [emitted] [immutable]         
            static/media/direction.b770f9af.svg  1.25 KiB                [emitted] [immutable]         
                 static/media/flow.edad2ac1.svg  1.36 KiB                [emitted] [immutable]         
               static/media/plugin.d494b228.svg  2.12 KiB                [emitted] [immutable]         
                 static/media/repo.6d496322.svg   1.6 KiB                [emitted] [immutable]         
             static/media/stackalt.dba9fbb3.svg  2.49 KiB                [emitted] [immutable]         
    vendors~main.d661ea12d96509bc01c5.bundle.js  7.98 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.d661ea12d96509bc01c5.bundle.js.map  8.03 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.d661ea12d96509bc01c5.bundle.js runtime~main.d661ea12d96509bc01c5.bundle.js.map vendors~main.d661ea12d96509bc01c5.bundle.js vendors~main.d661ea12d96509bc01c5.bundle.js.map main.d661ea12d96509bc01c5.bundle.js main.d661ea12d96509bc01c5.bundle.js.map
[0] multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js 184 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 2.88 KiB {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 5.04 KiB {main} [built]
[./.storybook/storybook-init-framework-entry.js] 2.51 KiB {main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js] 500 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js] 2.44 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js] 2.45 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js] 2.45 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js] 2.45 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js] 2.45 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js] 2.44 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js] 8.01 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.68 KiB {vendors~main} [built]
    + 1773 hidden modules

ERROR in ./src/components/ComponentAlias.stories.mdx
Module not found: Error: Can't resolve '@components/MyOtherComponent' in '/Users/myUser/myFolder/example/src/components'
 @ ./src/components/ComponentAlias.stories.mdx 11:0-64 12:52-68 29:15-31 56:13-29
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

ERROR in ./src/pages/MyPage.stories.tsx
Module not found: Error: Can't resolve '@components/MyOtherComponent' in '/Users/myUser/myFolder/example/src/pages'
 @ ./src/pages/MyPage.stories.tsx 52:0-64 77:62-78
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

ERROR in ./src/pages/MyPage.tsx
Module not found: Error: Can't resolve '@components/MyOtherComponent' in '/Users/myUser/myFolder/example/src/pages'
 @ ./src/pages/MyPage.tsx 7:0-64 49:37-53
 @ ./src/pages/MyPage.stories.tsx
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

ERROR in ./src/pages/MyPage.stories.tsx
Module not found: Error: Can't resolve '@images/image_2.jpg' in '/Users/myUser/myFolder/example/src/pages'
 @ ./src/pages/MyPage.stories.tsx 53:0-41 73:10-16
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

ERROR in ./src/pages/MyPage.stories.tsx
Module not found: Error: Can't resolve '@images/image_3.jpg' in '/Users/myUser/myFolder/example/src/pages'
 @ ./src/pages/MyPage.stories.tsx 54:0-41 74:10-16
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.4 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.19 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

If anyone could share the repo, or take a look at the one i’ve mentioned we would have a better understanding of what’s going on and i could document this accurately.

Stay safe

hmmm, I can’t get why alias @ works but ~ is not… Spend pretty good amount of time trying to setup with ~, thinking that something wrong with config itself… 🤯

works fine:

    config.resolve.alias['@'] = path.resolve(__dirname, '../src')

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader', 
        'css-loader',
        {
          loader: "sass-loader",
          options: {
            additionalData: '@import "@/assets/scss/utils";',
          },
        }, 
      ],
    });

SassError: SassError: Can’t find stylesheet to import: @import “~/assets/scss/utils”;

    config.resolve.alias['~'] = path.resolve(__dirname, '../src')

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader', 
        'css-loader',
        {
          loader: "sass-loader",
          options: {
            additionalData: '@import "~/assets/scss/utils";',
          },
        }, 
      ],
    });

As per @TheDutchCoder , this works for me using Storyboard v6.2.9 and Vue 2. It configures an alias from @ to ../src and allows you to write relative imports from any folder, eg:

import Button from '@/components/atoms/Button.vue';
import MyMixin from '@/mixins/my-mixin.js';

Add a webpackFinal key to ./.storybook/main.js:

const path = require("path")

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

that’s what i thought. But in this case as we’re dealing with versioned documentation and what works for one, might not work for others. But this is a good start angular is covered. All that is missing is a way to handle the other frameworks.