Storybook not resolving Nextjs alias path

[Fernando-FloresP]

Versions: Nextjs v9.5.3 and Storybook v6.0.21

Describe the bug
While using a relative path with storybook it is not able to resolve the path.

To Reproduce
Steps to reproduce the behavior:

1. Clone my example repo https://github.com/Fernando-FloresP/sb-test
2. Install dependencies with the command: npm install (or if you are using yarn use it instead)
3. Run the Storybook script: npm run storybook
4. There you can see the error

Expected behavior
It should be able to resolve the path right away

Screenshots

ERROR in ./stories/Button.stories.js
Module not found: Error: Can't resolve '@/Components/button/Button' in '/mnt/c/Users/reape/sb-test/stories'
@ ./stories/Button.stories.js 85:0-61 88:13-28 97:42-57
@ ./stories sync ^.(?:(?:^|/|(?:(?:(?!(?:^|/).).)?)/)(?!.)(?=.)[^/]?.stories.(js|jsx|ts|tsx))$
@ ./.storybook/generated-stories-entry.js
@ multi ./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

Code snippets

//import { ButtonComponent } from "../src/components/button/Button";
import { ButtonComponent } from "@/Components/button/Button";

System:

Environment Info:
System:
OS: Linux 4.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 12.18.3 - /usr/bin/node
npm: 6.14.6 - /usr/bin/npm
npmPackages:
@storybook/addon-actions: ^6.0.21 => 6.0.21
@storybook/addon-essentials: ^6.0.21 => 6.0.21
@storybook/addon-links: ^6.0.21 => 6.0.21
@storybook/react: ^6.0.21 => 6.0.21

[Fernando-FloresP]

The problem was solved in the issue: #11639

[gpessa]

Not really, the issue is still there

[abhimishra01]

Not really, the issue is still there

I was facing the same issue, adding the following helped me resolve it :-

import path from "path";
import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
   .....<config>>>,
  webpackFinal: async (config: any) => {
    // Add path aliases
    config.resolve.alias["@"] = path.resolve(__dirname, "../src");
    config.resolve.alias["@/pages"] = path.resolve(__dirname, "../src/pages");
    config.resolve.alias["@/components"] = path.resolve(
      __dirname,
      "../src/components"
    );

    return config;
  },
};


export default config;

storybook webpack reference