We Keep Coding

Can't Figure Out How to Deploy MERN Stack Application to Render. sh: 1: react-scripts: not found Error

Previous Heroku Free Tier user here. I'm forced to try other deployment options due to Heroku removing their Free Tier a few months back. I've deployed a few MERN stack applications to Heroku in the past, but I'm having trouble figuring out how to deploy to render.com. Currently I have my app I'm trying to deploy (here) working perfectly in my local environment, but the build fails when I try deploying to Render as a Web Service. The error I get is the following:
Jan 17 11:38:15 PM > wheres_waldo#0.1.0 build /opt/render/project/src
Jan 17 11:38:15 PM > react-scripts build
Jan 17 11:38:15 PM
Jan 17 11:38:15 PM sh: 1: react-scripts: not found
In my package.json I clearly have "react-scripts": "^5.0.1" in the dependencies so I do not understand why the error happens here. I try changing the 'start' and 'build' scripts in package.json to other commands like 'npm run build' or 'npm start' but no luck. I cannot find any good documents on MERN stack deployment either for Render. Is there a way of making this work or should I try another free option elsewhere that provides better support for my stack?

Besides moving react-scripts out of devDependencies, try changing your node version in your server side package.json in the "engines" section to the following (instead of having a specific version selected):
"node": "^8 || ^10",
https://github.com/StephenGrider/FullstackReactCode/issues/14#issuecomment-928936921

Laravel Mix HMR Server Does Not Launch

Laravel Mix Version: 6.0.43
Node Version (node -v): 16.13.1
NPM Version (npm -v): 8.1.2
OS: Windows 10 21h2
Description:
THIS IS HAPPENING ON A FRESH NEW INSTALL OF LARAVEL AND MY OTHER PROJECTS
Running npm run hot changes the script tag sources to http://localhost:8080/*/*.* from http://localhost/*/*.* HOWEVER I always get net::ERR_EMPTY_RESPONSE from localhost:8080. The HMR server doesn't launch at all. The terminal output of the command also have no mention of spinning up a new web server.
PS C:\Users\Eric Wang\Documents\GitHub\test-laravel-mix> npm run hot
● Mix █████████████████████████ emitting (95%)
emit
● Mix █████████████████████████ done (99%) plugins
WebpackBar:done
✔ Mix
Compiled successfully in 5.51s
Laravel Mix v6.0.43
✔ Compiled Successfully in 5336ms
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤│ css/app.css │ 47.6 KiB │└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘webpack compiled successfully
Here's a picture of the browser failing to fetch the bundle files
Steps To Reproduce:
I am running Docker 4.5.1 using legacy Hyper-V.
I containerized Laravel and PHP BUT not the frontend and JS. I am running Laravel Mix on my main system.
Clone the fresh installation of Laravel from https://github.com/ericwang401/test-laravel-mix
Clone Laradock in the project folder using git clone https://github.com/laradock/laradock.git
CD to the Laradock folder and make .env file with cp .env.example .env
Inside .env file set PHP_VERSION to PHP_VERSION=8.0 AND DO NOT EDIT MYSQL SETTINGS
Now edit the Laravel environment file
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret
Start up the Laravel app in Laradock folder using docker-compose up -d nginx mysql
Enter into bash mode in the Docker container docker-compose exec workspace bash
Install Composer dependencies BUT NOT NPM DEPENDENCIES YET composer i
Now exit out of the Docker container CNTRL + D
Install NPM dependencies in project root ON YOUR MAIN SYSTEM npm i
Run on your main system npm run hot
Now go to http://localhost and IT SHOULD be a white screen
Check console logs and it should give net::ERR_EMPTY_RESPONSE when it tries to fetch the bundle files
REMEMBER: the backend is running inside Docker
The frontend (Laravel Mix) is running on the host system
This issue is happening on a FRESH project installation of Laravel 9 + Jetstream AND it's also happening on my other older projects like https://github.com/StratumPanel/Stratum-Panel
The HMR server is simply not launching.

I found out the issue. The problem was that the default port, 8080, Laravel Mix HMR was using couldn't be binded to. Webpack Dev Server doesn't respond with a message of failing to bind to a port. To confirm this issue, I replicated the environment on my friend's PC and it too couldn't bind to port 8080, but this time it reported an error that the dev server couldn't bind to port 8080.
I fixed this issue by specifying
mix.options({
hmrOptions: {
host: 'localhost',
port: 4206
}
});
And it works! On both my friend's pc and my pc.
I used the exact same reproduction instructions on my friend's PC.
I spent way too long investigating this issue 😭

expo init <project name> throwing npm ERROR (windows OS)

Just started with expo and React-Native and when I run
expo init ProjectName
I am getting an error stating:
Unexpected end of JSON input while parsing near '...,"version":"7.0.0-bet'
Process exited with non-zero code: 1
Set EXPO_DEBUG=true in your env to view the stack trace.
When I add the said thing in env (using set EXPO_DEBUG=true on windows), I get the following error:
Error: Process exited with non-zero code: 1
at ChildProcess.child.on (C:\Users\mohit\AppData\Roaming\npm\node_modules\expo-cli\node_modules\#expo\spawn-async\build\spawnAsync.js:39:21)
at ChildProcess.emit (events.js:182:13)
at ChildProcess.cp.emit (C:\Users\mohit\AppData\Roaming\npm\node_modules\expo-cli\node_modules\cross-spawn\lib\enoent.js:40:29)
at maybeClose (internal/child_process.js:962:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
It's something related to 'spawn-async'. I was also getting issues with 'spawn' sometime earlier while creating a node-server...but I resolved that there and then using 'exec' instead. Tried to find this on expo forums and even in react-native issues but couldn't find a solution. Can someone plz suggest something? Is it some "windows" thing only or something related to npm releases?
P.S: I also ran create-react-native-app ProjectName and again got a similar kind of error about end of JSON input!

Now I know what can be the issue, it can be just the trivial one:
Please update node an npm to the newest available version and please init you project again in different directory.

You'll need to have Node.js (version 10 or newer) installed on
your computer. Download the latest version of Node.js.
Additionally, you'll need Git to create new projects with Expo
CLI. You can download Git from here.
Make sure that you have installed these two things in your device.
Go to doc for expo installation

in my case. make sure you have yarn installed and update tour android studio packages, for it to work

Service Worker not working with create-react-app

I'm using create-react-app for generating a react.js project. It automatically implements a service-worker for progressive web app funtionality if a production build was made by using the command npm run build.
Two weeks ago everything worked fine and I was able to cache all files with the generated service-worker. But since today I always get errors:
On Chrome: Uncaught (in promise) Error: Request for http://localhost:5000/index.html?_sw-precache=aee80fca0f83208cc4d82ae2ccfda3c1 returned a response with status 301 at service-worker.js:1.
On Firefox: Service worker event waitUntil() was passed a promise that rejected with 'TypeError: NetworkError when attempting to fetch resource.'.
I have absolutely not idea why the error occurs.
Even if I create a new app and don't touch any of the generated files, the error shows up in the browsers console.
Steps to reproduce:
npx create-react-app my-app
cd my-app
npm run build
serve -s build
open app in browser
I tested it on two separate machines but get the same result. Any help is very appreciated.
Edit:
Console output after running npm run build:
C:PATH-TO-PROJECT>npm run build
> frontend#0.1.0 build C:\xampp\htdocs\gitlab\BA\App-PWA-progetraenke.app\frontend
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
164.04 KB build\static\js\main.d2519277.js
781 B build\static\css\main.77261875.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

I had the same issue with a VueJS app I created by using the PWA template of Vue. What did the trick for me was updating to the latest version of vue-cli and serve.
Updating to the latest serve version (8.1.4) probably solved my problem.

Webstorm Karma Test Runner Not Working with Yeoman angular-fullstack

I created a web application using the Yeoman Angular-Fullstack generator. Everything runs correctly from the command line. I can use grunt to start the service and run tests.
I want to run the Karma unit tests inside the Webstorm user interface. I right clicked on karma.conf.js and had Webstorm create a Karma run configuration for me. When I try to run that configuration, it spins for a few seconds then fails.
The Karma Server window in Webstorm contains this:
/usr/local/bin/node /Applications/WebStorm.app/Contents/plugins/js-karma/js_reporter/karma-intellij/lib/intellijServer.js --karmaPackageDir=/Users/williammcneill/Documents/Work/LearnNode/gecko/node_modules/karma --configFile=/Users/williammcneill/Documents/Work/LearnNode/gecko/karma.conf.js
WARN [watcher]: Pattern "/Users/williammcneill/Documents/Work/LearnNode/gecko/client/bower_components/angular-route/angular-route.js" does not match any file.
WARN [watcher]: Pattern "/Users/williammcneill/Documents/Work/LearnNode/gecko/client/app/app.coffee" does not match any file.
WARN [watcher]: Pattern "/Users/williammcneill/Documents/Work/LearnNode/gecko/client/components/**/*.coffee" does not match any file.
WARN [watcher]: Pattern "/Users/williammcneill/Documents/Work/LearnNode/gecko/client/components/**/*.jade" does not match any file.
WARN [watcher]: Pattern "/Users/williammcneill/Documents/Work/LearnNode/gecko/client/app/**/*.coffee" does not match any file.
WARN [watcher]: Pattern "/Users/williammcneill/Documents/Work/LearnNode/gecko/client/app/**/*.jade" does not match any file.
INFO [karma]: Karma v0.12.37 server started at http://localhost:8080/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket 29_J57vgWL6mWwyV13tv with id 98142631
Which all looks correct to me. The Test Run window contains this:
/usr/local/bin/node /Applications/WebStorm.app/Contents/plugins/js-karma/js_reporter/karma-intellij/lib/intellijRunner.js --karmaPackageDir=/Users/williammcneill/Documents/Work/LearnNode/gecko/node_modules/karma --serverPort=8080 --urlRoot=/
/Applications/WebStorm.app/Contents/plugins/js-karma/js_reporter/karma-intellij/lib/intellijRunner.js:54
throw e;
^
Error: connect ETIMEDOUT 127.0.0.1:8080
at Object.exports._errnoException (util.js:837:11)
at exports._exceptionWithHostPort (util.js:860:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1060:14)
Process finished with exit code 1
I can't figure out what is timing out. If I open http://localhost:8080 I see a webpage that looks like this.
Which also looks correct to me.
I haven't actually written any code. I'm taking all the defaults that Yeoman and Webstorm give me. I think I have all the relevant Webstorm plugins (AngularJs, Karma).
Does anyone have insight into what might be happening or how I could debug it?
Webstorm 10.0.4, Yeoman 1.4.8, Karma 0.13.9, Node 4.1.0, OS X 10.10.5

The port value in karma.conf.js is set to 8080, even though the server runs on 9000. Change this value to 9000 and everything works.
Not sure exactly how the grunt configuration makes it all work, or why it's set up this way, but that's the workaround.