compilerOptions.paths не должны быть установлены (импорт псевдонимов не поддерживается)

Я пытаюсь сопоставить пути в tsconfig.json, чтобы избавиться от ада относительных путей. Мое приложение React основано на Create-React-App. Я попробовал этот поток SO и добавил пути в свой tsconfig.json. Мой tsconfig.json выглядит как

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "strictNullChecks": false
  },
  "include": [
    "src"
  ]
}

когда я компилирую свой проект в VS Code, он удаляет запись путей из tsconfig.json со следующим сообщением. Почему импорт псевдонимов не поддерживается в моем проекте React Project на основе сценариев реакции?

введите описание изображения здесь


reactjs typescript tsconfig tsconfig-paths
person DevLoverUmar    schedule 02.10.2020    source источник
comment
ты нашел какое-нибудь решение?   -  person RB19    schedule 02.12.2020
comment
Нет, не сейчас....   -  person DevLoverUmar    schedule 02.12.2020

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны добавить "baseUrl": ".", к параметрам компилятора, после чего вы можете напрямую использовать импорт src/your/path.

person morpet    schedule 28.01.2021

arrow_upward
0
arrow_downward

вы, вероятно, уже догадались, но вот решение, пока мы ждем запрос на вытягивание, который добавляет это в tsconfig. В настоящее время возникает та же проблема с create-react-app react v 17.0.2,

У меня была аналогичная проблема с приложениями gatsby, когда вы не могли просто настроить импорт псевдонимов без изменения конфигурации веб-пакета.

в этой ветке есть хорошее объяснение при импорте псевдонимов в cra без машинописного текста, но это должно привести к такой же конфигурации в конце дня.

вам нужно будет либо извлечь (не Не делайте этого, если у вас нет других проблем, которые необходимо решить в конфигурации вашего веб-пакета.) или используйте другой пакет, например CRACO или React-App-Rewired для настройки псевдонимов через веб-пакет. .

Этот ответ на Stackoverflow, скорее всего, именно то, что вы ищете.

установите response-app-rewired, затем создайте config-overrides.js и поместите этот код в там ->

//config-overrides.js
const { alias, configPaths } = require('react-app-rewire-alias');

module.exports = function override(config) {
  return alias(configPaths('./tsconfig.paths.json'))(config);
};

создайте свой объект пути внутри tsconfig.paths.json

//tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components": ["components"],
      "@styles": ["styles"],
      "@config": ["config"]
    }
  }
}

затем расширите эти параметры внутри tsconfig (не внутри compilerOptions)

//tsconfig.js

 "extends": "./tsconfig.paths.json"

наконец, замените каждый сценарий response-scripts в вашем package.json на response-app-rewired

//package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

Вы должны быть готовы к этому. Надеюсь, это поможет любому, кто столкнется с этой проблемой с помощью create-response-app.

person Angelo P    schedule 11.07.2021
comment
Как ни странно, после некоторого тестирования и, наконец, публикации, он сломался для меня, поэтому, если кто-нибудь попробует это, пожалуйста, дайте мне знать, работает ли это для них. - person Angelo P; 11.07.2021