'The "path" argument must be of type string. Received undefined. not sure why?

I am trying to run my react project and I keep getting this error. I have reinstalled node and npm, and still this issue persists. wondering what to do next!

Enclosed, is package.json, hope it will shed some light.

I copied from my github repository the project that was there and I was still getting this error.

{
  "name": "our-family-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blueprintjs/core": "^3.22.3",
    "bootstrap": "^4.3.1",
    "react": "^16.11.0",
    "react-autosuggest": "^9.4.3",
    "react-bootstrap": "^1.0.0-beta.14",
    "react-dom": "^16.11.0",
    "react-grid-gallery": "^0.5.5",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.1",
    "reactstrap": "^8.1.1",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "mocha",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^1.13.0",
    "@typescript-eslint/parser": "^1.13.0",
    "chai": "^4.2.0",
    "mocha": "^7.0.0",
    "noop-service-worker-middleware": "^3.0.0"
  }
}


TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:117:11)
    at Object.join (path.js:1039:7)
    at noopServiceWorkerMiddleware (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/index.js:317:13)
    at /Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/index.js:275:10)
    at launchEditorMiddleware (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/index.js:317:13)
    at /Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/index.js:275:10)
    at handleWebpackInternalMiddleware (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/react-dev-utils/evalSourceMapMiddleware.js:42:7)
    at Layer.handle [as handle_request] (/Users/saraginsburg/FlatIron/our-family/our-family-frontend/node_modules/express/lib/router/layer.js:95:5)


Solution 1:[1]

I received this exact error from eslint while running node 10.0

After investigating the call stack, I found a dependency was using a nodejs path module parameter that was only introduced in nodejs 10.10. I was going to open an issue but I checked the eslint documentation and sure enough Node.js (^10.12.0, or >=12.0.0) is specified.

I suggest you check your Node.js version and upgrade to at least 10.10

Solution 2:[2]

I had the same problem for PhantomJS - and what fixed that for me was installing it as an npm package and not system wide.

So - when I ran

npm i -g phantomjs-prebuilt@^2.1.8

then phantomjs got installed and is available as a command for my user.

In my case the location for global npm packages without sudo is:

$ whereis phantomjs
phantomjs: /home/petar/.npm-packages/bin/phantomjs

After that I didn't get the error above and all went fine.

(This way of installing is in contrast to the way I did it before - system-wide, through the package manager or downloading archive and extracting it to /usr/local/bin.)

=====

And last but not least - I found the solution here in Phantom installation failed TypeError: Path must be a string. Received undefined #200 by Lekensteyn.

Solution 3:[3]

Hint: The issue probably lies within some version of your dev-dependencies related to eslint-config-x or eslint-plugin-x

In our case, We had 2 projects created from the same starter. One of the older projects was showing this error but the latest project created from the "updated" starter wasn't showing this error.

So I went ahead with a smart/lazy solution instead of digging down this rabbit hole. I brought the new "working" config to the older repo and bam.

Here's my eslint.rc

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['plugin:@next/next/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'import', 'react-hooks'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'import/no-unresolved': [0, { caseSensitive: true }],
    'react-hooks/rules-of-hooks': 'warn', // Checks rules of Hooks
    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
  },
  globals: {
    React: 'writable',
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx'],
      },
    },
  },
}

and my dependencies in package.json

{
  ...
  "scripts": {
    "lint": "yarn eslint ./src",
  },
  "dependencies": {
  // not really related
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "^11.1.2",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-json": "^3.1.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react-hooks": "^4.3.0",
  }
}

Solution 4:[4]

In Next.js, if you have added the plugin:@next/next/recommended to your eslint config, you will also need to add eslint-config-next as a dev dependency:

npm i eslint-config-next --save-dev or yarn add -D eslint-config-next

This also will allow the command next lint to run correctly.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tyler Johnson
Solution 2
Solution 3 KeshavDulal
Solution 4 Daniel Sottile