I can not import with absolute path in Storybook

Version

@storybook/addon-actions: 3.4.8
@storybook/addon-links: 3.4.8
@storybook/addon-storyshots: 3.4.8
@storybook/addons: 3.4.8
@storybook/react: 3.4.8
React: 16.4.2
TypeScript: 2.9.2

Behavior

An error will be displayed in storybook when creating the following components.

# src/components/organisms/ParentComponent/index.tsx
import * as React from 'react';
import ChildrenComponent from 'src/components/molecules/ChildrenComponent/index';

const ParentComponent: React.SFC<{}> = ({ ...props }) => (
  <ChildrenComponent />
);

Error Module not found: Error: Can't resolve 'src/components/molecules/ChildrenComponent/index' in '/AppRoot/src/components/organisms/ParentComponent'

This seems to be caused by loading with an absolute path, so if you do the following it works fine. import ChildrenComponent from '../../molecules/ChildrenComponent/index';

However, I would like to avoid this method as much as possible. Is there no way to start storybook without errors other than specifying by relative path?

The application of the absolute path is based on the following description of tsconfig.json.

"compilerOptions": {
  "outDir": "build/dist",
  "rootDir": "src",
  "baseUrl": "."
}

Also, this time we are importing a stories file written in tsx extension in compiled src directory rather than compiled build/dist directory on storybook this time.

This is set in ./storybook/config, but setting it tobuild/dist will produce similar results.

Since this project uses atomic design, it has roughly the following directory structure.

src
├── components
│    ├── molecules
│    │   ├── ChildrenComponent
│    │   │   ├── index.tsx
│    │   │   └── index.stories.tsx
│    ├── organisms
│    │   ├── ParentComponent
│    │   │   ├── index.tsx
│    │   │   └── index.stories.tsx

Related issues

There seemed to be something like the relevant issue. However, it did not reach a solution. #333 , #3438

Digression

As an aside, I believe there are two ways to solve this problem.

The first thing I would like to ask here is to “Import absolute path component with storybook”, the The second is to compile to a js file which imports the imported tsx file with an absolute path as a relative path. After that, apply the imported js file with the relative path to storybook.

Regarding the latter, I think it is not appropriate to listen to this problem here, but if you know it, I would like to ask about that method as well.

Thanks for your time.

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:31 (9 by maintainers)

Top GitHub Comments

128reactions

kexinlu1121commented, May 7, 2019

In case anyone is looking at this for storybook 5,

const path = require('path');

module.exports = ({ config }) => {
  config.resolve.modules.push(path.resolve(__dirname, "../src"));
  return config;
};

83reactions

igor-dvcommented, Jul 25, 2018

Try adding something like this:

const path = require('path');

// blah blah code

module.exports = (baseConfig, env) => {

  // blah blah code

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

Top Results From Across the Web

Storybook with absolute paths - Stack Overflow

I got this issue after using CLI and I was able to resolve it by modifying my .storybook/main.js to: const path = require('path'); ......

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

Describe the bug Storybook is not able to resolve path with Next js absolute import To Reproduce Steps to reproduce the behavior: yarn...

How to resolve a path alias in Storybook - +return

Today, we will talk about how to configure storybook to resolve our path alias. Prerequisites. If you haven't configured an alias in your...

[Solved]-Storybook with absolute paths-Reactjs

Storybook with absolute paths · Jest gives `Cannot find module` when importing components with absolute paths · Resolve Absolute / Alias Imports in...

How to Create a Path Alias in Webpack - Bitovi

Path aliases are a way to change the starting location of an import from your file to a custom-named, predetermined destination. While not...