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.
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.
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 😭
I have an electron app, the app is working when I am running:
npm run electron-dev
I am creating a build folder using react-scripts:
yarn react-scripts build
Than I am trying to build it using electron builder with the command:
yarn electron-builder -c.extraMetadata.main=build/electron.js
This is working well and I am getting a dist and a build folders with the compiled app and a build.
But when I am clicking the app I am getting:
A JavaScript error occurred in the main process
Uncaught Exception:
undefined: undefined
Compilation success messages
When running the app via electron-dev (on the build folder or on the public folder) I am getting no errors, but I am getting 3 warning messages, 2 from firebase - "When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.", "Warning: This is a browser-targeted Firebase bundle but it appears it is being run in a Node environment." and 1 about security "Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security Policy set or a policy with "unsafe-eval" enabled.".
TD;DR: How can I understand where the error is coming from and why, if the error shows only undefined: undefined?
Maybe through try and catch but than how can I display it on the error I am getting?
I'm working on Mac OSX (But it does not looks like this is the problem), I am using opencv4nodejs which takes a long time to compile, also I am using some json files to store app data using electron-json-storage.
I'm suddenly having issues with production versions of my react apps. They work fine in development, however when I build them, I get a console error:
/static/css/main.f6418f8a.chunk.css:1 Failed to load resource:
net::ERR_FILE_NOT_FOUND
1.13eeb203.chunk.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.1e6014ca.chunk.js:1 Failed to load resource:
net::ERR_FILE_NOT_FOUND
/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
This error was received after the following commands:
create-react-app whatiswrong
npm run build
Then open the index.html in my browser like I would for any other react apps I've built.
You need to add "homepage": "./" to your package.json.
From:
https://github.com/facebook/create-react-app/issues/6275#issuecomment-457813277
Open your package.json file.
Add this entry to it "homepage":"path\to\your\project\build\"
Re-run the command npm run build.
The issue here was when you run the npm run build command without the homepage entry added in your package.json,it is built assuming that the project directory (where you are running the command) is hosted at server root.
screen-shot commandline
D:\git_repo\my-app>npm run build
> my-app#0.1.0 build D:\git_repo\my-app
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
44.57 KB build\static\js\main.8a29685f.js
**The project was built assuming it is hosted at root directory.
You can control this with the homepage field in your package.json.**
The build folder is ready to be deployed.
D:\git_repo\my-app>
How are you running your app? Are you just opening the index.html in the browser or are you using serve -s build and such?
If you are doing it by the first option then you should consider trying serve -s build
I'm attempting to build a Meteor application in an offline environment, with local web servers but no access to the outside Internet.
On running meteor build ./output I get the following:
...AppData\Local\.meteor\packages\templating\1.1.9\plugin.compileTemplatesBatch.os\npm\node_modules\meteor\promise\node_modules\meteor-promise\promise_server.js:116
throw error;
Error: EPERM, symlink '..\babylon\bin\babylon.js'
This application runs fine in localhost, doesn't seem to have any issues, but on attempting to build or bundle the app I run into these issues.
Additional (perhaps useful) info:
meteor build ./output --verbose returns the following (unnecessary packages omitted)
Local package version is up-to-date: templating#1.1.9
Local package version is up-to-date: templating-tools#1.0.4
Thanks
You need to run meteor as an administrator, then it can create the symlinks.