webpack-dev-server -hot mode stopped working - webpack-dev-server

No matter what project I work on,
when I run: webpack-dev-server --inline --hot
my files arent being listen/watched and hot-reloading.
a demo project with minimal boilerplate I experimented on:
https://github.com/ueeieiie/webpack-hotreload-not-working
This is what I've tried:
Opened old working projects, and its having the same problem
Clearing npm's cache
Uninstalling Node
Switched IDE (I worked on vscode, and tried it also on Atom)
Restart/ Shutdown computer
and nothing worked.
any ideas?

I found the source of the problem!
one of my parent folders had a problemtic name.
It was called (react-redux-weatherReport).
I guessed webpack didnt like the round brackets,could work properly.

Related

prettier --check always fails when using VSCode prettier plugin if prettier --write has never been run when running linux project on windows

I have a very weird problem and I would be happy if anyone could (please) help :)
I have an NX project (created in a Linux env), and I'm now using it on windows.
My VSCode uses the latest prettier version -->> prettier v9.10.3.
My (monorepo NX) project uses the latest prettier version -->> prettier v2.8.1.
My .preetierrc file is intentionally empty because my team uses the default prettier settings, and all of my files have been formatted using prettier-vscode-plugin which is my default formatter.
I did git pull and npm i and everything works perfectly.
When I run
prettier --check "apps\stt-monitor-front-end\src\app\components\CallCardsContainer.component.tsx"
on a specific file/folder it always fails with the
Code style issues found in the above file. Forgot to run Prettier?
message, although I know for sure that the file/folder has been prettierized in my VSCode.
** In fact, even If I delete the entire file's content and write const x = 5; with prettier plugin activated it still fails.
My main concern --->> prettier --write fixes the problem but it changes (not really) the entire file and it's like I created a new file, although everything is exactly the same!
Something is definitely wrong and I don't know how to fix it.
In addition, even if I do use prettier --write for the entire project my VSCode-prettier-plugin won't change any of the files because it works properly.
I figured it out after hours of googling.
https://prettier.io/docs/en/options.html#end-of-line
The project was created on Linux and the “End of Line” style in Linux and Windows looks the same but it’s not the same.
I added:
“endOfLine”: “auto”
to my .prettierrc file :)
And everything worked!

Next stuck loading when using SASS

Fresh Next project -> "npm i --save-dev sass"
then in /pages/_app.tsx I write at the top:
import '#/assets/globals.scss;
The file exists and the path is correct. But the project doesn't load. If I run "npm run dev", the website is stuck loading forever and the console just says:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
If I run "npm run build", it's stuck with "Creating an optimized production build..."
The console doesn't display any error or warning, nothing. I've tried running these commands with --verbose, but nothing useful. If I change the file to .css and import "...css", then everything works fine. I change it back to .scss, and stuck again.
I didn't add any next configuration.
Next version: 13.1.2
Sass version: ^1.57.1
Node version: v14.20.0 (I can't upgrade because all of my projects crash)
OS: Mac OSX
I've tried to search for this error 'cause I thought someone else would have it, but I find nothing. I've also checked the official Next Github issues page. I've tried to find errors or warnings in the console, but nothing. I've followed the official Next documentation, and as I say is a fresh project, nothing special. And as I said, If I remove .scss files and use only .css, the project works.
Sorry for not being able to provide more info. If you need something else please ask and I will edit the question.
EDIT:
don't know if it's related, but while I fixed this problem I tried to compile myself .scss files into .css, and use .css because then my project works.
I tried to run "node-sass ./styles.scss" and it displayed this error:
Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Node.js 14.x

React build not working whereas working fine when I start the server locally

I have a React project which runs fine when I do npm run start. All the elements load completely fine.
But when I create a build using npm run build, the resulting build when run would not load the elements.
In my package.json I have homepage also set like this:
"homepage": ".",
Also, there are no errors in console.
During compile time as well there are no warnings.
Any suggestions on what could I be missing or some steps I must try to find what could be going wrong?
I tried deleting the node_modules, clearing node cache and rebuilding but that too did not help
Thank you!

React's webpack is showing up in the console

i have a this little issue.
I have a new laptop, and I decided to do react project.
I installed the Node's stable version, installed the the npm create-react-app globally, and created a new project using this command npx create-react-app tip-calculator.
Everything was set up for me, only deleted a few files on the src folder, and kept the essentials (index.js, app.js and index.css).
My issues, is on my previous laptop, when doing projects, the webpack (is what i think it is) didn't show up in the console, and on the new laptop, it shows, and I would like it removed.
This is a freshly baked react project, so I didn't touch it's code, aside from the files I deleted.
It's not an issue, it's expected behavior by react-scripts because these logs are hardcoded in react-scripts and currently, there are no options for disabling them. You have probably had an older version of create-react-app in your previous laptop which might have not logged this information on the console.
What is really happening is that you are running react-scripts with npm start and react-scripts are logging webpack logs.
There is also this question which is similar to yours about running react-scripts silently.
If you really don't want to see the output you can redirect it to null:
Linux & Mac: npm start > /dev/null
Windows CMD: npm start > null
Windows Powershell: npm start > $null

issues with npm start

Trying to run a React project I haven't touched in a week or so. When I run 'npm start' the project doesn't show up in my browser automatically anymore. My terminal says that it's being served locally. When I pasted in the address, it didn't show up and I received a 'not found' error . After about 5 min I tried again, and now the project shows up on localhost:5000. I am curious though as to why 'npm start' isn't automated like it should be with React. I tried making changes to my project, and the app in my browser isn't responding to any changes I'm making, even with a hard refresh. So far I've tried deleting node_modules and re-installing npm. I haven't found a thread on npm start that addresses this particular issue, so any advice is appreciated.
Okay, figured it out. For some reason the script for running in my
package.json changed to
"start": "serve -s build" I changed it to "react-scripts start" and that seemed to fix the problem. Not really sure what made it change in the first place.

Resources