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
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 ran npm run build, successfully created Dist folder, now opening index.html throws error :Failed to load resource: net::ERR_FILE_NOT_FOUND
what can be the possible issue here ?
I found adding
module.exports = {
publicPath: './'
};
to vue.config.js solves it too, after which we can open index.html from the dist folder directly.
More about publicPath in the docs.
Vue JS files are not supposed to simply be opened directly in the browser (using the file:// protocol). You must use a server for it to correctly work. The simplest solution if you use Google Chrome is to use this extension: Web Server for Chrome
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 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 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.