René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Issue: react-scripts 3.3.0 prevents React App from loading","articleBody":"# Expected Behavior\r\n1. Clone app and install dependencies.\r\n2. Plug in variables into `environment.js`.\r\n3. Run `npm start`.\r\n4. View \"Home\" page and test configurations.\r\n\r\n# Actual Bahavior\r\nAfter running `npm start`, the following error message is displayed:\r\n```\r\nTypeError [ERR_INVALID_ARG_TYPE]: The \"path\" argument must be of type string. Received undefined\r\n    at validateString (internal/validators.js:124:11)\r\n    at Object.join (path.js:1148:7)\r\n    at noopServiceWorkerMiddleware (/Users/hqu5813/Desktop/appauth-react/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)\r\n    at Layer.handle [as handle_request] (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/layer.js:95:5)\r\n    at trim_prefix (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:317:13)\r\n    at /Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:284:7\r\n    at Function.process_params (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:335:12)\r\n    at next (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:275:10)\r\n    at launchEditorMiddleware (/Users/hqu5813/Desktop/appauth-react/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)\r\n    at Layer.handle [as handle_request] (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/layer.js:95:5)\r\n    at trim_prefix (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:317:13)\r\n    at /Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:284:7\r\n    at Function.process_params (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:335:12)\r\n    at next (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:275:10)\r\n    at handleWebpackInternalMiddleware (/Users/hqu5813/Desktop/appauth-react/node_modules/react-dev-utils/evalSourceMapMiddleware.js:42:7)\r\n    at Layer.handle [as handle_request] (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/layer.js:95:5)\r\n```\r\nThe `App.js` file already passes parameters to the `path` attribute as a string.\r\n```\r\n\u003cdiv\u003e\r\n    \u003cRoute exact path=\"/\" component={Home} /\u003e\r\n    \u003cRoute exact path=\"/profile\" component={Profile} /\u003e\r\n    \u003cRoute exact path=\"/callback\" component={Callback} /\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n# Possible Fix\r\nAccording to a StackOverflow article - https://stackoverflow.com/questions/60234640/typeerror-err-invalid-arg-type-the-path-argument-must-be-of-type-string-re - the error is caused because of an out-of-date version of `react-scripts`.\r\n\r\n# Steps Taken to Resolve Issue\r\n1. `rm -rf node_modules`.\r\n2. Bump `react-scripts` version in `package.json`: \r\n```\r\n    \"dependencies\": {\r\n        . . .\r\n        \"react-scripts\": \"3.4.0\" // Edit from \"3.3.0\" to 3.4.0.\r\n    },\r\n```\r\n3. Run `npm i` to reinstall dependencies.\r\n4. Run `npm start`.","author":{"url":"https://github.com/TerrenceMM2","@type":"Person","name":"TerrenceMM2"},"datePublished":"2021-08-13T19:26:46.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/2/appauth-react/issues/2"}