I am currently stuck and unable to locate the error. After building my react application containing the react-tsParticles package, I noticed a immense worse performance after publishing it on my nginx-based webserver. While in local development performance is fine, but the performance when visiting the live page is bad and not comparable to other examples on the internet.
I am not interested in advertising my page, but this is the link to it.
The Code can be found here on Github.
Any advice is appreciated :)
I had this problem too
there is a problem with the build tool or bundle file that occurs when using the npm run build command.
also may be solved by changing the browserslist in package.json.
you can refer to this answer : https://stackoverflow.com/a/70625114/8730051
Related
This question already has answers here:
Blank page after running build on create-react-app
(17 answers)
Closed 1 year ago.
I'm a newbie to both git and AWS.
I bought a domain using AWS and have connected it to a Github repository.
I pushed the app to repository without initiating an npm run build.
After realizing that the website was showing the readme.md instead of the index.html which is inside of the public folder (not that that's working either), I decided to try to run npm run build and push that to the github repository, thinking that maybe that could fix my issue.
The problem I ran into was that /build is ignored inside .gitignore.
So I'm not sure if I should remove /build from .gitignore or find a work around, or something else I'm not aware of?
I would really appreciate some explanation from someone on that issue.
Thank you in advance.
So, there are 2 different things that we must break down from this question . One related to git itself and other is to the app build.
.gitignore tells git which files (or patterns) it should ignore. It's usually used to avoid committing transient files from your working directory that aren't useful to other collaborators, such as compilation products, temporary files IDEs create, etc. It basically does keep track of the specified file or directory
More related to that can be found in here:
http://git-scm.com/docs/gitignore.
Now, going to the original problem (which is building your app) github does have a CICD pipeline called github actions which essentially allows you to create a workflow based on a template that can help building your app. Therefore the build can be done when your is code is pushed, without have to send unnecessary files to your remote repository from your local npm run build. (You can find more related to this subject in this link:
https://docs.github.com/en/actions/guides/building-and-testing-nodejs?learn=continuous_integration)
That doesn't necessary solves your issue with your App (because we are not discussing anything related to coding), but if your problem is just building the app that would be a starting point.
My other recommendation would be also to check more on how git/github actually works and how you can take advantage of these systems in the future to deploy/control your code.
Hopefully this can help!
Found the answer to my question here. Thanks for the help guys.
Blank page after running build on create-react-app
Thank you for taking the time to read and possibly help with this issue. I am building a boilerplate react/express full-stack application. I have managed to get it going, however, I cannot fix this issue regarding webpack-dev-server complaining about the bundle size. This is currently a barebone application, and I am afraid that it will only get larger.
https://github.com/ducvtrann/pern-boilerplate - npm run start-dev to boot the app up
Thank you all!
Best,
Duc
Change webpack mode from production to development and warnings will be gone.
I merged my branch with master, git merge master, and had a few conflicts. When I did this, my app was running and threw parser errors about the <<<<<<<... lines as expected.
I resolved the merges and now I'm getting the same error, but there is nothing in my code!
I can search the project for <<<< and find nothing. I've restarted my app npm run start, even switched branches, and it's stuck there. Made a new folder and recloned the project and that cleared it out. Any idea why/how this happened? How do I make sure this doesn't happen again.
It seems that a cache problem exists between webpack cache and resolving git conflicts.
the solution is:
stop your app
remove node_modules/.cache
start your app
It's possible that when you were trying to resolve the merge conflicts, pieces of your code were not marked as resolved.
A personal tip:
Using a GUI interface when resolving merge conflicts will help tremendously.
Applications like Github Desktop or using Github's own merge conflcit resolve will help better see your changes.
Today I see a weird thing after build a ReactJS app. when I checking in the browser after builded files it's exposing my raw folder structure. It should not expose the directory.
I see some StackOverflow saying that "homepage" : "." in package.json will solve, someone saying "start_url" : "/" need to change in manifest.json. but nothing is working for me. Any way to solve this.
You're seeing this because you're running this project locally.
When you run a project locally, it doesn't use the prod version of your app. It uses the dev version which isn't optimized for production. This is done to help you out with debugging during the development phase of your project.
If you deployed the app, the deployment would be using the build output (and not your local build, like you see here).
Note: If you're still experiencing this issue then your bundler (if you've ejected a CreateReactApp, then I'm referring to webpack) needs proper configuration and you'd need to provide us with more information.
I am attempting to use create-react-app in AWS Cloud9. While I have no problems creating the app, when I try to run npm start I just get this screen. When I clicked on "Why am I seeing this?" I was taken to this page, which led me to turn on HTTPS. While HTTPS was enabled, it did not fix the issue. create-react-app's Github page suggested that CHOKIDAR_USEPOLLING=true is required for virtual machines, but that also did not fix the issue: it now creates a blank page, as shown here. Finally, thinking that perhaps the issue was due to some accidental change, I deleted the directory and made a fresh one, but the issue persisted.
Any insight on how this can be resolved would be appreciated.
I had a similar issue. For me I was just going about it the wrong way and I can preview my application by going to Preview at the top of the IDE and then Preview Running Application.