search

kdhttps / appauth-react

Appauth JS integration with React :dart:
12 stars 8 forks source link

Issue: react-scripts 3.3.0 prevents React App from loading #2

Open TerrenceMM2 opened 2 years ago

TerrenceMM2 commented 2 years ago

Expected Behavior

  1. Clone app and install dependencies.
  2. Plug in variables into environment.js.
  3. Run npm start.
  4. View "Home" page and test configurations.

Actual Bahavior

After running npm start, the following error message is displayed:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:124:11)
    at Object.join (path.js:1148:7)
    at noopServiceWorkerMiddleware (/Users/hqu5813/Desktop/appauth-react/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:317:13)
    at /Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:275:10)
    at launchEditorMiddleware (/Users/hqu5813/Desktop/appauth-react/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:317:13)
    at /Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/index.js:275:10)
    at handleWebpackInternalMiddleware (/Users/hqu5813/Desktop/appauth-react/node_modules/react-dev-utils/evalSourceMapMiddleware.js:42:7)
    at Layer.handle [as handle_request] (/Users/hqu5813/Desktop/appauth-react/node_modules/express/lib/router/layer.js:95:5)

The App.js file already passes parameters to the path attribute as a string.

<div>
    <Route exact path="/" component={Home} />
    <Route exact path="/profile" component={Profile} />
    <Route exact path="/callback" component={Callback} />
</div>

Possible Fix

According 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.

Steps Taken to Resolve Issue

  1. rm -rf node_modules.
  2. Bump react-scripts version in package.json: 
    "dependencies": {
    . . .
    "react-scripts": "3.4.0" // Edit from "3.3.0" to 3.4.0.
},
  3. Run npm i to reinstall dependencies.
  4. Run npm start.
dawitadmassu commented 2 years ago

Thanks @TerrenceMM2
it is works when i change react-scripts version to 3.4.0.