フロント環境を簡単に作成できるCodeSandboxというオンラインIDEで環境構築したのですが、ローカルやGitpodに上げた時にエラーで動かなかったので解消した時のメモ。
ちなみに、CodeSandboxで実行したときは普通に動いてました。
環境
- CodeSandbox
- React Typescript
解決方法
react-scripts: 3.4.0以上にする。
※ CodeSandboxのデフォルトバージョン
react-scripts: 3.3.0
エラーコード
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (internal/validators.js:120:11) at Object.join (path.js:1039:7) at noopServiceWorkerMiddleware (/workspace/recaptcha-practice/frontend/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26) at Layer.handle [as handle_request] (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/index.js:317:13) at /workspace/recaptcha-practice/frontend/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/index.js:335:12) at next (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/index.js:275:10) at launchEditorMiddleware (/workspace/recaptcha-practice/frontend/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7) at Layer.handle [as handle_request] (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/index.js:317:13) at /workspace/recaptcha-practice/frontend/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/index.js:335:12) at next (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/index.js:275:10) at handleWebpackInternalMiddleware (/workspace/recaptcha-practice/frontend/node_modules/react-dev-utils/evalSourceMapMiddleware.js:42:7) at Layer.handle [as handle_request] (/workspace/recaptcha-practice/frontend/node_modules/express/lib/router/layer.js:95:5)
地味に困ったこと
StackOverflowとか読んでましたが、英語を正確に読めなくて、react-scriptsのバージョンをこの間にすれば問題ないと思ってました。
from ~ to って 3.3.0から3.4.1に変更しなさい、ってことだったんですね…。
from 3.3.0 to 3.4.0