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

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

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.

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

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"]
}

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?

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

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

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.

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

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
}

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.

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

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

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

funciona bien

npm install @types/react-materialize