わたすけのへや
BlogProfileAbout this site
記事一覧ページへ移動

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

Reactプログラミング
2024-10-16
2020-12-19

わたすけです。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 行目を見てみると、こんな感じ。

// [email protected] 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系】 #JavaScript - Qiita
【webpack-dev-server】Cannot find module 'webpack-cli/bin/config-yargs'【webpack-cli4系】 #JavaScript - Qiitahttps://qiita.com/whiteraccoon/items/f0675297fce333ac9474##記事の対象者webpack-cli 4.xx.xx系をnpm installして、Error: Cannot find module 'webpack-cli/bin/config-yarg…

つまり、「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 側に近づけてみたいなと思います。

Comments

Powered by Giscus