質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3249閲覧

React(TypeScript)でとあるパッケージの npm installができていない

wwwww

総合スコア41

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/10/26 17:20

編集2020/10/27 12:34

React(TypeScript)を使った開発をしています。
現状で以下エラーが表示されており、解消できていないため、ご質問させていただいた次第でございます。

Failed to compile Module not found: Can't resolve 'react-router-dom' in ~

上記エラー内容より、react-router-dom が正しくインストールされていないことに依るもの、と考え、
(済みの自己認識だったのですが、、再度)以下を実行すると、

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

以下(当該箇所全文)が帰ってきました。

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename ~\node_modules\webpack-dev-server\node_modules\fsevents' -> ~\node_modules\webpack-dev-server\node_modules.fsevents.DELETE' npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + @types/react-router-dom@5.1.6 added 1 package from 1 contributor, updated 1 package and audited 2011 packages in 10.634s 117 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

ERROR無く完了しましたため、再度ページ更新してみたのですが、上記から変わらず、でした。。

("fsevents"というライブラリ?に関する)WARN内容についても、package.json、package-lock.jsonに含まれておらず、このWARNが発生した理由も正しく認識できておりません。
(そもそもWARNは全て無視でよい旨のサイト記事なども散見され。。)

この場合、次に確認すべきことはどのようなことなのでしょうか?
ざっくりした質問にて恐縮ですが、ご回答いただけますと幸いでございます。
よろしくお願いいたします。※情報に不足等あれば、その旨ご教示ください。

追記

package.jsonは以下です。

{ "name": "hogehoge", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@testing-library/jest-dom": "^5.11.5", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.19.1", "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.6", "react": "^16.8.0", "react-router-dom": "^5.2.0", ※問題解決後 "react-dom": "^16.8.0", "react-scripts": "4.0.0", "typescript": "^4.0.3", "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuxki

2020/10/26 21:27

型定義ファイル( @types/react-router-dom)だけでなく、本体のreact-router-domはインストールしましたか?
Hogeike

2020/10/27 01:15

package.jsonも合わせて記載した方が良いと思います
wwwww

2020/10/27 12:08

@Hogeikeさん ありがとうございます! 本文中に追記いたしました。
wwwww

2020/10/27 12:32

@yuxkiさん ありがとうございます! ご指摘の通り、本体のreact-router-domが未インストールでした。。不勉強にてすいません。。 そのうえで再度、npm startしたところ、(また別のコンパイルエラーが出てしまったのですが…) 当問題は解決しましたため、この質問はクローズとさせていただきます! お忙しいところ誠にありがとうございました!
yuxki

2020/10/27 13:29

解決して良かったです!
guest

回答1

0

自己解決

「質問への追記・修正の依頼」でいただいておりますように、当該パッケージのinstall漏れに依るものでした。。
…型定義ファイル(@types/~)のinstallとは別に本体も別途installが必要なことを認識しておらず…不勉強にてお手数をおかけいたしましたm(_ _)m

いずれもinstall(※)の上、問題なく当コンパイルエラーが解消しております。
※以下2つ
・npm install --save react-router-dom
・npm install --save @types/react-router-dom
「質問への追記・修正の依頼」にご記載をいただきました方々、ありがとうございました。

投稿2020/10/27 12:38

編集2020/10/27 12:41
wwwww

総合スコア41

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問