Typescript react - 找不到模块“react-materialize”的声明文件。 'path/to/module-name.js' 隐含任何类型答案

【问题标题】：Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any typeTypescript react - 找不到模块“react-materialize”的声明文件。 'path/to/module-name.js' 隐含任何类型
【发布时间】：2017-05-18 16:18:46
【问题描述】：

我正在尝试从 react-materialize 导入组件 -

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

但是当 webpack 正在编译我的 .tsx 时，它会为上面的内容抛出错误 -

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.

有什么解决办法吗？我不确定如何解决此导入语句以使用 ts-loader 和 webpack。

react-materialize 的index.js 长这样。但是如何解决这个问题，以便在我自己的文件中导入模块？

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

【问题讨论】：

您需要安装包的类型/类型（npm install @types/react-materialize）。但是，它似乎还不存在，因此您可能需要自己创建它。我发现这篇文章很有帮助 - templecoding.com/blog/2016/03/31/…
@T Mitchell 那么这是否意味着我们缺少任何类型的类型，如果不创建这些类型，我们将永远无法编译 webpack？应该有什么办法吧？
有办法-stackoverflow.com/questions/38224232/…
这对我来说似乎是一种解决方法。
Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type的可能重复

标签： reactjs webpack webpack-2

【解决方案1】：

您可以通过here 找到合适的解决方案。您只需将react-items-carousel 替换为react-materialize。

【讨论】：

【解决方案2】：

尝试npm i --save-dev @types/react-materialize（如果存在）或添加包含declare module 'react-materialize'; 的新声明（.d.ts）文件

【讨论】：

【解决方案3】：

如果您只想为类型不可用的节点模块声明类型，这些是注释。

解决方案--->

在 src 目录中创建一个 global.d.ts 文件。
因为 typescript 已经在看 src 目录了
因此我们避免在 tsconfig.json 中明确声明也加载特定类型的文件，因为这样做会覆盖其他默认类型的位置

【讨论】：

【解决方案4】：

喜欢这个：

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

此外，如果您尝试使用的包具有自己的类型文件并且它已在 package.json 中列出，则此错误将得到修复@ 987654322@属性

【讨论】：

不明白你的解决方案，你有什么建议？

【解决方案5】：

如果你对 react npm install 有问题 --save @types/reactnpm install --save @types/react

【讨论】：

【解决方案6】：

react-router-dom 出现同样的错误。

当您处理 typescript 项目时会发生此错误，默认模块不带有 typescript 所需的类型。

所以我在 npmjs.com 上搜索了一个名为 @types/react-router-dom 的包，如果它不是您正在寻找的 react-router-dom，则将 react-router-dom 替换为您的无类型模块。

在 npm 网站上查找最新版本，然后将其添加到您的 package.json 中，如下所示：

[...]
"dependencies": {
    [...]
    "@types/react-router-dom": "^5.1.8",
    [...]
  },
[...]

完成后，运行yarn install

那么它应该摇滚！

【讨论】：

也可以在“devDependencies”中添加："devDependencies": { "@types/react-router-dom": "^5.1.8" }
注意：将 types 模块添加到 devDependencises

【解决方案7】：

确保在执行以下操作后停止您的 react 本地服务器并重新启动它：

1- 手动创建.d.ts 文件，您只需要执行以下操作：

2 - 输入src folder

3 - 创建global.d.ts 文件

4 - 在其中声明模块：

declare module 'module-name';

我之前回答过here，很好

【讨论】：

谢谢！这是这里提到的所有解决方案中效果最好的
如果执行上述操作后仍然无法正常工作，请确保停止您的 react 本地服务器并重新启动它。 npm start
你是救命稻草

【解决方案8】：

对于那些想知道我是如何克服这一点的人。我做了一些 hack 的东西。

在我的项目中，我创建了一个名为 @types 的文件夹并将其添加到 tsconfig.json 以从中查找所有需要的类型。所以看起来有点像这样-

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

在其中我创建了一个名为 alltypes.d.ts 的文件。从中找出未知的类型。所以对我来说，这些是未知类型，我在那里添加了它。

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

所以现在打字稿不再抱怨找不到类型了。 :) 现在赢得胜利:)

【讨论】：

我错过了关于它在单独文件中的部分。似乎将这些 declare 语句放在一个名为 index.d.ts 的文件中为我修复了它。我不必触摸 typeRoots。
这很好用，但在将require 用于图像等其他内容时会导致问题。基本上，它只是不允许您将require 用于任何事情。
此解决方案不再适用于最新的 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.
还有一点值得一提：根据源的位置，您可能还需要将“../types”添加到“包含”数组中
我对@987654330@ 有疑问，创建了@types 文件夹并执行了上述所有步骤。仍然出现同样的错误。

【解决方案9】：

在某些情况下，某些依赖项没有类型，而 ts 会强制您为此包含类型。有一种解决方法可以解决此问题，即改用 javascript。

例如

import {Charts} from "react-charts"; //error: 找不到模块“react-charts”的声明文件。

解决方法：const ReactChart = require("react-charts"); //没有错误

【讨论】：

可以在ts文件中写js。它不会显示任何错误。毕竟最后只编译成javascript。

【解决方案10】：

只需为 react 安装必要的类型，它应该可以解决错误。

如果你使用的是纱线：

yarn add @types/react @types/react-dom @types/react-router-dom -D

如果您使用的是 npm：

npm install @types/react @types/react-dom @types/react-router-dom --save-dev

【讨论】：

谢谢。这对我有用。令人惊讶的是，我必须这样做，因为我使用命令 npx create-react-app react-quiz --template typescript 创建了反应应用程序，我认为这足以处理所有依赖项

【解决方案11】：

费了好大劲才搞定的在反应应用程序中 src 文件夹中会有一个 react-app-env.d.ts 文件只需在那里声明模块

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

【讨论】：

【解决方案12】：

找不到模块“react/jsx-runtime”的声明文件

如果有人遇到此错误，那么您会惊讶地发现，在使用 create-react-app 创建 React 应用程序时，它仅在 package.json 中显示 @types/react。但是，如果您在 node_modules/@types 文件夹内查看，您将找不到任何 react 文件夹。

解决方案是完全清除 node_modules 文件夹并重新安装 - npm install 或者可以单独安装模块 - npm install @types/react。

【讨论】：

完全解决问题的最相关答案，谢谢！
酷！天呐！ npm install -D @types/reactIMO 会更好
@tropikan4 是的，但谁知道将来是否像@types/react 一样，其他模块也缺席了，那么我们可以使用npm install

【解决方案13】：

如果您正在使用的模块没有@types/<package>，您可以通过在上方添加// @ts-ignore 评论来轻松规避问题，即

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

或者，您可以创建缺少的@types/<package> 如下：

declaration files publishing

DefinitelyTyped how can i contribute

【讨论】：

这个包还没有@types 可用顺便说一句。在 repo 上创建了一个问题...github.com/geelen/react-snapshot/issues/131
2022 年：Do not use "@ts-ignore" because it alters compilation errors

【解决方案14】：

尝试添加到 tsconfig.json 文件："noImplicitAny": false 为我工作

【讨论】：

这样做基本上是在禁用 TypeScript 提供的所有优点。为什么不直接使用常规 JS？

【解决方案15】：

在我的情况下，我的反应有问题，所以我开始做：

npm install @types/react

然后到

npm install @types/react-dom

这对我有用

【讨论】：

即使它们已经安装了，但重新运行这些命令解决了我的问题。
基本上，当您重新运行命令时，它会更新您现有的包。这就是问题得到解决的原因。
npm install @types/react 在我的情况下就足够了。谢谢！

【解决方案16】：

我遇到了同样的问题，但不一定与打字稿有关，所以我对这些不同的选项有点挣扎。我正在使用特定模块 react-portal-tooltip, 制作一个非常基本的 create-react-app，但出现类似错误：

找不到模块“react-portal-tooltip”的声明文件。 '/node_modules/react-portal-tooltip/lib/index.js' 隐含了一个 'any' 类型。尝试npm install @types/react-portal-tooltip（如果存在）或添加包含declare module 'react-portal-tooltip';ts(7016) 的新声明（.d.ts）文件

我首先尝试了很多步骤 - 添加各种 .d.ts 文件，各种 npm 安装。

但最终对我有用的是touch src/declare_modules.d.ts 然后在src/declare_modules.d.ts:

declare module "react-portal-tooltip";

在src/App.js:

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

我在不同的位置使用这个通用的“声明模块”策略（我非常初学者）有点挣扎，所以我认为这将适用于不同的选项，但我包含了对我有用的路径。

我最初认为import './declare_modules.d.ts' 是必要的。虽然现在好像不是！但我包括了这一步，以防它帮助某人。

这是我的第一个 stackoverflow 答案，所以我为这里分散的过程道歉，希望它仍然有帮助！ :)

【讨论】：

这真的很简洁。谢谢你。继续努力！

【解决方案17】：

当我使用打字稿将react-router-dom 添加到新的 CRA 应用程序时，我遇到了这个问题。添加@types/react-router后，问题就解决了。

【讨论】：

安装这个后要做什么？

【解决方案18】：

您需要做的就是运行以下脚本。然后，删除/重新安装您要使用的模块。

npm install --save @types/react-redux

【讨论】：

似乎没有可用的@types/react-materialize

【解决方案19】：

效果很好

npm install @types/react-materialize

【讨论】：

react-materialize 中没有类型

【解决方案20】：

我对 react-redux 类型也有同样的问题。最简单的解决方案已添加到 tsconfig.json：

"noImplicitAny": false

示例：

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

【讨论】：

这在IntelliJ IDE 中效果很好，但自定义typeRoots 方法（这是公认的答案）甚至在VS Code IDE 中也有效
我认为这是一个 hack，虽然这解决了问题，但是这个问题是否有任何有效且永久的解决方案？
我认为这是解决这个问题的最佳方法，我认为 npm i 每个抛出错误的包都不可行
使用 typescript 在 VSC 上完美工作
这是一个非常糟糕的做法，因为 any 类型只是忽略了 Typescript linting。那么有什么意义呢？这是向普通 javascript 迈出的一步，而不是使用 Typescript。对我来说，以下答案解决了它，并且被认为更好：stackoverflow.com/questions/41462729/…

【解决方案21】：

对于我来说，问题是类型没有被添加到 devDependencies 下的 package.json 文件中来修复它我运行了npm install --save-dev @types/react-redux 注意--save-dev

【讨论】：

【解决方案22】：

我所做的是在项目文件夹目录中从 nodejs 命令提示符运行以下命令：

npm init
npm install -g webpack
npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev typescript awesome-typescript-loader source-map-loader
npm install ajv@^6.0.0
npm i react-html-id
通过添加代码将包（在节点模块中）导入App.js文件中：import UniqueId from 'react-html-id';

我完成了上述操作（尽管我已经安装了 npm）并且成功了！

【讨论】：

【解决方案23】：

一个更 hacky 的方法是在 boot.tsx 中添加这一行

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

与

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

在declare_modules.d.ts

它有效，但其他解决方案更好 IMO。

【讨论】：

【解决方案24】：

此外，如果您尝试使用的包具有自己的类型文件并且它已在 package.json 中列出，则此错误将得到修复@ 987654321@属性

像这样：

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

【讨论】：

【解决方案25】：

我遇到了类似的错误，但对我来说是react-router。通过为其安装类型来解决它。

npm install --save @types/react-router

错误：

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

如果您想在站点范围内禁用它，您可以改为编辑 tsconfig.json 并将 noImplicitAny 设置为 false。

【讨论】：

虽然目前还没有这样的@types/react-navigation-tabs 包，但仍然提到的"noImplicitAny": false, 确实禁用了它（我遇到这个问题是因为使用了 react-native init MyProject --template打字稿，至少我是这么认为的）?
或yarn add @types/react-router --dev
yarn add @types/react-router-dom 为我修复了使用 create-react-app 时的问题
最佳答案。 react-slick 有同样的问题，因为我的项目是一个 TypeScript 项目。修复npm i --save-dev @types/react-slick
我遇到了与jest-axe 类似的问题。通过安装@types/jest-axe解决。