インストールを行ったのにreact-hook-formが使えない

フォームにバリデーションをつけたいので、react-hook-formを導入したいのですが、
react-hook-formをインストールしても、コンソールでエラーが出てしまいます。

調査しても、「インストールすれば使える」という答えしま見つからず・・・

エラーの原因がわからず止まってしまっています何かアドバイスいただけるとありがたいです。

エラー内容

console
1Form.js:1 Uncaught Error: Cannot find module 'react-hook-form'
2    at webpackMissingModule (Form.js:1)
3    at Module../src/sample/components/Form.js (Form.js:1)
4    at __webpack_require__ (bootstrap:19)
5    at Module../src/sample/components/Content.js (Content.js:1)
6    at __webpack_require__ (bootstrap:19)
7    at Module../src/sample/App.js (sample.bundle.js:11965)
8    at __webpack_require__ (bootstrap:19)
9    at Module../src/sample/containers/App.js (App.js:1)
10    at __webpack_require__ (bootstrap:19)
11    at Module../src/sample/index.js (index.js:1)
12webpackMissingModule @ Form.js:1
13./src/sample/components/Form.js @ Form.js:1
14__webpack_require__ @ bootstrap:19
15./src/sample/components/Content.js @ Content.js:1
16__webpack_require__ @ bootstrap:19
17./src/sample/App.js @ sample.bundle.js:11965
18__webpack_require__ @ bootstrap:19
19./src/sample/containers/App.js @ App.js:1
20__webpack_require__ @ bootstrap:19
21./src/sample/index.js @ index.js:1
22__webpack_require__ @ bootstrap:19
23(anonymous) @ bootstrap:83
24(anonymous) @ bootstrap:83

Form.js
1import React from 'react';
2import {useForm} from 'react-hook-form';
3
4const Form = (props) => {
5    return (
6        <form>
7            <div className="form-group">
8                <label className="pt-2">ID</label>
9                <input id="1"
10                    type="text"
11                    className="form-control"
12                    value={props.id}
13                    onChange={(e) => props.onChangeId(e)}
14                />
15                <label className="pt-2">Name</label>
16                <input id="2"
17                    type="text"
18                    className="form-control"
19                    value={props.name}
20                    onChange={
21                        (e) => props.onChangeName(e)
22                    }
23                />
24            </div>
25        </form>
26    )
27};
28export default Form;

hoshi-takanori

2020/12/23 05:48

react-hook-form はどうやってインストールして、どうやってビルドしてますか？また、import の際は import { useForm } from "react-hook-form"; のように {} が必要なようです。

yuki-o0413

2020/12/23 06:10 編集

ご指摘ありがとうございます。{}を入れてみました。エラー文は同様でした。インストールはコマンド「npm install react-hook-form react-bootstrap bootstrap」にて行いました。ビルドは特に何もやっていませんでした。

hoshi-takanori

2020/12/23 09:16

ビルドというか、どうやってプロジェクトを作って、どうやって動かしてるか、ですね。 create-react-app をお使いでしょうか？こちらで試したところ、とりあえず import は成功しました。

yuki-o0413

2020/12/23 10:45

create-react-app は使っていません。 webpackに関するパッケージをインストールを行っていき、ビルドしています。以下のサイトを参考にして行っています。 https://qiita.com/TsutomuNakamura/items/72d8cf9f07a5a30be048

hoshi-takanori

2020/12/23 20:33

参考にしたサイトの手順に従って webpack を導入して、ご質問文中のソースをビルドしてみたところ、webpack --mode development は通りましたが、webpack-dev-server を起動しようとすると別のエラーが出ました。私の問題は webpack-dev-server のバージョンによるものっぽいですが、質問者さんのエラーの原因はよく分かりませんね…。

yuki-o0413

2020/12/23 23:59

create-react-appを使ってビルドした場合、importができるということはわかったので、大きな収穫です。みていただき、ありがとうございました！