Storybook Can't Find Components in React, Next.JS, Typescript Project

Question

I have storybook setup with my next.js, typescript and react project. The project renders fine but storybook breaks and give me the me error: "Module not found: Error: Can't resolve 'components/atoms' in...." It seems like the path to components is causing it to break:

import { Element } from 'components/atoms';

but the following works:

import { Element } from '../../atoms

I have a tsconfig.json file with the following:

  "compilerOptions": {
    "baseUrl": "src",
    },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
...

I tried some of the suggestions online but none seems to resolve the path issue. I created a webpack.config.js in my .storybook folder with the following, but still get errors.

module.exports = {
 ...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};

I would like to not use the ../../ when calling files and just be able to use the ./components structure.

You seemingly have to add .storybook/main.js to configure you webpack by adding an alias to your ./src/components — tmhao2005
– tmhao2005, Commented Sep 17, 2020 at 15:24
I have a .storybook/main.js file it has configs for stories and addons. I would add an alias here to my `./src/components' to this file? Would I still need the webpack.config.js in this case? — p_waves
– p_waves, Commented Sep 17, 2020 at 15:48
Here is the way you add your alias to storybook.js.org/docs/react/configure/…. You don’t need your webpack.config.js — tmhao2005
– tmhao2005, Commented Sep 17, 2020 at 15:52

Anton Pegov · Accepted Answer · 2021-01-18 10:28:52Z

17

Spent some time fighting with Storybook )

Here is my .storybook/main.js version, that finally worked:

const path = require("path");

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules.push(path.resolve(__dirname, '../src'));

    return config;
  },

  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

answered Jan 18, 2021 at 10:28

Anton Pegov

1,4742 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gokul.M · Accepted Answer · 2022-01-11 10:45:03Z

3

For someone who is still looking for a solution, try adding the below inside your webpackFinal before returning config. It is because storybook isn't configured to access files using absolute paths.

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

answered Jan 11, 2022 at 10:45

Gokul.M

371 silver badge8 bronze badges

Comments

Matt Strain · Accepted Answer · 2023-09-13 14:31:03Z

1

None of the answers above worked for my NPM workspace project.

What was causing the issue for me was vscode started using imports from src like this:

import { MyComponent } from "src/components/Mycomponent";

but what I found works with storybook is relative imports like this

import { MyComponent } from "../components/Mycomponent";

You can make vscode use relative imports by default by setting the below (see this answer)

"typescript.preferences.importModuleSpecifier": "relative"

answered Sep 13, 2023 at 14:31

Matt Strain

811 silver badge2 bronze badges

Comments

Kurtis · Accepted Answer · 2023-10-09 10:19:19Z

1

If you have setup Storybook with Typescript (I'm also using NextJs but I think that's irrelevant here), the webpack alias change didnt work for me.

I had this error for anything insight my components directry. eg @/components/IconType

I was missing this from the tsconfig.json, which makes sense that Storybook didn't understand the base directory for where to look:

"baseUrl": ".",

Hope that helps others

answered Oct 9, 2023 at 10:19

Kurtis

1,2923 gold badges13 silver badges20 bronze badges

Comments

arodjabel · Accepted Answer · 2022-09-21 14:42:15Z

0

I was having an issue resolving aliases

Error: Can't resolve '@foo/bar'

In root > .storybook/main.js I added the property config.resolve.alias

const path = require('path');

module.exports = {
  stories: ['../libs/feature/src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/react',
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@foo/bar': path.resolve(__dirname, '../libs/bar/src/'),
    };

    return config;
  },
};

answered Sep 21, 2022 at 14:42

arodjabel

4375 silver badges15 bronze badges

Comments

Miguel Ángel Torres · Accepted Answer · 2020-09-17 19:32:32Z

-1

I think what you need is path aliases. If you're working on a typescript project, you can declare aliases that map to a certain absolute path in your application using tsconfig.json paths compiler option:

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

Official link => typescriptlang.org
Here you have a good explanation about this typescript feature. Path aliases with TypeScript in Node.js

Be aware that is not always that easy because in production your build toolchain will have to translate them to the correct paths as tsc doesn’t do it. Fortunately nexjts has added this feature recently => https://nextjs.org/docs/advanced-features/module-path-aliases

edited Sep 17, 2020 at 19:32

answered Sep 17, 2020 at 18:36

Miguel Ángel Torres

3451 gold badge4 silver badges8 bronze badges

Comments

gagarwa · Accepted Answer · 2024-06-12 21:39:02Z

I faced a different situation, but similar error after initial installation. Noting here for others using SWC (I am personally using SWC exclusively, and storybook's default webpack configuration):

Error Message:

ERROR in ./src/stories/Header.stories.ts 2:0-37
Module not found: Error: Can't resolve './Header.js' in ...\src\stories'

Solution: Simply configure swc in .storybook/main.[ts|js], as it appears there is no default configuration (console.log returns {}).

import type { Options } from '@swc/core';
// Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: {
    name: '@storybook/your-framework',
    options: {},
  },
  swc: (config: Options, options): Options => {
    return {
      ...config,
      // Apply your custom SWC configuration
    };
  },
};

export default config;

See Storybook SWC Configuration for more information

Collectives™ on Stack Overflow

Storybook Can't Find Components in React, Next.JS, Typescript Project

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related