create-react-appを使わずにReact環境構築をしようと苦戦した話

ただのブログ

わたすけです。Webなにもわかりません。

タイトル通り、Reactの環境構築を、create-react-app（以降、craと表記）なしで手動で構築しようとして、いろいろ躓いた話です。

今回はこのサイトを頼りに進めたのですが、このサイト自体2019/08/10のものであり、色々と古い情報が混ざっていて大変でした。

今回は詰まった部分と、その対処方法を（わかっていれば）書いておきます。

create-react-appを使わないのはなぜ

このページ見ている人はエラーの対処法が知りたい人が多いと思うのでそれぞれcraに頼らないで環境構築する理由が各々あると思います。

自分はこういう機能に頼っていると細かい仕様を見落としてしまう人間なので（あと自分好みのディレクトリ構成にしたかったので）、手動で構築しました。

第一の関門 -「code: ‘MODULE_NOT_FOUND’」

Require stack:
- /home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) {
code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]

エラー文を頼りに、「node_modules/webpack-dev-server/bin/webpack-dev-server.js」の65行目を見てみると、こんな感じ。

// webpack-cli@3.3 path : 'webpack-cli/bin/config/config-yargs'
let configYargsPath;
try {
  require.resolve('webpack-cli/bin/config/config-yargs');
  configYargsPath = 'webpack-cli/bin/config/config-yargs';
} catch (e) {
  configYargsPath = 'webpack-cli/bin/config-yargs';
}
// eslint-disable-next-line import/no-extraneous-dependencies
// eslint-disable-next-line import/no-dynamic-require
require(configYargsPath)(yargs);

おや？

configYargsPathに代入されているであろう「webpack-cli/bin」を覗きますが、configフォルダもconfig-yargsも見当たらない。

調べてみると、このサイトに辿り着きました。

【webpack-dev-server】Cannot find module 'webpack-cli/bin/config-yargs'【webpack-cli4系】 - Qiita
##記事の対象者webpack-cli 4.xx.xx系をnpm installして、Error: Cannot find module 'webpack-cli/bin/config-yarg…
qiita.com

つまり、「webpack-dev-server」コマンドは過去のものであり（？）、今は「webpack serve」でどうにかしろ、ということらしいですね。

package.jsonのscripts部分を編集し、「webpack-dev-server」を「webpack serve」に置き換えることでとりあえずこれは解決しました。

第二の関門 – 「Invalid configuration object(略)」

赤文字で、大量に「invalid configuration object. webpack has been initialized using a configuration object that does not match the api schema」みたいなエラーが出てきました。

これの原因はwebpack.config.jsonにありました。「extensions」を「extentions」と書いてしまい、’.tsx’と書かないといけないのにピリオドを忘れていたり、rules: [{test～}]のような括弧を忘れていたり・・・

一度エラーと設定ファイルを確認したら行けると思います。

第三の関門 – 「Module not found」

MODULE_NOT_FOUNDを乗り越えたら待っていたのはModule not foundでした。なんですかこれは？？？

前述のようにpackage.jsonを編集し、npm startコマンドを実行すると、webpack serveが動いてくれます。
しかし思うように動いてはくれず、大量の「Module not found: Error: Can’t resolve～」エラー。トドメと言わんばかりに、出力の最後には「Failed to compile」の1文・・・
localhost:3000を見ても真っ白なページしか見えません。

ERROR in ./node_modules/react-dom/cjs/react-dom.development.js 17:14-38
Module not found: Error: Can't resolve 'object-assign' in '/home/watasuke/program/web/myself-env/node_modules/react-dom/cjs'
 @ ./node_modules/react-dom/index.js 37:2-60
 @ ./src/index.tsx 7:34-54

ERROR in ./node_modules/react-dom/cjs/react-dom.development.js 19:14-42
Module not found: Error: Can't resolve 'scheduler/tracing' in '/home/watasuke/program/web/myself-env/node_modules/react-dom/cjs'
 @ ./node_modules/react-dom/index.js 37:2-60
 @ ./src/index.tsx 7:34-54

ERROR in ./node_modules/react/cjs/react.development.js 16:14-38
Module not found: Error: Can't resolve 'object-assign' in '/home/watasuke/program/web/myself-env/node_modules/react/cjs'
 @ ./node_modules/react/index.js 6:2-56
 @ ./src/index.tsx 6:30-46

ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:3000 6:16-37
Module not found: Error: Can't resolve 'strip-ansi' in '/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:3000 8:13-32
Module not found: Error: Can't resolve './socket' in '/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:3000 10:14-34
Module not found: Error: Can't resolve './overlay' in '/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:3000 12:15-37
Module not found: Error: Can't resolve './utils/log' in '/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:3000 16:18-48
Module not found: Error: Can't resolve './utils/sendMessage' in '/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:3000 18:16-44
Module not found: Error: Can't resolve './utils/reloadApp' in '/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:3000 20:22-56
Module not found: Error: Can't resolve './utils/createSocketUrl' in '/home/watasuke/program/web/myself-env/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack/hot/dev-server.js 11:11-27
Module not found: Error: Can't resolve './log' in '/home/watasuke/program/web/myself-env/node_modules/webpack/hot'

ERROR in ./node_modules/webpack/hot/dev-server.js 30:4-33
Module not found: Error: Can't resolve './log-apply-result' in '/home/watasuke/program/web/myself-env/node_modules/webpack/hot'

ERROR in ./node_modules/webpack/hot/dev-server.js 50:18-38
Module not found: Error: Can't resolve './emitter' in '/home/watasuke/program/web/myself-env/node_modules/webpack/hot'

webpack 5.11.0 compiled with 13 errors in 2558 ms
ℹ ｢wdm｣: Failed to compile.

結論から言うと、今回JavaScript使わないからいらんでしょ！と、独断でbabel-loaderを始めとしたJavaScript読み込み用の設定をやっていなかったのが原因でした。こんなこと・・・ある・・・？

原因はまさしく自分の圧倒的知識不足といってもいいでしょう。普通に考えてモジュールにJavaScript使われてる可能性もあるんだからまあ書くべきだったのだろうなと思っています（原因と認識は違う可能性があります）。

おわりに

ということで、なんとか環境構築が出来ました。知識がないうちは本当に参考サイトを丸写ししたほうが良いような気がしてきました・・・。

実はこの前にとりあえずReactの勉強を始めるためにcraに頼っていました。craと今回の方法ではホットリロードの挙動が若干違うな～と感じます。cra側は変更が一瞬で変更されるのに対し、今回の方法ではページ自体がリロードされてホットリロードが行われているっぽいですね。このあたりの挙動はcra側に近づけてみたいなと思います。

コメント

タイトルとURLをコピーしました