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 😭
Related
I have a Vue app that outputs the following in the console after npm run serve.
DONE Compiled successfully in 17450ms 2:15:55 PM
App running at:
- Local: http://localhost:8080/
- Network: http://10.0.0.72:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
No issues found.
However, the app will not load on http://localhost:8080/ . The page displays the "This site cannot be reached.The connection was reset." message.
Other pages load fine, including the Node server I am using for the backend, running on localhost:3002.
I have tried removing the node_modules and running npm install again, but that hasn't fixed it. With the app compiling ok there is little help troubleshoot. There are also no errors in the browser dev tools console.
Does anyone know what might be going wrong or how to debug this?
Thanks!
change your port with npm run serve --hostname 0.0.0.0 --port 4000 and then run again.
I am using a npm package called libreoffice-convert which needs libre office installed to work. I have installed the libre office build pack on the heroku server where this node app is deployed however whenever I try and run this package I still an get Error: Could not find soffice binary
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.
I am running vue cli project using command yarn run dev it compile successfully, but does not show any output on browser on localhost:8080 link, can’t establish a connection to the server at localhost:8080. error displayed.
Not any manual port set programmatically.enter image description here
I'm following the Getting Started tutorial from here: https://facebook.github.io/react-native/docs/getting-started.html. I'm able to boot up my package manager with react-native start. But running the application itself always results in a crash.
$ react-native run-android
JS server already running.
Building and installing the app on the device (cd android && gradlew.bat installDebug...
Error occurred during initialization of VM
Unable to use shared archive.
An error has occurred while processing the shared archive file.
Unable to unmap shared space.
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
What is the problem?
You already have a react native process running in the background on the same port.
Use ps -ef | grep react
and then kill the process using the process id
kill -9 pid
and then re execute the command:
react-native run-android
First of all give proper permission to your gradlew, in your root directory run following command
chmod 755 android/gradlew
After this make sure you have local.properties file in your android folder with sdk file path like
sdk.dir = /home/username/Android/Sdk/