Skip to content

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

Open
@TerrenceMM2

Description

@TerrenceMM2

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.
    },
  1. Run npm i to reinstall dependencies.
  2. Run npm start.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions