Typecript react: no se pudo encontrar un archivo de declaración para el módulo '' react-materialize '. 'path / to / module-name.js' implícitamente tiene un tipo any

99

Estoy tratando de importar componentes de react-materialize como -

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

Pero cuando el paquete web está compilando .tsx, arroja un error para lo anterior como:

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.

Cualquier resolución para esto. No estoy seguro de cómo resolver esta declaración de importación para trabajar con un ts-loaderpaquete web.

El index.jsde react-materialize se ve así. Pero, ¿cómo resolver esto para la importación del módulo en mis propios archivos?

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

Alegría
fuente
2
Debe instalar las tipificaciones / tipos para el paquete (npm install @ types / react-materialize). Sin embargo, parece que esto todavía no existe, por lo que es posible que deba crearlo usted mismo. Encontré este artículo útil - templecoding.com/blog/2016/03/31/…
T Mitchell
@T Mitchell, ¿eso significa que cualquier tipo de tipo que nos falte nunca podríamos compilar el paquete web sin que esto cree estos tipos? ¿Debería haber alguna forma?
Joy
2
Hay una manera - stackoverflow.com/questions/38224232/…
T Mitchell
esto me parece una pequeña solución.
SuperUberDuper

Respuestas:

73

Tuve un error similar pero para mí lo fue react-router. Lo resolvió instalando tipos para él.

npm install --save @types/react-router

Error:

(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 desea desactivar al sitio que amplia su lugar, puede editar tsconfig.jsony conjunto noImplicitAnya false.

Ogglas
fuente
Aunque actualmente no existe tal paquete @ types / react-navigation-tabs todavía, el mencionado "noImplicitAny": false,lo deshabilitó (obtuve este problema debido al uso de react-native init MyProject --template mecanografiado, al menos creo que sí) 👍
Arriba -Master
1
oyarn add @types/react-router --dev
Omar Tariq
57

Para aquellos que querían saber cómo superé esto. Hice una especie de truco.

Dentro de mi proyecto, creé una carpeta llamada @typesy la agregué a tsconfig.json para encontrar todos los tipos requeridos. Así que se parece a esto:

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

Y dentro de eso creé un archivo llamado alltypes.d.ts. Para encontrar los tipos desconocidos de él. así que para mí estos eran los tipos desconocidos y los agregué allí.

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

Así que ahora el mecanografiado ya no se quejaba de los tipos que no se encontraban. :) situación de ganar ganar ahora :)

Alegría
fuente
3
Me perdí la parte de que estaba en un archivo separado. Parece que poner esas declaredeclaraciones en un archivo llamado lo index.d.tsarregló para mí. No tuve que tocar typeRoots.
Scotty Waggoner
Eso funciona bien, pero causa problemas cuando se usa require para otras cosas como imágenes. Básicamente, simplemente no te permite usarlo requirepara nada.
Dhruvdutt Jadhav
1
esta solución ya no funciona con la última versión de TS. nvalid module name in augmentation. Module 'some-dumb-lib-with-no-types' resolves to an untyped module at '/path/to/module', which cannot be augmented.
FlavorScape
1
Algo que también vale la pena mencionar: dependiendo de la ubicación de su fuente, es posible que también deba agregar "../types" a su matriz "incluye"
netpoetica
1
Tengo problemas con la carpeta react-countdown-clockcreada @typese hice todos los pasos anteriores. sigue recibiendo el mismo error.
Jyothu
44

He tenido el mismo problema con los tipos react-redux. La solución más simple se agregó a tsconfig.json:

"noImplicitAny": false

Ejemplo:

{
  "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"]
}
Jackkobec
fuente
esto funcionó muy bien en IntelliJIDE, pero el typeRootsmétodo personalizado (que es la respuesta aceptada) incluso funcionó en VS CodeIDE
Top-Master
3
Creo que esto es un truco, aunque esto resolvió el problema, pero ¿hay alguna solución válida y permanente para este problema?
Pardeep Jain
Creo que esta es la mejor solución para este problema, no creo que sea viable npm en todos los paquetes que arrojan el error
Gilbert R.
30

Si no hay @types/<package>para el módulo que está utilizando, puede evitar fácilmente el problema agregando un // @ts-ignorecomentario arriba, es decir

// @ts-ignore
import { Navbar, NavItem } from 'react-materialize';

Alternativamente, puede crear lo que falta @types/<package> siguiente que :

publicación de archivos de declaración

DefinitelyTyped ¿cómo puedo contribuir?

Mateja Petrovic
fuente
1
Este paquete aún no tiene @typesdisponible por cierto. Se creó un problema en el repositorio ... github.com/geelen/react-snapshot/issues/131
doublejosh
17

En mi caso tuve un problema con reaccionar, así que comencé a hacer:

npm install @types/react

y luego al

npm install @types/react-dom

Esto funcionó para mi

AlessandroASB
fuente
Incluso aunque ya estuvieran instalados, volver a ejecutar esos comandos me resolvió el problema.
heringer
Básicamente, actualiza sus paquetes existentes cuando vuelve a ejecutar los comandos. Esa fue la razón por la que el problema está resuelto.
Anant Lalchandani
7

Todo lo que necesita hacer es ejecutar el siguiente script. Luego, quite / reinstale el módulo que desea usar.

npm install --save @types/react-redux
Tonel
fuente
1
No parece haber un @ types / react-materialize disponible
RonLugge
6

Tuve este problema cuando agregué react-router-domla nueva aplicación CRA usando mecanografiado. Después de que agregué @types/react-router, se solucionó el problema.

dkocich
fuente
¿Qué hacer después de instalar esto?
Pardeep Jain
5

Tuve este mismo problema pero no necesariamente relacionado con el mecanografiado, así que luché un poco con estas diferentes opciones. Estoy haciendo una aplicación create-react-app muy básica usando un módulo específico react-portal-tooltip,obteniendo un error similar:

No se pudo encontrar un archivo de declaración para el módulo 'react-portal-tooltip'. '/node_modules/react-portal-tooltip/lib/index.js' tiene implícitamente un tipo 'any'. Pruebe npm install @types/react-portal-tooltipsi existe o agregue un nuevo archivo de declaración (.d.ts) que contenga declare module 'react-portal-tooltip';ts (7016)

Primero probé muchos pasos: agregar varios .d.tsarchivos, varias instalaciones de npm.

Pero lo que finalmente funcionó para mí fue touch src/declare_modules.d.ts entonces src/declare_modules.d.ts:

declare module "react-portal-tooltip";

y en src/App.js:

import ToolTip from 'react-portal-tooltip';
// import './declare_modules.d.ts'

Luché un poco con las diferentes ubicaciones para usar esta estrategia general de 'declarar módulo' (soy muy principiante), así que creo que esto funcionará con diferentes opciones, pero estoy incluido en las rutas para lo que funcionó.

Inicialmente pensé import './declare_modules.d.ts' era necesario. ¡Aunque ahora parece que no lo es! Pero incluyo el paso en caso de que ayude a alguien.

Esta es mi primera respuesta de stackoverflow, así que me disculpo por el proceso disperso aquí y espero que aún haya sido útil. :)

Sylvia Pap
fuente
2
Esto es realmente sencillo y ordenado. Gracias. ¡Sigan con el buen trabajo!
Cubelaster
4

Además, este error se soluciona si el paquete que está intentando usar tiene su propio archivo de tipo y está incluido en el atributo package.json typings

Al igual que:

{
  "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
}
Roy Arte
fuente
3

Una forma más hacky es agregar, por ejemplo, en boot.tsx la línea

import './path/declare_modules.d.ts';

con

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

en declare_modules.d.ts

Funciona, pero otras soluciones son mejores en mi opinión.

Soleil - Mathieu Prévot
fuente
3

Lo que hice fue ejecutar los siguientes comandos desde el símbolo del sistema de nodejs mientras estaba en el directorio de la carpeta del proyecto:

  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. importar el paquete (en módulos de nodo) en el archivo App.js agregando el código: import UniqueId from 'react-html-id';

Hice lo anterior (aunque ya tenía npm instalado) y funcionó.

naru123
fuente
0

Para mi caso el problema era que los tipos no estaban recibiendo añaden al archivo package.json bajo devDependencies para solucionarlo me encontré npm install --save-dev @types/react-reduxen cuenta la--save-dev

Japheth Ongeri - inkalimeva
fuente
0

intente agregar al archivo tsconfig.json: "noImplicitAny": false funcionó para mí

Bekzat
fuente
-2

funciona bien

npm install @types/react-materialize
Arturas
fuente
3
no hay tipos de react-materialize
katzmopolitan