We Keep Coding

Wrangler Pages file not found when serving a Qwik website

Wrangler version: 8.19.1
OS: Ubuntu 22.04.1 LTS
Bug
In my Qwik pages project, when running npm run build && npm run serve, some files failed to be found:
Full DevTools console output
127.0.0.1/:1
GET http://127.0.0.1:8788/build/q-8b482804.css net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1
GET http://127.0.0.1:8788/build/q-9f65a413.css net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1
GET http://127.0.0.1:8788/build/q-e6eff275.css net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1
GET http://127.0.0.1:8788/build/q-03a2bd7f.css net::ERR_ABORTED 404 (Not Found)
favicon.ico:1
GET http://127.0.0.1:8788/favicon.ico 404 (Not Found)
A bad HTTP response code (404) was received when fetching the script.
(index):3 TypeError: Failed to register a ServiceWorker for scope ('http://127.0.0.1:8788/') with script ('http://127.0.0.1:8788/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.
Full terminal output
npm run serve [14:02:45]
> serve
> wrangler pages dev ./dist
🚧 'wrangler pages <command>' is a beta command.
Compiling worker to "/tmp/functionsWorker-0.3009066340734492.js"...
Compiled Worker successfully.
▲ [WARNING] Passing --inspect is unnecessary, now you can always connect to devtools.
Starting inspector on 0.0.0.0:9229 failed: address already in use
GET / 200 OK (28.51ms)
GET /build/q-8b482804.css 404 Not Found (99.78ms)
GET /build/q-9f65a413.css 404 Not Found (69.33ms)
GET /build/q-e6eff275.css 404 Not Found (57.81ms)
GET /build/q-03a2bd7f.css 404 Not Found (57.55ms)
GET /service-worker.js 404 Not Found (53.69ms)
GET /favicon.ico 404 Not Found (61.71ms)
To try and fix this, I have updated entry.cloudflare-pages.tsx to use the new createQwikCity instead of the now deprecated qwikCity but this hasn't changed anything.
I've tried running npm run build.server before the serve, but no success either
I've double checked and the files are indeed inside my ./dist folder, they just fail to be found without further explanation.
FYI when running npm run dev my website works as expected

"Could not exchange access token for unknown reasons" ; In-meeting App Meeting Extension

Myself and a team member have followed the 'Try this sample' and 'Use the app in Teams' instructions for the In-Meeting sample application to develop an app for Microsoft Teams:
https://github.com/OfficeDev/TeamsFx-Samples/tree/v2/in-meeting-app
We've both followed the same steps on different computers and on different OS's (Mac and PC), and we are getting the same issue:
"An error has occurred. This application may no longer respond until reloaded".
The instructions have us open Powershell and run commands in two locations. ('Try this sample' Step 5)
'tabs' folder, asked to run npm install and npm start
'bot' folder, asked to run npm install and npm run start:local
No errors occur when these commands are run initially, but when we open the app up in Teams and click on the button to bring out the side panel, errors show up in both terminals where we ran the commands.
In terminal 1, the tabs folder, we get a 'proxy error':
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.
Try the new cross-platform PowerShell https://aka.ms/pscore6
PS C:\Users\Luke\TeamsApps\in-meeting-app\tabs> npm install
up to date, audited 1685 packages in 2s
101 packages are looking for funding
run `npm fund` for details
142 vulnerabilities (125 moderate, 16 high, 1 critical)
To address issues that do not require attention, run:
Compiled successfully!
You can now view microsoft-teams-ext in the browser.
Local: https://localhost:3000
On Your Network: https://192.168.0.3:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
Proxy error: Could not proxy request /getGraphAccessToken?ssoToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik1yNS1BVWliZkJpaTdOZDFqQmViYXhib1hXMCJ9.eyJhdWQiOiI5MzI0MTRiOS04NjM1LTQ3MjYtODlhZS1mYzAzVjOWU2MGMiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNTk2ZGYzOWEtNzUyNS00OWU4LWE3ODktYzZhMzY2OGQ5ZWZmL3YyLjAiLCJpYXQiOjE2NDU1NTU2NTYsIm5iZiI6MTY0NTU1NTY1NiwiZXhwIjoxNjQ1NTY0NjQyLCJhaW8iJBVFFBeS84VEFBQUExZTF2NkVIUVpFbkEvSEZ0Q3lkSHp4OEJVU3U0QzR2VlExbFNoWldiMjRBV0JMZWtlbmExOC8wbTlBZzFiajhtIiwiYXpwIjoiMWZlYzhlNzgtYmNlNC00YWFmLWFiMWItNTQ1MWNjMzg3MjY0IiwiYXpwYWNyIjoiMCIsIm5hbWUiOiJMdWtlI6cGllayIsIm9pZCI6ImMyNjdkZDUyLWQ4OTItNDZlZC1iNWMyLWVkMGU5OTdlN2ZmOSIsInByZWZlcnJlZF91c2VybmFtZSI6Ikx1a2VAcDIxcS5vbm1pY3Jvc29mdC5jb20iLCJyaCI6IjAuQVU4QW12TnRXU1YxNkVtbmljYWpabzJlXzdrVUpKTTFoaVpIaWE3OEWEo1Z3hQQUVZLiIsInNjcCI6ImFjY2Vzc19hc191c2VyIiwic3ViIjoiNG01LTlvQ2JKT1ZLb3k1TGduMEtpWnpaNk9YNkU5STR4ZVJsUVMxYjZEbyIsInRpZCI6IjU5NmRmMzlhLTc1MjUtNDllOC1hNzg5LWM2YTM2NjhkOWVmZiIsInV0aSI6IlB0bEs4QnJOcmsVRwTE5Nb0U5QVEiLCJ2ZXIiOiIyLjAifQ.je5zMu4knsZ-NwqSKF1M_n71Ehxgs8WZGsPdIwUu0EBT3qdoHHL2ET4RqoTACqtMC8lDFqxFT2EWwYHcXes02QivXYEvWj8j-MQS-VhAs3FTh1e07qer8jq4cOeaVrLpfBjoCpSnbI_lXYUP-hz77YGWbUZrI6k5rXnij6-Jcn1TmvV9OgD_lrliWGIPHrS28TajvFa1Acu64YJGNAGys-r6uU7U5MrpcEszufRVExx8tDEysNWc55_Wr88Ur5mBIzDgDqiUbEf_RP2ZzlulRlPZC2ZVwI54VZqAWM2LfbCpD5bL9OhT7H9qAml5N8fOXY_WNHlYUWROgtD_iinQ from reflectrdomain.eu.rok.io to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
In terminal 2, the bot folder, we get a type error:
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.
Try the new cross-platform PowerShell https://aka.ms/pscore6
PS C:\Users\Luke\TeamsApps\in-meeting-app\bot> npm install
up to date, audited 188 packages in 1s
12 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
PS C:\Users\Luke\TeamsApps\in-meeting-app\bot> npm run start:local
> api-server#0.0.1 start:local
> cross-env NODE_ENV=development.local node ./index.js
API server is listening on port 5000
C:\Users\Luke\TeamsApps\in-meeting-app\bot\node_modules\botbuilder\lib\botFrameworkAdapter.js:192
const connectorClient = this.createConnectorClientInternal(reference.serviceUrl, credentials);
^
TypeError: Cannot read properties of undefined (reading 'serviceUrl')
at BotFrameworkAdapter.<anonymous> (C:\Users\Luke\TeamsApps\in-meeting-app\bot\node_modules\botbuilder\lib\botFrameworkAdapter.js:192:82)
at Generator.next (<anonymous>)
at C:\Users\Luke\TeamsApps\in-meeting-app\bot\node_modules\botbuilder\lib\botFrameworkAdapter.js:15:71
at new Promise (<anonymous>)
at __awaiter (C:\Users\Luke\TeamsApps\in-meeting-app\bot\node_modules\botbuilder\lib\botFrameworkAdapter.js:11:12)
at BotFrameworkAdapter.continueConversation (C:\Users\Luke\TeamsApps\in-meeting-app\bot\node_modules\botbuilder\lib\botFrameworkAdapter.js:165:16)
at C:\Users\Luke\TeamsApps\in-meeting-app\bot\index.js:144:13
at Layer.handle [as handle_request] (C:\Users\Luke\TeamsApps\in-meeting-app\bot\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Luke\TeamsApps\in-meeting-app\bot\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\Luke\TeamsApps\in-meeting-app\bot\node_modules\express\lib\router\route.js:112:3)
My team member who is on Mac, instead of getting the error I get above, just gets the message "Could not exchange access token for unknown reasons.", but his client displays the same behaviour.
These errors repeat each time we open and close the side panel.
What can we do to fix the issue, and get it to show as it's supposed to?
Steps to reproduce:
Follow steps at https://github.com/OfficeDev/TeamsFx-Samples/tree/v2/in-meeting-app
"An error has occurred. This application may no longer respond until reloaded."

Thanks for using this sample and post the issue.
For the first error occurred in tab folder, from the log
reflectrdomain.eu.rok.io to http://localhost:5000/
I found that you may not using the ngrok, so caused the proxy error, my suggestion is try ngrok first and check if it is worked.
The solution for the second issue in bot folder, is removed the app in the meeting and re-add the app into the meeting.

Why do I get ECONNREFUSED proxy error with nodejs & react?

I'm using react to build a web application with an API. The API is on localhost:3000 and the react app on localhost:5000.
Sometimes when the server reloads I get this error message in the terminal:
[1] Compiling...
[0] [nodemon] starting `node server.js`
[1] Compiled successfully!
[1] Proxy error: Could not proxy request /api/auth from localhost:5000 to http://localhost:3000/.
[1] See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
It seems like the app works fine with it, it does say it compiles successfully and it's working just fine with the database. I thought maybe the problem was that is was contacting localhost:5000 instead of http://localhost:5000/, but I don't know how to change that.
What is that error and why am I getting it?

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.

Jhipster - 404 error on app.js when running in prod profile

I have a problem running my jhipster application in prod. After the deployment of prod war file the site is unable to load due to a 404 not found on /app/app.js
However vendor js and css are correctly injected. Not sure what's causing this issue.
Error message :
Failed to load resource: the server responded with a status of 404 (Not Found)
generated.js:19530
Uncaught TypeError: Cannot read property 'module' of undefined(…)
http://localhost:9080/app/app.js
Failed to load resource: the server responded with a status of 404 (Not Found)
Error as seen in the browser's console:

did you also build your app for prod? it looks like your app did not build the client site. This is done actually wiht the gulp build command. Depending on your build system maven or gradle you can specify the prod environment for the build phase, e.g. for maven mvn -Pprod package.
The gulp build command will be automatically executed durring the build phase. In the doc you can find more information about how to use JHipster in production.