Ошибка сборки Craco, папка с псевдонимом используется в качестве внешнего пакета

Question

Я использую craco и craco-alias для реализации псевдонимов для импорта в моем проекте Create React App. Следуйте инструкциям в https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md и https://github.com/risenforces/craco-alias Я настроил пакет.json для использования Craco вместо сценариев реакции для запуска сервера разработки, тестов и производственной сборки

...
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "lint:css": "stylelint './src/**/*.css'",
    "lint:js": "eslint 'src/**/*.js'",
    "test:w": "craco test --watch",
    "postinstall": "patch-package"
  },
...

Затем я создал файл jsconfig.json с путями псевдонимов

  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components": ["components/*", "components"],
      "@constants": ["constants/*", "constants"],
      "@assets": ["assets/*", "assets"],
      "@store": ["store/*", "store"],
      "@utils": ["utils/*", "utils"]
    },
    "include": ["src"],
    "exclude": ["node_modules", "build", "coverage"]
  }

И файл craco.config.js, который использует плагин craco-alias

/* craco.config.js */
const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        baseUrl: './src',
        source: 'jsconfig',
      }
    }
  ]
}

Теперь я использую псевдонимы для импорта в своем приложении, как это

// root index.js file
...

import Layout from '@components/Layout';
import store from '@store'; // this line causes error on CI build


function App() {
  return (
    <Layout>
     /* inner components */
    </Layout>
  );
}

Все работает нормально (импорт с псевдонимом работает на dev-сервере, в тестах шутки и даже если я обслуживаю локально созданный проект), пока я не отправлю его в репозиторий github. В этом репо настроены действия github для сборки и тестирования проекта на удаленном сервере, и после установки всех пакетов происходит сбой с ошибкой на этапе сборки.

Run yarn build
yarn run v1.22.4
$ craco build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Failed to compile.

./src/index.js
Cannot find module: '@store'. Make sure this package is installed.

You can install this package by running: npm install @store.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
##[error]Process completed with exit code 1.

Может ли кто-нибудь помочь мне понять, что не так с моим кодом? Почему Craco или webpack ожидают, что '@store' будет внешним пакетом, а не импортированным внутренним модулем с псевдонимом?

Answer 1

В моем случае проблема была не в craco или webpack, а в моих предыдущих действиях и различиях файловой системы ОС. Я использую Windows 10 и WSL в терминале VS Code. Поэтому, прежде чем использовать символ '@' для псевдонимов, я попытался использовать CamelCase для своих папок и переименовал его через проводник Windows (потому что для меня было проще закрыть VSCode и переименовать файлы через проводник, чем открывать новый терминал bash в новом окне VSCode после закрытие открытых файлов).

Тогда я предпочитаю использовать символ "@" и переименовывать папки обратно в нижний регистр. Я настроил псевдонимы и отправил изменения в удаленное репозиторий github, где выполнялись действия CI. Когда CI выполнял действия, он не мог найти папку "store" (потому что ранее я переименовал ее в "Store", и это был последний сохраненный путь к папке в git), поэтому он попытался найти внешний пакет с именем "store".

Чтобы исправить это, я изменяю конфигурацию git, чтобы перестать игнорировать регистр имен для моей папки, выполнив команду git config core.ignorecase false. История Git была обновлена, я отправляю ее в удаленное репо, и действия CI выполнены успешно.