Typescriptreact-モジュール '' react-materialize 'の宣言ファイルが見つかりませんでした。'path / to /module-name.js'は暗黙的に任意のタイプを持っています

109

私は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.

これに対する解決策。このimportステートメントを解決してwebpackを操作する方法がts-loaderわかりません。

index.js反応-マテリアライズルックスのはこれを気に入っています。しかし、自分のファイルにモジュールをインポートするためにこれを解決する方法..

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

reactjs  webpack  webpack-2 
— 喜び
ソース
2
パッケージのタイピング/タイプをインストールする必要があります（npm install @ types / react-materialize）。ただし、これはまだ存在していないようですので、自分で作成する必要があるかもしれません。この記事は役に立ちました-templecoding.com/blog/2016/03/31/…–
— T Mitchell
@T Mitchellは、私たちが見逃しているあらゆる種類の型を意味します。これがこれらの型を作成しないと、webpackをコンパイルすることはできません。何らかの方法があるはずですか？
— ジョイ
2
— T Mitchell
これは私には少し回避策のように思えます。
— SuperUberDuper 2017年
— MichaelFreidgeim19年

回答:

81

同様のエラーが発生しましたが、私にとってはそうでした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。

— オグラス
ソース
1
そのような@タイプ/反応-ナビゲーションタブが言及した今でも、まだパッケージ化していない、現在もあるが"noImplicitAny": false,、それを無効にしなかったが、（私が原因で使用するのでは、この問題を持って反応し、ネイティブのinit MyProjectと--template typescriptです、私は少なくともそう思う）👍
— トップ-マスター
1
またはyarn add @types/react-router --dev
— OmarTariq20年
65

どうやってこれを克服したのか知りたい人のために。私はハックのようなものをしました。

プロジェクト内にというフォルダーを作成し、@typestsconfig.jsonに追加して、そこから必要なすべてのタイプを検索しました。だからそれはこのように見えます-

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

その中に、というファイルを作成しましたalltypes.d.ts。それから未知のタイプを見つけるために。だから私にとってこれらは未知のタイプであり、私はそれをあそこに追加しました。

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

だから今、typescriptはもう見つからないタイプについて文句を言わなかった。:)今勝つ勝つ状況:)

— 喜び
ソース
3
別のファイルにあるという部分を見逃しました。それらのdeclareステートメントをindex.d.tsfixedという名前のファイルに入れるようです。typeRootsに触れる必要はありませんでした。
— スコッティワゴナー2017年
これは問題なく機能しますが、require 画像などの他のものに使用すると問題が発生します。基本的に、それはあなたがrequire何かのために使うことを許さないだけです。
— Dhruvdutt Jadhav 2017
1
このソリューションは、最新の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.
— FlavourScape 2017
2
あなたの元の場所に応じて、あなたもあなたの配列『を含む』に「../types」を追加する必要があります言及も価値のあるもの
— netpoetica
1
react-countdown-clock作成された@typesフォルダに問題があり、上記のすべての手順を実行しました。それでも同じエラーが発生します。
— Jyothu
48

私は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"]
}
— ジャックコベック
ソース
これはIntelliJIDEでうまく機能しましたが、カスタムtypeRootsメソッド（受け入れられた答えです）はVS CodeIDEでも機能しました
— トップマスター
6
これは問題を解決しましたが、これはハックだと思いますが、この問題に対する有効で永続的な解決策はありますか？
— PardeepJain19年
これがこの問題の最善の解決策だと思います
— 。
33

@types/<package>使用しているモジュールがない場合は、// @ts-ignore上記のコメントを追加することで問題を簡単に回避できます。

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

または、不足している@types/<package>次のものを作成することもできます。

宣言ファイルの公開

DefinitelyTypedどのように貢献できますか

— マテハペトロヴィッチ
ソース
1
このパッケージには@typesまだ利用可能なものがありません。レポ上の問題を作成した... github.com/geelen/react-snapshot/issues/131
— doublejosh
21

私の場合、reactに問題があったので、次のことを始めました。

npm install @types/react

そして次に

npm install @types/react-dom

これは私のために働いた

— AlessandroASB
ソース
1
それらはすでにインストールされていても、それらのコマンドを再実行することで問題は解決しました。
— ヘリンジャー
基本的に、コマンドを再実行すると、既存のパッケージが更新されます。それが問題が解決された理由です。
— AnantLalchandani20年
7

以下のスクリプトを実行するだけです。次に、使用するモジュールを削除/再インストールします。

npm install --save @types/react-redux
— ツン
ソース
1
@タイプ/可能マテリアライズ反応があるように表示されません
— RonLugge
6

react-router-domtypescriptを使用して新しいCRAアプリに追加したときに、この問題が発生しました。追加した後@types/react-router、問題が修正されました。

— dkocich
ソース
これをインストールした後はどうすればよいですか？
— PardeepJain19年
5

私はこれと同じ問題を抱えていましたが、必ずしもタイプスクリプトに関連しているわけではないので、これらのさまざまなオプションに少し苦労しました。特定のモジュールを使用して非常に基本的なcreate-react-appを作成していますreact-portal-tooltip,が、同様のエラーが発生します。

モジュール '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'は必要だと思いました。今はそうではないようですが！しかし、それが誰かを助ける場合に備えて、私はステップを含めています。

これは私の最初のスタックオーバーフローの答えなので、ここに散在するプロセスについてお詫びし、それがまだ役に立ったことを願っています！:)

— シルビアパップ
ソース
2
これは本当にきちんとしていてシンプルです。ありがとうございました。良い仕事を続けてください！
— Cubelaster
4

また、このエラーは、使用しようとしているパッケージには、独自のタイプのファイル（複数可）、それをだしている場合は、固定されますと、それはそれをリストされていますpackage.jsonの 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
}
— ロイアート
ソース
3

よりハッキーな方法は、たとえば、boot.tsxに行を追加することです。

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

と

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

に declare_modules.d.ts

それは機能しますが、他のソリューションはより良いIMOです。

— ソレイユ-マシュープレヴォー
ソース
3

私がしたことは、プロジェクトフォルダディレクトリにいる間にnodejsコマンドプロンプトから次のコマンドを実行することでした。

  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. コードを追加して、App.jsファイルにパッケージ（ノードモジュール内）をインポートします。 import UniqueId from 'react-html-id';

私は上記を実行しました（すでにnpmをインストールしていましたが）、それは機能しました！

— naru123
ソース
1

モジュール 'react / jsx-runtime'の宣言ファイルが見つかりませんでした

誰かがこのエラーを抱えている場合、reactアプリを作成するときにcreate-react-app、でしか表示さ@types/reactれないことを知って驚かれることでしょうpackage.json。あなたが内部でチェックした場合でもnode_modules/@types、フォルダ、あなたは見つけることができませんよの任意のフォルダをreact。

解決策は、node_modulesフォルダを完全に消去して再インストールnpm installすることnpm install @types/reactです。または、個々のモジュールのインストールを行うこともできます。

— Germa Vinsmoke
ソース
0

私の場合のために問題が型が下package.jsonファイルに追加取得されていないということでしたdevDependencies私は走ったそれを修正するためにnpm install --save-dev @types/react-redux注意してください--save-dev

— JaphethOngeri-inkalimeva
ソース
0

tsconfig.jsonファイルに追加してみてください："noImplicitAny": false 私のために働いた

— ベクザト
ソース
1
これを行うことで、基本的にTypeScriptが提供するすべての機能を無効にします。通常のJSを使用しないのはなぜですか？
— MattRuwe20年
0

たくさんのトラブルの後でそれを手に入れましたreactアプリではsrcフォルダーにreact-app-env.d.tsファイルがありますモジュールを宣言するだけです

/// <reference types="react-scripts" />
declare module 'react-color/lib/components/alpha/AlphaPointer'
— チェタンジャイン
ソース
-2

正常に動作します 

npm install @types/react-materialize
— Arturas
ソース
3
-マテリアライズを反応させるためには種類がありません
— katzmopolitan
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.