create-react-app: TypeError [ERR_INVALID_ARG_TYPE]

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"

I have exact same issue after re-installing my dependencies.

    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

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(''));

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

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)

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.

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;
  },
  {}
);

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

I’m done with this npm remove react-dev-utils && npm i react-dev-utils@10.0.0

yarn add react-scripts@3.4.0 the problem is with react scripts, updating it to the latest version solves the issues.

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

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

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

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!

or bump react-scripts to 3.4.1

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?

Same issue here, resolved by reverting to 10.1.0

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.