React - StoryBook - 从 node_modules 导入我的组件时出错

Question

我有一个 React 项目，其中包含相当多的组件，我想安装 StoryBook 以便能够查阅它们。

为此，我将 StoryBook 作为主项目之外的项目安装，保留文件夹结构如下：

c:\development\MyProject
c:\development\StoryBook

在 StoryBook 内部，我在Button.stories.jsx文件中添加了以下“导入” ，该文件管理安装中默认提供的按钮部分。

import SmallButton from 'MyProject/Buttons/SmallButton';

为了使其工作并能够导入我的组件，我在StoryBook 项目内的node_modules文件夹内创建了一个符号链接。

c:\development\StoryBook\node_modules\MyProject <== symbolic link to c:\development\MyProject\src

当我使用纱线故事书启动 StoryBook 时，它找到我的组件文件，但出现以下我无法解决的错误：

ERROR in ../MyProject/src/components/VSNButtons/SmallButton/index.js 10:12
Module parse failed: Unexpected token (10:12)
File was processed with these loaders:
 * ./node_modules/@storybook/preset-create-react-app/node_modules/@pmmmwh/react-refresh-webpack-plugin
/loader/index.js
You may need an additional loader to handle the result of these loaders.
|         const className = "ep-action " + (this.props.disabled ? "disabled " : " ") + (this.props.className || "");
|         return (
>             <span className={className} onClick={this.props.onClickHandle}>
|                 <span>
|                     <i className={"ep-action zmdi " + this.props.iconClass}></i>
 @ ./src/stories/atoms/buttons/Button.stories.jsx 150:0-58
 @ ./src sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@storybook/preset-create-react-app/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/preset-create-react-app/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./nod
e_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=fal
se&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/
@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./
node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-g
enerated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/dist
/esm/preset/argsEnhancers.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

**StoryBook (main.js) 的文件配置 **

module.exports = {
  stories: [
    "../src/**/*.stories.mdx", 
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  staticDirs: ["../public"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-interactions",
  ],
  features: {
    postcss: false
  },
  framework: "@storybook/react",
  core: {
    builder: "webpack4",
  }
};

还有StoryBook的.babelrc

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "shippedProposals": true,
        "loose": true
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-shorthand-properties",
    "@babel/plugin-transform-block-scoping",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-proposal-private-methods",
      {
        "loose": true
      }
    ],
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "loose": true,
        "useBuiltIns": true
      }
    ],
    "@babel/plugin-transform-classes",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-parameters",
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-transform-spread",
    "@babel/plugin-transform-for-of",
    "babel-plugin-macros",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    [
      "babel-plugin-polyfill-corejs3",
      {
        "method": "usage-global",
        "absoluteImports": "core-js",
        "version": "3.18.3"
      }
    ]
  ]
}

有谁知道解决这个问题的解决方案是什么？

或者可能是因为我无法从其他项目导入组件。

非常感谢。

PD：对不起我的英语，我用谷歌翻译来帮助我。