きり丸の技術日記

技術検証したり、資格等をここに残していきます。

【IDE】CodeSandboxで構築したReact + ts環境がローカルで動かなかった

フロント環境を簡単に作成できる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