16
votes

create-react-app Typescript 3.5, Alias de chemin

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 ?

typescript create-react-app

2 commentaires

utilisez-vous un webpack personnalisé?

Oui, j'utilise react-app-rewired pour personnaliser les webpacks

5 Réponses :

5
votes

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).

0 commentaires

2
votes

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)
}

2 commentaires

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

1
votes

@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
 } `

1 commentaires

Merci pour ce travail, il suffit d'ajouter le chemin base-tsconfig.json! test avec React 16.13.1

6
votes

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"

5 commentaires

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" .

-1
votes

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.

0 commentaires