React Typescript Storybook 不允许导入对象 - TypeScript 主题

介绍

本文将介绍在使用 React Typescript Storybook 时遇到的问题，即不允许导入对象的限制。我们将探讨这个问题的原因，并提供解决方案，以便开发人员可以继续使用 Storybook。

问题描述

在使用 React Typescript Storybook 时，我们可能会遇到一个问题，即无法直接导入对象。这意味着我们无法在 Storybook 的组件或故事文件中使用 import 语句来导入自定义对象。

例如，当我们尝试导入一个名为 MyObject 的自定义对象时，以下代码会导致错误：

import MyObject from './MyObject';

// ...

错误信息可能会类似于：

Module not found: Can't resolve './MyObject' in '/path/to/component'

原因

这个问题的原因是 Storybook 的配置中不允许文件系统导入。原始配置中，默认的 webpack 配置启用了严格的模块查找规则，只允许导入来自 node_modules 目录的模块。

这样的配置是为了提高构建的性能和可维护性，并确保组件在 Storybook 中能够以独立的方式运行。然而，这也限制了开发人员在 Storybook 中导入自定义对象的能力。

解决方案

为了解决这个问题，我们可以通过自定义 Storybook 的 webpack 配置来允许文件系统导入。以下是一种常用的解决方案：

1. 在项目根目录下创建一个名为 .storybook 的文件夹（如果还不存在）。

2. 在 .storybook 文件夹中创建一个名为 webpack.config.js 的文件，并添加以下内容：

   module.exports = ({ config }) => {
     // 允许文件系统导入
     config.resolve.symlinks = false;
   
     return config;
   };
   

3. 重新启动 Storybook 运行命令，以便使新的 webpack 配置生效。

现在，您应该能够在 Storybook 的组件或故事文件中导入自定义对象了。

结论

React Typescript Storybook 不允许直接导入对象的限制是为了提高构建性能和组件独立性，但这也可能导致开发人员在使用 Storybook 时遇到问题。通过自定义 Storybook 的 webpack 配置，我们可以解决这个问题，允许文件系统导入自定义对象。