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