Почему псевдоним create-Reaction-app не может найти index.js из папки?

Question

У меня возникла странная проблема при создании псевдонима для моего приложения. Я пытаюсь создать псевдоним, добавив jsconfig.json, который выглядит как

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015",
            "es2016",
            "es6",
            "es2017"
        ],
        "target": "es2017",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "actions/*": ["src/actions/*"],
            "public/*": ["public/*"],
            "components/*": ["src/components/*"],
            "containers/*": ["src/containers/*"],
            "constants/*": ["src/constants/*"],
            "config/*": ["config/*"],
            "helpers/*": ["src/helpers/*"],
            "stores/*": ["src/stores/*"],
            "styles/*": ["src/styles/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

, в этом случае невозможно найти псевдоним компонента.

Я изменил файл json на

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015",
            "es2016",
            "es6",
            "es2017"
        ],
        "target": "es2017",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./src/",
        "paths": {
            "actions/*": ["actions/*"],
            "public/*": ["public/*"],
            "components/*": ["components/*"],
            "containers/*": ["containers/*"],
            "constants/*": ["constants/*"],
            "config/*": ["config/*"],
            "helpers/*": ["helpers/*"],
            "stores/*": ["stores/*"],
            "styles/*": ["styles/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

Он может получить псевдоним компонента, однако выдает ошибку Cannot find file: 'index.js' does not match the corresponding name on disk: './src/components/Checkbox/CheckBox'., пока я пытаюсь импортировать его как import Checkbox from 'components/Checkbox';. И моя структура папок выглядит так:

mainDir/
      config/
      public/
      src/
        component/
          Checkbox/
            index.js
      jsconfig.json
      package.json

Как мне решить эту проблему? Есть ли другой способ создать псевдоним с помощью create-react-app?

Answer 1

В проекте create-react-app исходные файлы вне папки src не переносятся. [1]

Непосредственный импорт из модулей es6, использующих синтаксис JSX вне папки src, по этой причине не выполняется.

Обычная практика -создать символические ссылки в папке src для модулей вне ее и настроить псевдонимы для разрешения из папки src. например

        "baseUrl": "src",
        "paths": {
            "actions": ["actions/*"],
            "public": ["public/*"],
            "components": ["components/*"],
            "containers": ["containers/*"],
            "constants": ["constants/*"],
            "config": ["config/*"],
            "helpers": ["helpers/*"],
            "stores": ["stores/*"],
            "styles": ["styles/*"]
        }

Внешние модули Symlink

ln -s ../config/ ./src/
ln -s ../public/ ./src/