Create-react-app: TypeError [ERR_INVALID_ARG_TYPE]

[exactchange]

Started getting TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined in multiple CRA projects after dependency updates today.

Updating react-scripts solved the issue in my unejected apps, but I still have no solution for ejected ones. I've tried updating react-dev-utils manually but am still seeing it on yarn start - anyone with ejected CRAs have this issue?

---

_Edit_: Downgrading react-dev-utils to 10.0.0 resolves the error for ejected apps in development mode only, but will not work in production or served over HTTPS due to https://github.com/facebook/create-react-app/issues/8075 which was not fixed until after 10.0.0.

---

_Edit 2_: @syberen said:

I solved it the hard way, by creating a new react app, ejecting, and copy-pasting the relevant changes in the config and scripts into my ejected project.

^^ works fine for ejected apps

[RDIL]

Can confirm. Exact stacktrace for me:

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 (/workspace/REDACTED/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (/workspace/REDACTED/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/workspace/REDACTED/node_modules/express/lib/router/index.js:317:13)
    at /workspace/REDACTED/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/workspace/REDACTED/node_modules/express/lib/router/index.js:335:12)
    at next (/workspace/REDACTED/node_modules/express/lib/router/index.js:275:10)
    at launchEditorMiddleware (/workspace/REDACTED/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (/workspace/REDACTED/node_modules/express/lib/router/layer.js:95:5)

[Douglasacost]

I have the same issue now.
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)

[emmsdan]

I have exact same issue after re-installing my dependencies.
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined at validateString (internal/validators.js:112:11) at Object.join (path.js:1040:7) at noopServiceWorkerMiddleware (/edn/emmsdan/PaymentGateway/web/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26) at Layer.handle [as handle_request] (/edn/emmsdan/PaymentGateway/web/node_modules/express/lib/router/layer.js:95:5) at trim_prefix

I tried, deleting my node_modules and re-installing but no luck...

Please, how can I resolve this issue?
I am using create-react-app and I have not ejected yet.

---

_Edit_ Fixed the issue for me:
https://stackoverflow.com/a/60242323/3532661

[Nowheresly]

I had the very same issue. By adding

  "resolutions": {
    "react-dev-utils": "10.1.0"
  },

in my package.json file, I was able to avoid this issue. Maybe something wrong with "react-dev-utils": "10.2.0"? For that reason I cannot upgrade to react-scripts 3.4.0

[santaclauze]

Same issue here, resolved by reverting to 10.1.0

[tkforce]

Same issue here in v3.3.0, downgrading to v3.2.0 or upgrading to v3.4.0 solves the problem,
but with v3.4.0 the routing URL with homepage config seems to behave differently from v3.2.0:

With hompage:"/my/dir" set in my package.json and using React router component <Link to="/about">About</Link> to do the routing, different version will have different behavior on the url generated in <a href="xxx">:

v3.2.0 -> <a href="/about">
v3.4.0 -> <a href="/my/dir/about">

But it seems to be only affecting dev version of the application, production build is always pointing to <a href="/my/dir/about">

Any thoughts on this behavior?

[mayteio]

Related? https://github.com/facebook/create-react-app/pull/7259
Solution: https://stackoverflow.com/questions/60234640/typeerror-err-invalid-arg-type-the-path-argument-must-be-of-type-string-re

[Douglasacost]

I have the same issue now.
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)

I soved that upgrading "react-scripts" from "3.3.0" to "^3.4.0"

[syberen]

I have the same issue now.
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)

I soved that upgrading "react-scripts" from "3.3.0" to "^3.4.0"

Right, but this question pertains specifically to ejected apps.

I solved it the hard way, by creating a new react app, ejecting, and copy-pasting the relevant changes in the config and scripts into my ejected project.

[tronza]

Here is the breaking change: https://github.com/facebook/create-react-app/commit/1cbc6f7db62f78747cb6ca41450099181139325e#diff-595228c9c4e2f6619c6bb1478ba4ef87R14

Made a workaround to it by modifying webpackDevServer.config.js to following (we don't use PUBLIC_URL):

app.use(noopServiceWorkerMiddleware(''));

[defusioner]

Seems that there was some incompatibility between eslint, prettier and CRA dependencies (I think of loaders).

After upgrading to 3.4.0 of cra, 1.19.1 of prettier, 3.1.2 of eslint-plugin-prettier, the error has gone.

[WonderfulOlanrewaju]

yarn add [email protected] the problem is with react scripts, updating it to the latest version solves the issues.

[lizy0329]

the problem is "react-dev-utils": "^10.1.0"

change "react-dev-utils": "^10.1.0" to "react-dev-utils": "^10.0.0" is resolve this problem

[dmlond]

I updated react-scripts to 3.4.0 and that fixed the issue

[Niweera]

I have the same issue now.
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)

I soved that upgrading "react-scripts" from "3.3.0" to "^3.4.0"

This worked for me. Thanks.

[geoangelotti]

If you have an ejected create-react-app, I would suggest:

1. Create a new React app through create-react-app.
2. Eject it through npm run eject or yarn eject.
3. Install all the packages that are missing from the package.json.
4. Copy your src folder assuming all your code is situated in this folder.
5. Redo your changes on the config and script folders, if needed.

Worked for me.

[dani-edo]

I'm done with this npm remove react-dev-utils && npm i [email protected]

[NogbadTheBad]

or bump react-scripts to 3.4.1

[hutber]

Thanks guys, sadly for me when upgrading to 3.4.1 I get dependacy issues which means I need to switch to yarn to avoid the bug in NPM. But my company do not allow Yarn.

Does anybody actually know what the issue is and how I can fix it? We don't have react-dev-utils either.

[consciousnessdev]

[email protected] exactly is working fine for me

i solved by update react-scripts 3.4.0 and [email protected]

[manzoorwanijk]

For ejected apps (with multiple entry points), the problem is caused by ManifestPlugin (webpack.config.js) in generate option. It wrongly assumes that the entry point in named as main

const entrypointFiles = entrypoints.main.filter(
                                         ^^^
    fileName => !fileName.endsWith('.map')
);

You need to replace it with this

const entrypointFiles = Object.entries(entrypoints).reduce(
  (acc, [name, paths]) => {
    acc[name] = paths.filter(
      (fileName) => !fileName.endsWith(".map")
    );
    return acc;
  },
  {}
);

[troydaniels]

For ejected apps (with multiple entry points), the problem is caused by ManifestPlugin (webpack.config.js) in generate option. It wrongly assumes that the entry point in named as main

const entrypointFiles = entrypoints.main.filter(
                                         ^^^
    fileName => !fileName.endsWith('.map')
);

You need to replace it with this

const entrypointFiles = Object.entries(entrypoints).reduce(
  (acc, [name, paths]) => {
    acc[name] = paths.filter(
      (fileName) => !fileName.endsWith(".map")
    );
    return acc;
  },
  {}
);

After pulling my hair out for three hours, this works for me.

[foxbit19]

I've solved using the version 3.4.1 of react-scripts.

[greenlightjohnny]

I've solved using the version 3.4.1 of react-scripts.

This worked for me!

• "react-scripts": "3.4.1" instead of "react-scripts": "3.4.0" in my package.json file
• deleted node-modules folder
• deleted package-lock.json file
• ran npm install
• npm start and we were back in business!

Cheers!

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.