'Error: ENOENT: no such file or directory, stat ... .steampath

I am trying to start the development server on a React project that I have not worked on for a long time. Upon running npm install and npm start I received the title error message.
I tried manually updating and then downgrading the Node-sass but I am still getting the same error no matter what I do. Here is the full error message I am getting.

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
/home/dylan/Desktop/Werk/Professional stuff/SkylimitHost/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

[Error: ENOENT: no such file or directory, stat '/home/dylan/.steampath'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/dylan/.steampath'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dylan/.npm/_logs/2020-11-23T05_19_03_778Z-debug.log

And here is the complete log

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/dylan/.nvm/versions/node/v14.15.0/bin/node',
1 verbose cli   '/home/dylan/.nvm/versions/node/v14.15.0/bin/npm',
1 verbose cli   'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: /home/dylan/.nvm/versions/node/v14.15.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/dylan/Desktop/Werk/Professional stuff/SkylimitHost/node_modules/.bin:/home/dylan/.nvm/versions/node/v14.15.0/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle [email protected]~start: CWD: /home/dylan/Desktop/Werk/Professional stuff/SkylimitHost
10 silly lifecycle [email protected]~start: Args: [ '-c', 'react-scripts start' ]
11 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] start: `react-scripts start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/dylan/.nvm/versions/node/v14.15.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (/home/dylan/.nvm/versions/node/v14.15.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/dylan/Desktop/Werk/Professional stuff/SkylimitHost
16 verbose Linux 5.4.0-53-generic
17 verbose argv "/home/dylan/.nvm/versions/node/v14.15.0/bin/node" "/home/dylan/.nvm/versions/node/v14.15.0/bin/npm" "start"
18 verbose node v14.15.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: `react-scripts start`
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I don't understand why my server won't start, any help would be appreciated.



Solution 1:[1]

I've found out the solution. This error is just a fancy/convoluted missing dependencies message. If you install all the dependencies the project needs (some might not be in the package.json file) it should work correctly.

Solution 2:[2]

If you are in a hurry! And don't have time to know why this is happening! you can move and scroll directly to "How to resolve it (an elegant way)?" section bellow (it's at the end)! I'm showing a strong efficient and clean solution!

What is the problem ?

The whole problem is a missing dependency! That can be a js module or a file! Like a font file or something else like asset probably!

And to note: A good error message is being cleaned! Recompiling!
And then the problem belloww is reached and you get the error!

enter image description here

enter image description here

enter image description here

Then the error comes after! We can see a missing font in my case!

But Why and how we are getting this error ?

A broken symlink that reside in the home directory! That got checked by the react-scripts start, running process! And because it's broken the access throw a is no file or directory error.

In our case it was .steampath! Check the details on the next section (what is steampath)

To make it fun and confirm! I created a broken symlink with my name! Following the alphatbetical order! It will be processed first!

enter image description here

enter image description here

enter image description here

And yup! Here now! We have .allalBrokenLink! And not .steampath! A quick solution would be to remove the broken symlink! But this is not a good solution! the borken .steampath have it's purpose! If you are using steam game platofrm! If you don't! You can remove the file without worry!

Otherwise the solution is pretty simple and efficient! Run in javascript debug terminal! And set a breakpoint where the error come! So it will pause automatically! And will get to see the problem easily and simply! See this in the How to resolve it (an elegant way)? section!

Why the home directory was checked ?

The first thing to say! It's not due to the nodejs module resolution algorithm! Again not due to the module resolution algorithm!

why!?

Because the module resolution! When it comes to the module! And in the case where it need to go backward! It Go backward up to the file system root! And each time checking against node_modules folder! So if it reach up to /home/! it will directly check against /home/node_modules! if there is! if not it go to /node_modules! And you can see how it will not check all files in a directory! And so not cause the broken symlink problem. Which is caused because something is iterating through all the files and checking them! It's not the case here!

The algorithm in such case, in extra to that, it check the following

Additionally, Node.js will search in the following list of GLOBAL_FOLDERS:
1: $HOME/.node_modules
2: $HOME/.node_libraries
3: $PREFIX/lib/node

That can be illustrated here! I accessed paths while debugging:

enter image description here

You can see how it go backward!

The algorithm is clear! You can check it here (ref1, ref2!

And in the typescript doc here

Also we can verify it too ourselves!

First through accessing module.paths as like bellow:

enter image description here

I made a test! A simple testing project! Where i imported just a random name! You'll get a clean not found module error! Know that i tested in the same environment where i get the error bellow!

enter image description here

And you can check the error type!

Yup we didn't mention the problem! Then what is it ??

Babel for example was known for something similar! Where it looks for .babelrc config. However like node modules resolution, it go backward and checking for .babelrc specifically! And any resolution that have a lockup for a specific thing! Or within a specific thing! Will directly check for the thing! Why check anything else!? Given all that i doubt it would be something between babel, webpack and react-scripts details or config! And most probably some loader or plugin thing! I tried to debug manually! It was time consuming! I moved to automate the detection through the chrome devtools protocol! I'll update this section as soon as i get it!

What is steampath

A file created by the Game steam platform.

https://askubuntu.com/questions/1103540/why-is-there-a-steampath-in-my-home-directory

This is a known Steam issue: the symlink is created and is intentionally broken for compatibility with older Steamworks SDK that some games are still built with.

From https://github.com/anyc/steam-overlay/issues/206

Steam creates symlink .steampath pointing to nonexistent .steam/sdk32/steam in $HOME every time it is run whereas it should be pointing to .steam/bin32/steam.

Do not remove or alter this symlink, it exists and is intentionally broken to provide legacy steamworks compatibility as being tracked at ValveSoftware/steam-for-linux#5245.

(~/.steam/sdk32/anything is what is needed)

So if you use steam! You probably don't want to remove this file!

How to resolve it (an elegant way) ?

If you don't remember anything! You can just go find in folder > node_modules! And search for Failed to compile! Which generally you'll always remember!

Make sure to pick the second found element!

enter image description here

Know that you can too, simply open the file search pallet (CTRL + P)

Search for devServerUtils

enter image description here

And search again within the file!

enter image description here

That may be faster!

After this you set the break points as shown in the next image!

And start a debuger terminal!

Know that you need only the breakpoint on the return statement!

enter image description here

You can too use a process.exit()! But i prefere the usage of the debugger! As it's cleaner and simple!

Here how you start a javascript debug terminal!

enter image description here

Run npm start! in that debugger terminal!

enter image description here

The excution will automatically stop at the breakpoint! And you'll be able to read easily and simply see what the problem is!

enter image description here

Know that once it's done once! You can later whenever needed, to just start a javascript debug terminal! And you'll have it works! As your break point will still there!

No knowledge is required to do so!

Still if not familiar with the debugger! And want to get to know it better!

You can check the debugger auto attach for nodejs processes and javascript debug terminal here

Also debugging in general

Solution 3:[3]

In my case, it was because of a missing package in package.json.

yarn start or npm run start didn't help me find the missing package. To find the missing one, try running the build command (yarn build), build will exit with the error details as below.

enter image description here

As the above screenshot says, there was a missing package (in my case react-dnd-html5-backend).

Solution 4:[4]

This issue is caused because of some missing dependencies. The dependencies which were missing were not listed in the package.json, but was being used in the project. You can see the error for a split second in the console before it clears. I had to record my screen and see it in slow-mo to find what was missing and installed it.

Solution 5:[5]

Some package is missing. In my case it was @reduxjs/toolkit.

Solution 6:[6]

After downgrading node-sass to version 4, restart your development server.

Solution 7:[7]

Make sure to check out your imports! I'm using VS code and got the very same issue because instead of doing

import {useHistory} from 'react-router-dom'

// I did (well, actually vscode did it by performing incorrect autoimport)
import {useHistory} from 'react-router'

Solution 8:[8]

Solved looking at this log, npm clears screen and lost all this info.

npm start > log.txt

Solution 9:[9]

In my case, it helped running yarn install before yarn start.

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 imstupidpleasehelp
Solution 2
Solution 3
Solution 4 Sanjiv Pradhan
Solution 5 line9
Solution 6 Akash
Solution 7 daGo
Solution 8 Eduardo Garcia
Solution 9 Aleksandar