Как установить путь псевдонима через веб-пакет в CRA (create-реагировать-приложение) и Craco?

Question

У меня проблема с настройкой псевдонима в веб-пакете с использованием create-реагировать-app и craco, уже погуглив, но не могу решить проблемуЯ получаю сообщение об ошибке Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src каждый раз, когда запускаю приложение, используя команду yarn start

Шаги для воспроизведения:

1. create-react-app my-project
2. cd my-project
3. yarn add @craco/craco
4. cat > craco.config.js (см. Конфигурацию ниже)
5. заменить react-scripts на craco в разделе «script» в package.json (запуск Craco, сборка Craco и т. Д.)
6. редактировать файл src/index.js (заменить строку 4, см. Код ниже)
7. yarn start

craco.config.js

const path = require("path");

module.exports = {
  webpack: {
    resolve: { 
      alias: {
        "@app": path.resolve(__dirname, "src/"),
      }
    }    
  }
};

src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '@app/App'; //replace './App' into '@app/App'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

Текущий результат

Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src

Ожидается

Я избегаю вызова относительного пути в ад, вместо модуля импорта, такого как ../../../../FilterComment.js, было бы чисто написать @app/FilterComment.js

Answer 1

Просто сохраните ваш файл craco.config.js точно так же, и вам нужно добавить еще 1 файл с именем jsconfig.json

это содержание:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
    "jsx": "preserve",
    "checkJs": true,
    "baseUrl": "./src/",
    "paths": {
      "@app/*": ["./*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

тогда вы можете импортировать из абсолютного пути как @app/FilterComment.js

Это также сработало для VSCode (теперь редактор понимает, куда указывает * 1011). Но если вы хотите, чтобы VSCode выполнял импорт автоматически, вам следует добавить дополнительные настройки, чтобы он всегда выполнял импорт по абсолютному пути.

файл .vscode/settings.json Содержание:

{
  "javascript.preferences.importModuleSpecifier": "non-relative"
}