Storybook: 我无法使用Storybook中的绝对路径导入

创建于 2018-07-24 · 25评论 · 资料来源: storybookjs/storybook

版

@ storybook / addon-actions：3.4.8
@ storybook / addon-links：3.4.8
@ storybook / addon-storyshots：3.4.8
@故事书/插件：3.4.8
@故事书/反应：3.4.8
反应：16.4.2
打字稿：2.9.2

行为

创建以下组件时，故事书中将显示错误。

# 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 />
);

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

这似乎是由加载绝对路径引起的，因此，如果执行以下操作，它将可以正常工作。
import ChildrenComponent from '../../molecules/ChildrenComponent/index';

但是，我想尽可能避免这种方法。除了通过相对路径指定以外，没有其他方法可以启动没有错误的故事书吗？

绝对路径的应用基于tsconfig.json的以下描述。

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

另外，这次我们将以tsx扩展名编写的stories文件导入故事书中的已编译src目录中，而不是已编译的build/dist目录中。

这是在./storybook/config设置的，但是将其设置为build/dist会产生类似的结果。

由于该项目使用原子设计，因此大致具有以下目录结构。

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

333，＃3438

离题

顺便说一句，我相信有两种方法可以解决此问题。

我想问的第一件事是“使用Storybook导入绝对路径组件”，第二件事是编译为js文件，该文件将导入带有绝对路径的导入的tsx文件作为相对路径。之后，将导入的js文件与故事书的相对路径一起应用。

关于后者，我认为在这里听这个问题是不合适的，但是如果您知道的话，我也想问一下这种方法。

谢谢你的时间。

react question / support typescript

资料来源

mrsekut

👍2

最有用的评论

如果有人在看故事书5，

const path = require('path');

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

kexinlu1121 于 2019-05-08

👍36 ❤34 🎉12 🚀8

所有25条评论

我不知道它在常规应用程序中如何为您工作（例如您的设置是什么？），但是如果您将cwd（假设-> cwd/src/components/.... ）放入resolve.modules在扩展的webpack.config ，它应该可以解决您的问题（尽管我已经使用Angular应用程序进行了检查，但这并不重要）

igor-dv 于 2018-07-25

我的.storybook/webpack.config.js文件描述如下。
这里有问题吗？

const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
    const config = genDefaultConfig(baseConfig, env);

    config.module.rules.push({
        test: /\.(ts|tsx)?$/,
        exclude: /node_modules/,
        include: [/stories/, /src/],
        loader: 'ts-loader'
    });
    config.resolve.extensions.push('.ts', '.tsx');

    return config;
};

mrsekut 于 2018-07-25

尝试添加如下内容：

const path = require('path');

// blah blah code

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

  // blah blah code

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

igor-dv 于 2018-07-25

👍22 🎉12 ❤9 😄5

它正常工作！
我不知道该怎么感谢你才足够！！！！！！！

mrsekut 于 2018-07-25

u-r-welcome

igor-dv 于 2018-07-25

😄10 🚀5 🎉3 👀1

@ igor-dv我遇到了类似的问题，并尝试了您的建议（上述），以及用于修改resource.request路径的NormalModuleReplacementPlugin。都没有工作

你有什么其他的建议？

lukeAnderson2015 于 2018-08-01

您能否分享您的代码示例/ webpack.config.js？

igor-dv 于 2018-08-01

.storybook / webpack.config.js

const path = require（'path'）;`
// const webpack = require（'webpack'）;
const genDefaultConfig = require（'@ storybook / react / dist / server / config / defaults / webpack.config.js'）;

module.exports =（baseConfig，env）=> {
const config = genDefaultConfig（baseConfig，env）;
config.module = {
规则：[
{
测试：/。tsx $ /，
装载机：[“ ts-loader”]，
包括：path.resolve（__ dirname，'../app/xv/'）
}，
{
测试：/。scss $ /，
装载机：[
“样式加载器”，
'css-loader'，
'sass-loader？includePaths [] ='+ encodeURIComponent（path.resolve（__ dirname，'../app/'））
]
}，
{
测试：/。css $ /，
loader：“ style-loader！css-loader”
}，
{
测试：/。less $ /，
loader：“ style-loader！css-loader！less-loader”
}，
{
测试：/。js | .ts $ /，
排除：[path.join（__ dirname，'app / components'），/ node_modules /]，
loader：“ ng-annotate-loader”
}，
{
测试：/。js $ /，
排除：[path.join（__ dirname，'app / components'），/ node_modules /]，
loader：“ babel-loader？presets [] = es2015＆presets [] = stage-1＆presets [] = react＆cacheDirectory”
}
]
};

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

return config;
// ,
// plugins: [
//     new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) {
//         resource.request = resource.request.includes('xv/') ? '../../app/' + resource.request : resource.request;
//     })
// ]

//代码

`import * as'react from'react';

从'xv / util / decorators'导入{autobind}；

导入'../ styles / ActionIcon.scss';`

//错误

`./app/xv/ui/components/ActionIcon.tsx中的错误

找不到模块：错误：无法解析“ / Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components”中的“ xv / util / decorators”

@ ./app/xv/ui/components/ActionIcon.tsx 31：0-46
@ ./.storybook/stories/actionIcons.js
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js（webpack）-hot-middleware / client.js？ reload = true ./。storybook / config.js`

/ xv /在通常的webpack开发（非故事书）构建中映射到项目的基础（root / app / xv / *）

抱歉，格式化

我已经尝试过用NormalModuleReplacementPlugin替换正则表达式的不同变体，其中一些在类似故事/主题的故事/主题中发现，但未处理绝对路径

例：

plugins: [ new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) { resource.request = resource.request.replace(/xv/, '../../app/'); }) ]

给我这个错误：

`./.storybook/stories/actionIcons.js中的错误

找不到模块：错误：无法解析“ /Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories”中的“ ../../app//ui/components/Tooltip”

@ ./.storybook/stories/actionIcons.js 5：0-47
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js（webpack）-hot-middleware / client.js？ reload = true ./.storybook/config.js
`

以及此更改（将/ xv /添加到替换字符串中）

plugins: [ new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) { resource.request = resource.request.replace(/xv/, '../../app/xv/'); }) ]

给

`./.storybook/stories/actionIcons.js中的错误

找不到模块：错误：无法解析“ /Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories”中的“ ../../app/xv//ui/components/Tooltip”

@ ./.storybook/stories/actionIcons.js 5：0-47
`

当我用正确的路径替换绝对路径时，不仅相对路径被弄乱了，而且路径是“正确的”，并且错误仍然存在：

ERROR in ./.storybook/stories/actionIcons.js Module not found: Error: Can't resolve '../../app/xv/ui/components/Tooltip' in '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'

lukeAnderson2015 于 2018-08-01

您的工作目录（cwd）是什么？

igor-dv 于 2018-08-01

根/

.storybook
应用程式
-十五
--- ui
- - 组件
-实用程序

lukeAnderson2015 于 2018-08-01

我从NeXgen-UI（又名项目根目录）开始编写故事书

lukeAnderson2015 于 2018-08-01

因此，拥有此import { autobind } from 'xv/util/decorators';您应该将path.resolve('./app')到resolve.modules

igor-dv 于 2018-08-01

👍1

好了，所以我现在有了这个

`
config.resolve = {

    modules: [

        ...(config.resolve.modules || []),

        path.resolve('./app'),

        path.resolve('./')

    ]
};

return config;

并且变得一样：

`./app/xv/ui/components/ActionIcon.tsx中的错误

找不到模块：错误：无法解析“ / Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components”中的“ xv / util / decorators”
`

lukeAnderson2015 于 2018-08-01

看来您也需要添加config.resolve.extensions.push('.ts', '.tsx');

igor-dv 于 2018-08-02

👍1

@ igor-dv我也做了，同样的错误。谢谢你的帮助

lukeAnderson2015 于 2018-08-02

think那我想看一下复制品。你有公开回购吗？

igor-dv 于 2018-08-02

对我来说，它是通过在我的webpack配置中将__dirname到path.resolve来实现的，就像这样：（我正在创建一个create-react-app + TypeScript安装程序）：

config.resolve.modules = [
  ...(config.resolve.modules || []),
  path.resolve(__dirname, "../"),
  path.resolve(__dirname, "../src")
];

我的文件结构，请相应调整：

```
/根
/。故事书
webpack.config.js
/ src

glocore 于 2019-03-26

👍10 🚀4 ❤3

我没有意识到的愚蠢事情是我忘记在resolve.modules配置中添加前导../ 。

这对我有用：

// .storybook/webpack.config.js
module.exports = {
  ...,
  resolve: {
    modules: [path.resolve(__dirname, "../src"), "node_modules"],
  }
}

这是因为我的故事书webpack配置位于默认.storybook目录的更深1个目录中。

gerrytan 于 2019-04-11

👍3

如果有人在看故事书5，

const path = require('path');

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

kexinlu1121 于 2019-05-08

👍36 ❤34 🎉12 🚀8

你漂亮的人@ kexinlu1121。效果很好，谢谢。

titchimoto 于 2019-07-18

😄2

@glocore的解决方案是我需要它才能运行的提示。谢谢！

kumarashwin 于 2019-09-18

🎉1

我遇到了类似的问题，其中我的绝对导入在start-storybook起作用，但在构建时不起作用。如果有人需要参考，我将其放在此处以供参考。

我使用@src进行绝对导入，并通过添加以下行使其工作：

# /root/.storybook/webpack.config.js

const path = require("path");

module.exports = ({ config }) => {
  // ...

  // Add absolute path.resolve so storybook can handle absolute import (eg. @src/resources/...)
  config.resolve.alias = {
    ...config.resolve.alias,
    "@src": path.resolve(__dirname, "../src"),
  };

  return config;
};

对于上下文，我的项目目录如下所示：

/root
  .storybook/
    webpack.config.js
  src/
    components/

希望能帮助到你：）

wzulfikar 于 2020-07-27

❤3 🎉3 👍3 🚀2

@wzulfikar谢谢您的解决方案！

klikstermkd 于 2020-07-31

👍1

使用CLI后出现此问题，并且可以通过将.storybook / main.js修改为以下内容来解决此问题：

const path = require('path');

module.exports = {
  ...other settings....,

  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    return config;
  },

}

chidioguejiofor 于 2020-10-01

🎉1 👍1

你好
我正在使用React / TS
我的.storybook / main.js遇到了同样的问题：

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-knobs",
  ],
  webpackFinal: async (config) => {

    config.resolve.alias = {
      ...config.resolve.alias,
      'fs': path.resolve(__dirname, 'fsMock.js'),
      'child_process': path.resolve(__dirname, 'fsMock.js'),
      'net': path.resolve(__dirname, 'fsMock.js'),
      'tls': path.resolve(__dirname, 'fsMock.js'),
      // "src/types": path.resolve(__dirname, "../src/types"),
      // "src/components": path.resolve(__dirname, "../src/components"),
    };

    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    // config.resolve.extensions.push('.ts', '.tsx');

    return config;
  },
}

我的结构

.storybook
src
├── components
|     index.ts
│   ├── ChildrenComponent
│    │  ├── index.tsx
│    │  └── index.stories.tsx
│   ├── ParentComponent
│    │    ├── index.tsx
│    │    └── index.stories.tsx
├── stories

ParentComponent组件

import React from "react";
import { ChildrenComponent } from "src/components";
import { ItemType } from "src/types";

export default ({ item }: { item: ItemType }) => {
  return (
    <p className="hello">
      <ChildrenComponent type={item.type} />
      <span className="ellipsis">{item.title}</span>
    </p>
  );
};

问题来自src/components因为我可以执行src/components/ChildrenComponent 。

我不明白，我在这里尝试了一切，＃333 ＃3291等

错误的屏幕截图

有人可以帮忙吗？

castroCrea 于 2020-10-08

此页面是否有帮助？

0 / 5 - 0 等级

Storybook: 我无法使用Storybook中的绝对路径导入

版

行为

相关问题

333，＃3438

离题

最有用的评论

所有25条评论

相关问题