I have a project in React that contains quite a few components and I wanted to install StoryBook to be able to consult them.

For this I have installed StoryBook as a project outside my main project, leaving the folder structure as follows:

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

Inside StoryBook I have added the following 'import' inside the Button.stories.jsx file that manages the buttons section that comes by default in the installation.

import SmallButton from 'MyProject/Buttons/SmallButton';

For this to work and to be able to import my component I have created a symbolic link inside the node_modules folder inside the StoryBook project.

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

When I start StoryBook with yarn storyboook it finds my component file but gives the following error that I can't resolve:

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

**File Configuration of 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",
  }
};

And .babelrc of StoryBook

{
  "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"
      }
    ]
  ]
}

Does anyone know what would be the solution to apply to solve this problem?

Or maybe it's because I can't import components from other projects.

Thank you very much.

PD: Sorry my english, I used GoogleTranslate to help me.