Storybook is not able to resolve path with Next js absolute import #11639

rahul3103 · 2020-07-22T07:18:21Z

Describe the bug
Storybook is not able to resolve path with Next js absolute import

To Reproduce
Steps to reproduce the behavior:
yarn add storybook
Added .storybook folder
Add jsconfig for absolute import

Expected behavior
It should build correctly.

const path = require('path');
const resolve = (dir) => path.resolve(__dirname, dir);

module.exports = ({ config }) => {
  config.resolve.alias = {
    '@utils/*': resolve('../src/utils/*'),
   ....
  };

  return config;
};

Error


ERROR in ./src/components/Base/Button/Button.jsx
Module not found: Error: Can't resolve '@utils/boxShadowGenerator' in '/Users/rahulshrivastava/projects/unacademy-web-learning/src/components/Base/Button'
 @ ./src/components/Base/Button/Button.jsx 9:0-59 107:35-53 122:9-27
 @ ./src/stories/button.stories.js
 @ ./src/stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Code snippets
I am using jsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
    "jsx": "react",
    "baseUrl": "./src/",
    "paths": {
      "@utils/*": ["utils/*"],
    ....
    }
  },
  "exclude": ["node_modules", "dist"]
}

System:

 npx -p @storybook/cli@next sb info

Environment Info:
(node:1828) UnhandledPromiseRejectionWarning: TypeError: e.filter is not a function
    at /Users/rahulshrivastava/.npm/_npx/1031/lib/node_modules/@storybook/cli/node_modules/envinfo/dist/envinfo.js:1:73205
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 6)
(node:1828) UnhandledPromiseRejectionWarning: Unhandled promise rejection. 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(). (rejection id: 1)
(node:1828) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The text was updated successfully, but these errors were encountered:

stale · 2020-08-24T05:40:48Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

EduardoHidalgo · 2020-08-25T02:27:31Z

I have exactly the same problem! I tried adding a tsconfig.json and with a custom webpack but didn't work.

oalexdoda · 2020-08-28T08:56:16Z

+1 - Same issue here. Any idea on how to process Next.js paths in jsconfig.json? I found this on TypeScript (haven't tested it) but need one on Javascript instead: #9610

kalanda · 2020-09-09T14:46:19Z

+1 Same problem here. NextJS resolves but SB don't.

jsconfig.json

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

EduardoHidalgo · 2020-09-09T14:53:52Z

@kalanda That's correct, Next.js resolve but SB don't. I tried a lot of webpack solutions and multiple tsconfig.json options but anyone was successful. I decided to remove SB for my project for now. Sad.

GxDesign · 2020-09-09T21:38:08Z

I havent gotten everything working with Next yet but this resolved the absolute import issues (in .storybook/webpack.config.js):

const path = require('path');

module.exports = ({config}) => {
  config.resolve.modules = [
    path.resolve(__dirname, ".."),
    "node_modules",
  ]

  return config
}

For using ./src, you can use path.resolve(__dirname, "..", "src"),

EduardoHidalgo · 2020-09-09T22:07:24Z

With SB 6.x you don't have a webpack configuration, instead you use a main.js file with specific import structure (see Storybook React Configure Preview). Please, could you provide the same code in this format?

I havent gotten everything working with Next yet but this resolved the absolute import issues (in .storybook/webpack.config.js):
const path = require('path');

module.exports = ({config}) => {
  config.resolve.modules = [
    path.resolve(__dirname, ".."),
    "node_modules",
  ]

  return config
}
For using ./src, you can use path.resolve(__dirname, "..", "src"),

GxDesign · 2020-09-10T15:31:54Z

You can still add a webpack.config.js to your .storybook directory. But with main.js, you define it as webpackFinal:

const path = require('path');

module.exports = {
  stories: ["../stories/*.stories.@(js|jsx)"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-knobs",
    "@storybook/addon-links",
  ],
  presets: ["@storybook/preset-scss"],
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [
      path.resolve(__dirname, ".."),
      "node_modules",
    ]

    return config;
  }
};

Fernando-FloresP · 2020-09-10T19:50:40Z

Hello! I've just tried this fix in a project with Nextjs v9.5.3 and Storybook v6.0.21 but its not working.

On the path /sb-test/stories/Button.stories.js on the the 2nd and 3rd lines you can switch between absolute and relative paths.
The absolute path works but if i use the relative path it doesn't work.

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

This is the error:

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

GxDesign · 2020-09-10T23:57:21Z

Its because thats not an absolute import from root, your path is using an alias. The following code allows you to import from src using "src/components/button/Button":

config.resolve.modules = [
      path.resolve(__dirname, ".."),
      "node_modules",
    ]

But it does not tell webpack anything about the "@/Components" syntax. You would need to pass an alias configuration like this:

config.resolve.alias = {
      ...config.resolve.alias,
      "@/Components": path.resolve(__dirname, "../src/components")
    };

Fernando-FloresP · 2020-09-11T02:25:37Z

Great! It worked perfectly, thanks a lot man. I wrote a commit implementing your fix: Absolute path with Storybook problem solved

EduardoHidalgo · 2020-09-11T02:41:31Z

I love you man, I spent like about 40 hours trying to solve but I never could. Thanks <3

Its because thats not an absolute import from root, your path is using an alias. The following code allows you to import from src using "src/components/button/Button":
config.resolve.modules = [
      path.resolve(__dirname, ".."),
      "node_modules",
    ]
But it does not tell webpack anything about the "@/Components" syntax. You would need to pass an alias configuration like this:
config.resolve.alias = {
      ...config.resolve.alias,
      "@/Components": path.resolve(__dirname, "../src/components")
    };

GxDesign · 2020-09-11T09:45:38Z

haha no problem, glad I could help 🍻

stale · 2020-10-04T03:04:52Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Ahmed-osama · 2021-03-18T08:17:30Z

Its because thats not an absolute import from root, your path is using an alias. The following code allows you to import from src using "src/components/button/Button":
config.resolve.modules = [
      path.resolve(__dirname, ".."),
      "node_modules",
    ]
But it does not tell webpack anything about the "@/Components" syntax. You would need to pass an alias configuration like this:
config.resolve.alias = {
      ...config.resolve.alias,
      "@/Components": path.resolve(__dirname, "../src/components")
    };

thank you man you saved my day

that's how it worked for next.js

const path = require('path');
module.exports = {
  stories: [
    '../desktop/**/*.stories.@(ts|tsx)',
    '../mobile/**/*.stories.@(ts|tsx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../'),
    };
    return config;
  },
};

eric-burel · 2021-05-05T16:30:56Z

Hi, I am going to close this for now, as there are 2 main alternatives:

just set Storybook up to reproduce Next.js magic, there are multiple comments demoing how to do so. This is of course not very satisfactory, but it works for the moment.
in the meantime we will keep working on @next/plugin-storybook to make this a one-liner, but this takes time as it is not so easy to export Next.js buildtime magic to 3rd parties at the moment. It technically works, but it's not very stable. I'll demo this package usage here: https://github.com/lbke/next-plugin-storybook-demo. It may be included in Next.js as an official example but only when @next/plugin-storybook reach stability. Anyway, this question is on Next.js side at the moment more than SB.

Matheus8174 · 2022-10-18T02:06:33Z

now just install the next addon in your project.

https://storybook.js.org/addons/storybook-addon-next

nabu1615 · 2023-01-11T13:33:49Z

After some errors and look a way to work with NEXT components, this config works. ./storybooks/main.js

  const path = require('path');
  
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [
        path.resolve(__dirname, '..'),
        'node_modules',
    ];

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

    return config;
 }

sendy34 · 2023-03-20T07:27:55Z

Anyone still having issues, I had two typescript configurations.
One was on global ts-config but there was another configuration on main.ts for Storybook.
If you have a custom configuration on main.ts, then alias also needs to be defined on that configuration under paths.

Once you define the alias, and resolve the alias using webpackFinal, it should start working fine!

Sutil · 2024-01-10T13:57:45Z

Here is how I solved.

I got the problem because I installed storybook in a Nextjs project that was using Shad cn ui.

On the component.json I replaced the @/ with src/

"aliases": {
-   "components": "@/components",
-   "utils": "@/lib/utils"
+   "components": "src/components",
+   "utils": "src/lib/utils"
  }

On the tsconfig.json I removed the paths and added baseUrl.

-"paths": {
-    "@/*": ["./src/*"]
-  }
+ "baseUrl": "."

After that, I went to the vscode search and replace tool (Ctrl + Shift + F);

And I replaced all @/components with src/components and all @/lib with src/lib.

shilman · 2024-03-15T17:04:07Z

@valentinpalkovic @vanessayuenn This was raised on Twitter I've reproduced by editing the Storybook CLI template files:

// stories/Header.tsx
import React from 'react';
import { Button } from '@/stories/Button';

@/* is installed in the Next.js boilerplate by default, so I think we should prioritize fixing this in @storybook/nextjs. WDYT?

valentinpalkovic · 2024-03-15T19:12:40Z

I would love to work on it!

gabitoesmiapodo · 2024-03-15T21:44:52Z

@shilman @valentinpalkovic I don't know if it helps you or not, but I got it working by doing this: https://stackoverflow.com/a/68288720/7949258

In any case it might help someone having this problem (like me!) until you can fix it.

weyert · 2024-03-16T12:00:10Z

I thought Storybook already used tsconfig-paths-webpack-plugin?

valentinpalkovic · 2024-03-26T14:12:14Z

Actually, tsconfig-paths-webpack-plugin is configured for Next.js. However, to activate the plugin, you have to define the baseUrl in your tsconfig.json. If baseUrl isn't defined, the plugin doesn't get initialized.

thewanionly · 2024-04-01T19:33:32Z

For my case, adding "baseUrl": "." in my tsconfig.json fixes the issue:

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

valentinpalkovic · 2024-04-01T19:42:08Z

This was fixed by #26651. The fix will be part of the 8.0.6 release!

shilman added configuration babel / webpack compatibility with other tools question / support labels Aug 3, 2020

This was referenced Aug 14, 2020

sb migrate doesn't work #12020

Closed

Cannot run sb info #12025

Closed

stale bot added the inactive label Aug 24, 2020

stale bot removed the inactive label Aug 25, 2020

Fernando-FloresP mentioned this issue Sep 11, 2020

Storybook not resolving Nextjs alias path #12449

Closed

shilman added the has workaround label Sep 11, 2020

stale bot added the inactive label Oct 4, 2020

shilman added the PN label Oct 5, 2020

stale bot removed the inactive label Oct 5, 2020

shilman added nextjs P1 and removed PN labels Oct 7, 2020

shilman self-assigned this Oct 8, 2020

eric-burel mentioned this issue Mar 12, 2021

Add an example using @next/plugin-storybook + fix webpack rules vercel/next.js#23020

Closed

shilman removed this from the 6.2 core milestone Apr 1, 2021

eric-burel closed this as completed May 5, 2021

whyDontI mentioned this issue May 12, 2021

Integrate Storybook Real-Dev-Squad/website-status#42

Closed

xodms0309 mentioned this issue Jun 10, 2022

#22 feat: Badge 디자인 수정 및 스토리북 적용 YAPP-Github/knowlly-web#23

Merged

hwangyena mentioned this issue Nov 21, 2022

✨ checkbox component depromeet/pingpong-client#49

Merged

inkyu0103 mentioned this issue Jan 21, 2023

feat: add formatter inkyu0103/badminton-app#5

Merged

4 tasks

umairraza96 mentioned this issue Jul 11, 2023

feat: replace relative import closes #5484 nodejs/nodejs.org#5487

Closed

5 tasks

shilman reopened this Mar 15, 2024

shilman unassigned shilman and eric-burel Mar 15, 2024

shilman added bug and removed question / support labels Mar 15, 2024

github-project-automation bot added this to Learning Team Mar 15, 2024

valentinpalkovic mentioned this issue Apr 1, 2024

Next.js: Support path aliases when no base url is set #26651

Merged

8 tasks

valentinpalkovic closed this as completed Apr 1, 2024

github-project-automation bot moved this to Done in Learning Team Apr 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook is not able to resolve path with Next js absolute import #11639

Storybook is not able to resolve path with Next js absolute import #11639

rahul3103 commented Jul 22, 2020 •

edited

Loading

stale bot commented Aug 24, 2020

EduardoHidalgo commented Aug 25, 2020

oalexdoda commented Aug 28, 2020

kalanda commented Sep 9, 2020

EduardoHidalgo commented Sep 9, 2020

GxDesign commented Sep 9, 2020 •

edited

Loading

EduardoHidalgo commented Sep 9, 2020

GxDesign commented Sep 10, 2020 •

edited

Loading

Fernando-FloresP commented Sep 10, 2020

GxDesign commented Sep 10, 2020

Fernando-FloresP commented Sep 11, 2020

EduardoHidalgo commented Sep 11, 2020

GxDesign commented Sep 11, 2020 •

edited

Loading

stale bot commented Oct 4, 2020

Ahmed-osama commented Mar 18, 2021

eric-burel commented May 5, 2021

Matheus8174 commented Oct 18, 2022

nabu1615 commented Jan 11, 2023 •

edited

Loading

sendy34 commented Mar 20, 2023

Sutil commented Jan 10, 2024 •

edited

Loading

shilman commented Mar 15, 2024

valentinpalkovic commented Mar 15, 2024

gabitoesmiapodo commented Mar 15, 2024 •

edited

Loading

weyert commented Mar 16, 2024

valentinpalkovic commented Mar 26, 2024 •

edited

Loading

thewanionly commented Apr 1, 2024

valentinpalkovic commented Apr 1, 2024

Storybook is not able to resolve path with Next js absolute import #11639

Storybook is not able to resolve path with Next js absolute import #11639

Comments

rahul3103 commented Jul 22, 2020 • edited Loading

stale bot commented Aug 24, 2020

EduardoHidalgo commented Aug 25, 2020

oalexdoda commented Aug 28, 2020

kalanda commented Sep 9, 2020

EduardoHidalgo commented Sep 9, 2020

GxDesign commented Sep 9, 2020 • edited Loading

EduardoHidalgo commented Sep 9, 2020

GxDesign commented Sep 10, 2020 • edited Loading

Fernando-FloresP commented Sep 10, 2020

GxDesign commented Sep 10, 2020

Fernando-FloresP commented Sep 11, 2020

EduardoHidalgo commented Sep 11, 2020

GxDesign commented Sep 11, 2020 • edited Loading

stale bot commented Oct 4, 2020

Ahmed-osama commented Mar 18, 2021

eric-burel commented May 5, 2021

Matheus8174 commented Oct 18, 2022

nabu1615 commented Jan 11, 2023 • edited Loading

sendy34 commented Mar 20, 2023

Sutil commented Jan 10, 2024 • edited Loading

shilman commented Mar 15, 2024

valentinpalkovic commented Mar 15, 2024

gabitoesmiapodo commented Mar 15, 2024 • edited Loading

weyert commented Mar 16, 2024

valentinpalkovic commented Mar 26, 2024 • edited Loading

thewanionly commented Apr 1, 2024

valentinpalkovic commented Apr 1, 2024

rahul3103 commented Jul 22, 2020 •

edited

Loading

GxDesign commented Sep 9, 2020 •

edited

Loading

GxDesign commented Sep 10, 2020 •

edited

Loading

GxDesign commented Sep 11, 2020 •

edited

Loading

nabu1615 commented Jan 11, 2023 •

edited

Loading

Sutil commented Jan 10, 2024 •

edited

Loading

gabitoesmiapodo commented Mar 15, 2024 •

edited

Loading

valentinpalkovic commented Mar 26, 2024 •

edited

Loading