Texto tipificado react - Não foi possível encontrar um arquivo de declaração para o módulo '' react-materialize '. 'path / to / module-name.js' implicitamente tem qualquer tipo

Estou tentando importar componentes do react-materialize como -

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

Mas quando o webpack está compilando meu, .tsxele lança um erro para o acima 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.

Qualquer resolução para isso. Não tenho certeza de como resolver esta declaração de importação para trabalhar com um ts-loaderwebpack.

O index.jsde reagir-materializar é assim. Mas como resolver isso para a importação do módulo em meus próprios arquivos ..

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

Eu tive um erro semelhante, mas para mim foi react-router. Resolvido instalando tipos para ele.

npm install --save @types/react-router

Erro:

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

Se desejar desativá-lo em todo o site, você pode editar tsconfig.jsone definir noImplicitAnycomo false.

Para quem queria saber como eu superei isso. Eu fiz um tipo de hack.

Dentro do meu projeto, criei uma pasta chamada @typese adicionei-a a tsconfig.json para encontrar todos os tipos necessários. Então, parece um pouco com isso -

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

E dentro disso criei um arquivo chamado alltypes.d.ts. Para encontrar os tipos desconhecidos dele. então para mim esses eram os tipos desconhecidos e eu adicionei lá.

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

Portanto, agora o texto datilografado não reclamava dos tipos que não eram mais encontrados. :) situação ganha-ganha agora :)

Eu tive o mesmo problema com os tipos react-redux. A solução mais simples foi adicionar ao tsconfig.json:

"noImplicitAny": false

Exemplo:

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

Se não houver nenhum @types/<package>para o módulo que você está usando, você pode facilmente contornar o problema adicionando um // @ts-ignorecomentário acima, ou seja,

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

Alternativamente, você pode criar o @types/<package> seguinte:

publicação de arquivos de declaração

DefinitelyTyped como posso contribuir

No meu caso, tive um problema com o react, então comecei a fazer:

npm install @types/react

e então para o

npm install @types/react-dom

Isso funcionou para mim

Tudo que você precisa fazer é executar o script abaixo. Em seguida, remova / reinstale o módulo que deseja usar.

npm install --save @types/react-redux

Tive esse problema quando adicionei react-router-domao novo aplicativo CRA usando o texto digitado. Depois de adicionar @types/react-router, o problema foi corrigido.

Tive o mesmo problema, mas não necessariamente relacionado à digitação, então me esforcei um pouco com essas diferentes opções. Estou fazendo um aplicativo criar-reagir muito básico usando um módulo específico, react-portal-tooltip,obtendo um erro semelhante:

Não foi possível encontrar um arquivo de declaração para o módulo 'react-portal-tooltip'. '/node_modules/react-portal-tooltip/lib/index.js' implicitamente tem um tipo 'qualquer'. Experimentarnpm install @types/react-portal-tooltip se ele existe ou adicione um novo arquivo de declaração (.d.ts) contendo declare module 'react-portal-tooltip';ts (7016)

Tentei várias etapas primeiro - adicionando várias .d.ts arquivos, várias instalações de npm.

Mas o que funcionou para mim foi touch src/declare_modules.d.ts então src/declare_modules.d.ts:

declare module "react-portal-tooltip";

e em src/App.js:

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

Lutei um pouco com os diferentes locais para usar essa estratégia geral de 'declarar módulo' (sou muito iniciante), então acho que funcionará com diferentes opções, mas incluí caminhos para o que funcionou.

Eu inicialmente pensei import './declare_modules.d.ts' fosse necessário. Embora agora pareça que não é! Mas estou incluindo a etapa caso ajude alguém.

Esta é minha primeira resposta stackoverflow, então peço desculpas pelo processo disperso aqui e espero que ainda tenha sido útil! :)

Além disso, esse erro será corrigido se o pacote que você está tentando usar tiver seu (s) próprio (s) arquivo (s) de tipo e estiver listado no atributo package.json typings

Igual a:

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

Uma maneira mais hacky é adicionar, por exemplo, em boot.tsx a linha

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

com

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

dentro declare_modules.d.ts

Ele funciona, mas outras soluções são melhores IMO.

O que fiz foi executar os seguintes comandos no prompt de comando nodejs enquanto estava no diretório da pasta do projeto:

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. importe o pacote (em módulos de nó) no arquivo App.js adicionando o código: import UniqueId from 'react-html-id';

Eu fiz o acima (embora já tivesse instalado o npm) e funcionou!

Não foi possível encontrar um arquivo de declaração para o módulo 'react / jsx-runtime'

Se alguém estiver tendo esse erro, você ficará surpreso ao saber que, ao criar o app react com create-react-app, ele só aparece @types/reactno package.json. Mas se você verificar dentro da node_modules/@typespasta, você não encontrará nenhuma pasta dereact .

A solução é simplesmente eliminar o node_modules pasta completamente e reinstalar - npm installou talvez ir com a instalação do módulo individual - npm install @types/react.

em 2021 para criar .d.ts arquivo manualmente, você só precisa fazer o seguinte:

1- entrar src folder

2- criar global.d.ts arquivo

3-declare módulos nele como:

declare module 'module-name';

Eu respondi aqui antes e foi bom

No meu caso, o problema era que os tipos não estavam sendo adicionados ao arquivo package.json em devDependencies para corrigi-lo. Executei a npm install --save-dev @types/react-reduxobservação do--save-dev

tente adicionar ao arquivo tsconfig.json: "noImplicitAny": false funcionou para mim

Eu consegui depois de muitos problemas. No app react, haverá um arquivo react-app-env.d.ts na pasta src, basta declarar o módulo lá

/// <reference types="react-scripts" />
declare module 'react-color/lib/components/alpha/AlphaPointer'

funciona bem

npm install @types/react-materialize