web-dev-qa-db-fra.com

Typescript ne peut pas trouver le module qui a été défini dans le paramètre "chemins"

Dans mon projet React, j'ai un alias de module défini dans la configuration du webpack. Je veux commencer à passer à TypeScript.

// J'ai essayé de simplifier la configuration autant que cela avait du sens

C'est mon tsconfig.json dans le dossier racine:

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "jsx": "react",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ],
    "baseUrl": "./src",
    "paths": {
      "app": ["./app"]
    }
  },
  "include": [
    "src/**/*"
  ]
}

Voici ma structure de projet:

[rootDir]
|
|- [src]
|  |
|  |-[app]
|    |
|    |-[components]
|      | ... react components live here
|      |- Test.tsx
|      |- SomeComponent.tsx
|      |- index.js (export { default as Test } from './Test')
|
|- tsconfig.json
|- webpack.config.js

Je utilise le awesome-TypeScript-loader avec Webpack 2 et j'ai également inclus le plugin pour charger les chemins. J'utilise également Visual Studio Code et il dispose de TypeScript intégré, mais cela montre la même erreur.

Dans mon composant TypeScript SomeComponent.tsx Je veux inclure un autre composant comme ceci:

import * as React from 'react'
import { Test } from 'app/components'

J'obtiens l'erreur suivante:

Cannot find module 'app/components'
javascriptreactjstypescript
11
Chris

La solution consiste à modifier la configuration des chemins pour trouver les fichiers imbriqués.

"baseUrl": ".",
"paths": {
  "app*": ["src/app*"]
}

Maintenant, quand j'ajoute import { Test } from 'app/components' TypeScript examinera src/app/components/index.js et il fonctionne. J'aime aussi ajouter @ aux alias pour éviter les conflits avec les autres modules. Ainsi:

  "@app*": ["src/app*"]
15
Chris