web-dev-qa-db-fra.com

Typescript react - Impossible de trouver un fichier de déclaration pour le module '' react-materialize '. 'path/to/module-name.js' a implicitement un type quelconque

J'essaie d'importer des composants de react-matérialiser en tant que - 

import {Navbar, NavItem} from 'react-materialize';

Mais lorsque le pack Web compile mon .tsx, une erreur est générée pour ce qui précède:

ERROR in ./src/common/navbar.tsx
(3,31): error TS7016: Could not find a declaration file for module 'react-materi
alize'. 'D:\Private\Works\TypeScript\QuickReact\node_modules\react-materialize\l
ib\index.js' implicitly has an 'any' type.

Toute résolution pour cela .Je ne sais pas comment résoudre cette instruction d'importation pour qu'elle fonctionne avec ts-loader et webpack. 

Le index.js de réagit-matérialiser ressemble à ceci. Mais comment résoudre ceci pour l’importation de modules dans mes propres fichiers?.

https://github.com/react-materialize/react-materialize/blob/master/src/index.js

reactjswebpackwebpack-2
18
Joy

Pour ceux qui voulaient savoir comment j'ai surmonté cela. J'ai fait un truc de genre. 

Dans mon projet, j'ai créé un dossier appelé @Types et l'a ajouté à tsconfig.json pour trouver tous les types requis. Donc, cela ressemble un peu à ceci - 

  "typeRoots": [
            "../node_modules/@types",
            "../@types"
        ]

Et à l'intérieur de cela, j'ai créé un fichier appelé alltypes.d.ts. Pour en trouver les types inconnus. donc pour moi c'étaient des types inconnus et je les ai ajoutés là-bas.

declare module 'react-materialize';
declare module 'react-router';
declare module 'flux';

Alors maintenant, le TypeScript ne se plaignait plus des types non trouvés. :) gagner situation gagnant maintenant :)

25
Joy

J'ai eu une erreur similaire mais pour moi, c'était react-router. Résolu en installant des types pour cela. 

npm install --save @types/react-router

Erreur:

(6,30): error TS7016: Could not find a declaration file for module 'react-router'. '\node_modules\react-router\index.js' implicitly has an 'any' type.

Si vous souhaitez désactiver l'ensemble du site, vous pouvez éditer tsconfig.json et définir noImplicitAny sur false.

20
Ogglas

J'ai eu le même problème avec les types react-redux. La solution la plus simple a été d'ajouter à tsconfig.json:

"noImplicitAny": false

Exemple:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "noImplicitAny": false,
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}
7
Jackkobec

Tout ce que vous avez à faire est d’exécuter le script ci-dessous. Ensuite, supprimez/réinstallez le module que vous souhaitez utiliser.

npm install --save @ types/react-redux

4
Tun

Dans tsconfig.json, définissez "noImplicitAny": false Qui a résolu ce problème pour moi

2
SemineLee

Ce que j'ai fait a été d'exécuter les commandes suivantes à partir de l'invite de commande nodejs dans le répertoire du dossier du projet:

  1. npm init
  2. npm install -g webpack
  3. npm install --save react react-dom @types/react @types/react-dom
  4. npm install --save-dev TypeScript awesome-TypeScript-loader source-map-loader
  5. npm install ajv@^6.0.0
  6. npm i react-html-id
  7. importer le package (dans les modules de noeud) dans le fichier App.js en ajoutant le code: import UniqueId from 'react-html-id';

J'ai fait ce qui précède (même si j'avais déjà installé npm) et cela a fonctionné!

2
naru123

De plus, cette erreur est corrigée si le paquet que vous essayez d'utiliser a son propre fichier type et il est répertorié dans l'attribut package.jsontypings

Ainsi:

{
  "name": "some-package",
  "version": "X.Y.Z",
  "description": "Yada yada yada",
  "main": "./index.js",

  "typings": "./index.d.ts",

  "repository": "https://github.com/yadayada.git",
  "author": "John Doe",
  "license": "MIT",
  "private": true
}
1
Roy Art

S'il n'y a pas @types/<package> pour le module que vous utilisez, vous pouvez facilement résoudre le problème en ajoutant // @ts-ignore i.e.

// @ts-ignore
import { render } from 'react-snapshot';

Sinon, vous pouvez créer le @types/<package> manquant suivant:

publication de fichiers de déclaration

DefinitelyTyped comment puis-je contribuer

1
Mateja Petrović

Pour mon cas, le problème était que les types n'étaient pas ajoutés au fichier package.json sousdevDependenciespour y remédier, j'ai exécuté npm install --save-dev @types/react-redux notez le --save-dev

0
Japheth Ongeri - inkalimeva

fonctionne très bien

npm install @types/react-materialize
0
Arturas