Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when running npm start with react-scripts 3.3.1 after updating dependencies #8490

Closed
voxtex opened this issue Feb 15, 2020 · 15 comments
Closed

Comments

@voxtex
Copy link

voxtex commented Feb 15, 2020

Describe the bug

Latest version of react-dev-utils breaks compatibility with old react-scripts.

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

n/a

Steps to reproduce

npx create-react-app bug-test then npm install react-scripts@3.3.1 then npm start.

Expected behavior

Runs webpack-dev-server and watches and compiles files.

Actual behavior

Throws an exception when accessing the page.

The latest version of react-scripts invokes noopServiceWorkerMiddleware with a path, while the previous version did not. This breaks the watch command since the middleware is now joining on undefined, throwing an exception.

This is because react-scripts@3.3.1 pulls in react-dev-utils@10.2.0 since it is versioned with a caret.

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at validateString (internal/validators.js:125:11)
at Object.join (path.js:1147:7)
at noopServiceWorkerMiddleware (/Users/*/projects/bug-test/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)

Reproducible demo

Can make one if needed.

@soulchainer
Copy link

Same error here. I was going crazy, thinking I did something bad in my config or stuff, till I finally check issues here.

@zackerydev
Copy link

I saw the same today as well, seems to be fixed on 3.4.0.

Looks maybe related to projects that have completely removed the service worker file.

Reproduced here:
https://github.com/zgriesinger/cra-error-example

@voxtex
Copy link
Author

voxtex commented Feb 15, 2020

Yes upgrading to 3.4.0 fixes it, as does pinning react-dev-utils to previous version. However all projects running react-scripts 3.3.* without dependencies lock (or after npm update) will be broken unless react-dev-utils is fixed to handle the undefined argument. It isn't a hassle for me, really appreciate all the good work in CRA, just helping those that encounter the error.

@bploetz
Copy link

bploetz commented Feb 15, 2020

Thanks for digging into this @voxtex . I was losing my mind all afternoon trying to figure out what I had changed that broke my app. "react-scripts": "^3.4.0" fixes this issue for me as well.

@hkmekala
Copy link

Yes... Upgrading to 3.4.0 Fixes the issue... Thank you @voxtex

EthanArmbrust pushed a commit to cse442-at-ub/cse442-semester-project-blood-donaters that referenced this issue Feb 17, 2020
sabrina-s added a commit to sabrina-s/furryfriendfinder that referenced this issue Feb 18, 2020
The error:
```
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. "Received type undefined"
```

The fix:
Upgrade react-scripts to 3.4.0

Reference:
facebook/create-react-app#8490
@ianschmitz
Copy link
Contributor

Closing as it was fixed in 3.4.0. Thanks for the patience folks!

@jamesplease
Copy link

Just as an FYI: updating to 3.4.0 may not be a simple upgrade-the-version-and-everything-works if:

  • your project uses a router
  • you don't host your project on the root

due to how PUBLIC_URL is now respected in development mode.

(to be clear: I love 3.4.0 and am so thankful that this feature was added! I just want folks to be aware that it may require some code changes on their end for it to work when devving locally)

@robicano22
Copy link

@jamesplease Any way you could elaborate on these two bullet points? I'm working on an interview assessment right now where the provided boilerplate renders this error to the browser. I've updated my package.json with v3.4.0 and updated the yarn.lock to be in sync, however I still get the error when rebuilding the docker-compose.

Some of the containerization is a bit over my head, but I'm trying to debug it myself before going to my contact at the company.

@ogg130
Copy link

ogg130 commented Feb 21, 2020

I saw the same today as well, seems to be fixed on 3.4.0.

Looks maybe related to projects that have completely removed the service worker file.

Reproduced here:
https://github.com/zgriesinger/cra-error-example

Worked for me!

@jamesplease
Copy link

jamesplease commented Feb 21, 2020

@robicano22 sure, I can elaborate, although what I described won't cause the same error in the opening post of this issue. If you're still seeing that error, you may need to be sure that react-scripts actually updated. If you run npm ls react-scripts from the project root, what version does it display? If it's not showing 3.4.0 you may need to run npm install.

Anyway, let me elaborate on what I meant:

Let's assume you're on 3.3.1, your project uses React Router, and you host your app at http://website.com/my-react-app. Accordingly, you have a .env file with:

PUBLIC_URL=http://website.com/my-react-app

With this setup, your app is located at /my-react-app in production, but when developing locally, your app is at the root, /, because react-scripts@3.3.1 runs projects at localhost:3000.

Because of this difference between the prod and dev, you likely have some kind of conditional statement in your code to set the basename of your router. Perhaps it looks something like this:

const basename = process.env.NODE_ENV === 'production' ? '/my-react-app' : '/';

return (
  <Router basename={basename}>
     <App/>
  </Router>
);

You may also use a similar conditional to reference assets in your app. All of these conditionals will break when updating to react-scripts@3.4.0, which is what I was referring to in my issue.


As a heads up, even with react-scripts@3.4.0 you may still need to fork due to the inconsistency in how PUBLIC_URL behaves. In dev mode it'll be:

/my-react-app

while in prod it will be:

http://website.com/my-react-app

and these two values won't always be compatible with every API. i.e.; basename in React Router doesn't support the prod PUBLIC_URL, so you must modify it. This code hasn't been completely tested, but it's my first pass at handling PUBLIC_URL in both envs:

const publicUrl = process.env.PUBLIC_URL ?? '/';
const hasProtocol = /^http/.test(publicUrl);

let historyBasename;
if (hasProtocol) {
  // NOTE: you don't need to change "placeholder.com" here. It's literally
  // a placeholder, and works for every project.
  const url = new URL(publicUrl, 'http://placeholder.com');
  historyBasename = url.pathname;
} else {
  historyBasename = publicUrl;
}

console.log('You can pass this into React Router now', historyBasename);

@robicano22
Copy link

@jamesplease you're a god sent, thank you!

helloworld added a commit to dagster-io/dagster that referenced this issue Feb 25, 2020
Summary:
Loading dagit would cause the following error:

```
The "path" argument must be of type string. Received undefined
```

This was an issue in `react-scripts`. Upgrading to 3.4.0 resolves the error

Context:
facebook/create-react-app#8490
facebook/create-react-app#8519

Test Plan: `yarn install`, run dagit

Reviewers: prha, alangenfeld, catherinewu, schrockn

Reviewed By: prha, schrockn

Subscribers: schrockn

Differential Revision: https://dagster.phacility.com/D2111
stevehobbsdev pushed a commit to auth0-samples/auth0-react-samples that referenced this issue Feb 25, 2020
This is because of a breaking dependency in react-dev-utils@10.2.0

Context: facebook/create-react-app#8490
@satwik-mandapati
Copy link

Encountered the issue that @jamesplease mentioned as I was using a router! Just setting PUBLIC_URL = / in my .env.development.local file fixed it for me when running locally.

@naftis
Copy link

naftis commented Feb 25, 2020

If you aren't able to upgrade react-scripts for any reason, you can force a working resolution for react-dev-utils:
package.json

"resolutions": {
  "react-dev-utils": "10.0.0"
}

@qld-cf
Copy link

qld-cf commented Feb 27, 2020

If you aren't able to upgrade react-scripts for any reason, you can force a working resolution for react-dev-utils:
package.json

"resolutions": {
  "react-dev-utils": "10.0.0"
}

it's work

@nimrafatima2917
Copy link

Thanks for digging into this @voxtex . I was losing my mind all afternoon trying to figure out what I had changed that broke my app. "react-scripts": "^3.4.0" fixes this issue for me as well.

Hey im having the same issue could you please tell me what is going wrong

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

wisebr added a commit to wisebr/react-formgen that referenced this issue Mar 4, 2020
@lock lock bot locked and limited conversation to collaborators Mar 10, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests