Typescript 反应 - 找不到模块''react-materialize' 的声明文件。 'path/to/module-name.js' 隐式具有任何类型

Question

我正在尝试从 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

Answer 1

对于那些想知道我是如何克服这个问题的人。我做了一些骇人听闻的事情。

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

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

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

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

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

Answer 2

我有一个类似的错误，但对我来说是 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。

Answer 3

此外，如果您尝试使用的包有自己的类型文件并且它在[中列出，则此错误会得到修复=20=]typings属性

像这样：

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

Answer 4

一个更 hacky 的方法是添加，例如，在 boot.tsx 行

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

和

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

在declare_modules.d.ts

它有效，但我认为其他解决方案更好。

Answer 5

您需要做的就是运行下面的脚本。然后，remove/re-install 您要使用的模块。

npm install --save @types/react-redux

Answer 6

我所做的是运行在项目文件夹目录中从 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）并且成功了！

Answer 7

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

Answer 8

我在使用 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"]
}

Answer 9

工作正常

npm install @types/react-materialize

Answer 10

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

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

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

declaration files publishing

DefinitelyTyped how can i contribute

Answer 11

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

Answer 12

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

Could not find a declaration file for module 'react-portal-tooltip'. '/node_modules/react-portal-tooltip/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-portal-tooltip if it exists or add a new declaration (.d.ts) file containing declare module 'react-portal-tooltip';ts(7016)

我首先尝试了很多步骤 - 添加各种 .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'

我在不同的位置遇到了一些困难，无法使用这种通用的 'declare module' 策略（我是一个初学者）所以我认为这将适用于不同的选项，但我包含了对我有用的路径.

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

这是我在 Whosebug 上的第一个回答，所以对于这里分散的过程我深表歉意，希望它仍然有帮助！ :)

Answer 13

就我而言，我的反应有问题，所以我开始做：

npm install @types/react

然后到

npm install @types/react-dom

这对我有用

Answer 14

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

Answer 15

Could not find a declaration file for module 'react/jsx-runtime'

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

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

Answer 16

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

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

Answer 17

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

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

2 - 输入 src folder

3 - 创建 global.d.ts 文件

4 - 在其中声明模块，如：

declare module 'module-name';

我之前回答过，很好

Answer 18

只需安装 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

Answer 19

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

例如

import {Charts} from "react-charts"; //错误：找不到模块 'react-charts'.

的声明文件

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

Answer 20

与 react-router-dom 有同样的错误。

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

所以我在 npmjs.com 上搜索了一个名为 @types/react-router-dom 的包，如果它不是你正在寻找的 react-router-dom 然后用你的 untyped 替换 react-router-dom模块。

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

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

一旦完成，运行 yarn install

然后它应该摇滚！

Answer 21

如果你在 react npm install --save @types/reactnpm install --save @types/react

时遇到问题

Answer 22

喜欢这个：

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

此外，如果您尝试使用的包有自己的类型文件并且它在[中列出，则此错误会得到修复=20=]typings属性

Answer 23

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

Solution--->

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

Answer 24

尝试 npm i --save-dev @types/react-materialize（如果存在）或添加包含 declare module 'react-materialize';

的新声明 (.d.ts) 文件

Answer 25

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

Typescript 反应 - 找不到模块''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 type

reactjs

webpack

webpack-2

示例：