Create-react-app: Error when running npm start with react-scripts 3.3.1 after updating dependencies

[voxtex]

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 [email protected] 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 [email protected] pulls in [email protected] 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]

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

[zgriesinger]

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]

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]

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]

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

[ianschmitz]

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

[jamesplease]

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]

@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]

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]

@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 [email protected] 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 [email protected], which is what I was referring to in my issue.

---

As a heads up, even with [email protected] 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]

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

[satwik-mandapati]

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]

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]

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]

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_modulesreact-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_modulesreact-dev-utilserrorOverlayMiddleware.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_modulesreact-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)