J'essaie de configurer l'alias de chemin dans mon projet en ajoutant ces valeurs à tsconfig.json:
TypeScript error in C:/xyz.tsx(2,26): Cannot find module '/store'. TS2307
Et si je crée une importation, ni IntelliJ ni VSCode ne me dérangent:
The following changes are being made to your tsconfig.json file: - compilerOptions.paths must not be set (aliased imports are not supported)
Mais lorsque je compile l'application, j'obtiens cet avertissement:
import { AppState } from '@store/index';
Et il bombarde en disant qu'il ne trouve pas la référence:
"compilerOptions": { "baseUrl": "src", "paths": { "@store/*": ["store/*"] },
Existe-t-il une solution de contournement ou n'est-il pas pris en charge par create-react-app --typescript
?
5 Réponses :
Edit - 20/3/20 - La réponse ci-dessus a une solution avec un plugin.
Avait le même problème. Au moment de la publication, il n'est actuellement pas pris en charge en l'état.
Cette fonctionnalité est toujours en développement avec l'équipe de l'ARC: https://github.com/facebook/create-react-app/pull/6116
Si vous modifiez le tsconfig, l'ARC supprime les modifications: https://github.com/facebook/create-react-app/issues/6269
Il y a quelques hacks dans ce fil: https://github.com/facebook/create-react-app/issues/5118 pour que les alias fonctionnent, mais nécessitent une personnalisation de la configuration de l'ARC qui ne convient pas à mon cas d'utilisation (en utilisant l'ARC comme si).
Ceci est résolu par react-app-rewire-alias (pour react-app-rewired ou personnaliser-cra ):
Selon la documentation, remplacez react-scripts
par react-app-rewired
dans package.json
et configurez ensuite:
// tsconfig.json { "compilerOptions": { // ... "extends": "./tsconfig.paths.json", } }
Configurez les alias dans json comme ceci:
// jsconfig.paths.json { "compilerOptions": { "baseUrl": ".", "paths": { "example/*": ["example/src/*"], "@library/*": ["library/src/*"] } } }
Et d' ajouter ce fichier dans extends
la section du fichier de configuration principal dactylographiée:
// config-overrides.js const {alias, configPaths} = require('react-app-rewire-alias') module.exports = function override(config) { return alias(configPaths('./tsconfig.paths.json'))(config) }
Je rencontre le même problème d'alias de chemin qui ne fonctionne pas. J'essaie de créer un nouveau fichier sous le dossier racine "config-overrides.js" et j'ai fait ce qui précède. Mais quand j'ai commencé à configurer le fil pour "react-app-rewired start", il lance "react-app-rewire-alias: configPaths: tableau attendu pour les chemins". Pls conseiller
Salut @Brad, c'est bien que vous ayez résolu le problème et clarifiez cela ici - j'ajoute ici le lien vers les autres
@oklas. I've resolved using the following in config-overrides.js which is same as above. But Thanks a lot for sharing this answer `const {alias, configPaths} = require('react-app-rewire-alias') module.exports = function override(config) { alias({ ...configPaths('base-tsconfig.json') })(config) return config } `
Merci pour ce travail, il suffit d'ajouter le chemin base-tsconfig.json! test avec React 16.13.1
Dans mon cas, j'ai résolu ce problème en utilisant craco et craco-alias
Installer craco et craco-alias npm install @craco/craco --save
et npm i -D craco-alias
Créez tsconfig.paths.json
dans le répertoire racine
const CracoAlias = require("craco-alias"); module.exports = { plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", // baseUrl SHOULD be specified // plugin does not take it from tsconfig baseUrl: "./src", /* tsConfigPath should point to the file where "baseUrl" and "paths" are specified*/ tsConfigPath: "./tsconfig.paths.json" } } ] };
Étendez tsconfig.paths.json
dans tsconfig.json
{ "extends": "./tsconfig.paths.json", //default configs... }
Créez craco.config.js
dans le répertoire racine
{ "compilerOptions": { "baseUrl": "./src", "paths": { "@components/*" : ["./components/*"] } } }
dans package.json
swap "start": "react-scripts start"
avec "start": "craco start"
Et puis vous devriez pouvoir utiliser par exemple: import Bla from '@components/Bla';
? Où j'ai créé un fichier à ./components/Bla.tsx
.
J'ai transformé vos pas en script: pastebin.com/KkPUjZBU avec l'ajout de mon commentaire ci-dessus. Malheureusement, il échoue avec Can't resolve '@components/Bla'
. Ai-je fait une erreur?
avez-vous créé le répertoire des composants dans le répertoire src? Sinon, vous devez changer le chemin absolu dans les "baseUrl": "./src"
ou 61 ligne cat > components/Bla.tsx
change sur cat > src/components/Bla.tsx
Ah, compris, merci. Oui, j'essaie d'avoir un package de composants en dehors de src. J'essaierai d'éditer "baseUrl"
.
Ont également résolu la solution en utilisant craco avec ts-loader
- décrit ici: https://stackoverflow.com/a/63545611/10813908
La configuration indiquée permet essentiellement à CRA d'être étendu en surchargeant la configuration Webpack intégrée via craco et permet également au code CRA de référencer directement les fichiers dactylographiés dans les packages externes / partagés de votre mono-repo.
utilisez-vous un webpack personnalisé?
Oui, j'utilise react-app-rewired pour personnaliser les webpacks