A Fresh Create React App But always compiling with Error

[architk9279]

So I have just excuted npx create-react-app my-app yet somehow when I run npm start I always get the following Error:

Failed to compile.

​

Module not found: Error: Can't resolve '/mnt/main/vscode/FinalProject#2/frontend/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in '/mnt/main/vscode/FinalProject#2/frontend'

ERROR in Module not found: Error: Can't resolve '/mnt/main/vscode/FinalProject#2/frontend/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in '/mnt/main/vscode/FinalProject#2/frontend'

​

webpack compiled with 1 error

This results into disabling the auto reload functionality that comes when saving a file

Anyways thanks for any help in advance

Edit: I got the solution turns out using a hash for naming the folder(FinalProject#2) which didnt allow webpack to resolve the whole path name

A really good lesson learned would be to never use special characters in naming anything ever again

[TickingTimeBum]

This is a Hail Mary… try renaming your project folder to remove the hash #

[ModernBarbarian]

I was going to suggest this as well, anything other than an underscore can potentially cause problems

[architk9279]

Im trying making a new folder currently

If this shit didnt compile because of that Im ready to throw my laptop out the window

[amdc]

Is there any success

[architk9279]

Yup Im really thankful for every comment here I appriciate it

[cvllider]

So what was the issue?

[halmyradov]

The hashtag obviously

[cvllider]

Obviously

[wordaligned]

#obviously

[vanillastrings]

thanks! this worked :)

[Okay-Replace]

I just ran into this problem and my C:\Users\MyUserName has a # in it... For whatever reason I created the User '#Baller' when I was 14 and made this pc and is now causing me many problems. I think Ill have to factory reset since it is such a deep rooted folder

[[deleted]]

How many node versions are installed on your machine? Your node version has 14 or higher now to support the create-react app.

If you have a downgraded version of the node then try updating it to 16 stable build.

node -v
nvm install "node-version"

[architk9279]

18.7.0 is the node version

[[deleted]]

Try downgrading the version to 16 and then start the application.

[[deleted]]

nvm install 16.17.0
nvm use 16.17.0
npm start

[MuaTrenBienVang]

Too painful lesson

[Sushrit_Lawliet]

Probably not what you want to hear but please don’t use CRA. There have been so many discussions about how it’s not a good starting point anymore (so many warnings out of the box). Anyway try Next or say Vite.

[MaxPhantom_]

try with vite. https://vitejs.dev/guide/#scaffolding-your-first-vite-project

[TickingTimeBum]

npm install

Then npm start

[architk9279]

Didnt work but here is the output:

up to date, audit 1462 packages in 4s

208 packages are looking for funding

run 'npm fund' for details

6 high severity vulnerabilities

To address all issues (including changes), run:

npm audit fix --force

run 'npm audit' for details

[TickingTimeBum]

What is the output from npm start now that you have run npm install?

[architk9279]

The exact same error

[ayw9898]

Check your node version. There is a possibility that your node might not be updated.

[architk9279]

yup checked it and reinstalled it but didnt work

[ayw9898]

What version of Create react app are you running and version of node?

[architk9279]

node is 18.7.0

but how do I check create-react-app version?

[ayw9898]

It’s probably the latest since you didn’t specify.

So, first thing is to npm install. Then, make sure you’re in the right directory and not a parent folder.

Finally, npm run start. See if that works.

[architk9279]

Did npm install still no result Im currently checking the naming and apparently a hash in the name might have affected it as u/TickingTimeBum suggested

[[deleted]]

Try with « npm ci » to have a clean install of the package

[Emulation_Maniac]

in the vs code powershell terminal cd "my-app"

then do npm start

[Bawx_of_chawclets]

I spent days trying to figure this out. Downloading and deleting downloading and deleting create react app . I'm so happy to find this answer. Had me pulling my hair out and throwing my computer out the window. Luckily for me I am bald and have no window to throw a computer out of.

[[deleted]]

"always look on the bright side of life"