I'm new to react, so apologies if this is basic - but following a promising learning curve building the site, I've spent c9hrs trying to get it deployed :(
The info is as follows...
1.Runs fine as a development build on my machine.
2.Creating a production build through 'npm run build' results in it being built with the assumption its hosted at the server root - see below;
file sizes after gzip:
278.93 KB build/static/js/2.a3ca1e82.chunk.js
42.16 KB build/static/js/main.1a0b5ce7.chunk.js
33.88 KB build/static/css/main.75362cf6.chunk.css
24.72 KB build/static/css/2.3cd6815b.chunk.css
762 B build/static/js/runtime~main.a8a9905a.js
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
Running 'serve -s build' results in a local deployment of the production build on localhost:5000 - but with the blank screen problem present
...and the issue is consistent on the production deployment on Amazon S3. This can be seen live on www.cotswoldcohost.co.uk right now.
Looking a the source it appears to be finding index.html, and the console highlights a type error with particles.js - which maybe a separate issue from the rendering problem.
Any advice really appreciated - happy to provide any more info that you may require!
I went through the same issue recently whilst using react-particles-js in a React app, getting
TypeError: Super expression must either be null or a function, not object
on console.
It happens I was working on a old project with outdated package versions and therefore there was an incompatibility between react, react-scripts and react-particles-js. Updating packages to the following versions fixed my problem:
react: ^17.0.2,
react-dom: ^17.0.2,
react-particles-js: ^2.7.1,
react-scripts: 3.4.4,
eslint: ^6.6.0
When I go to www.cotswoldcohost.co.uk on Chrome, my console gives me Uncaught TypeError: Super expression must either be null or a function.
If this is the true underlying issue and not the Particle.js issue, then it's possibly an export issue in your app. I would check for these things:
Circular dependencies / imports
Importing a default export incorrectly (usually an import with curly braces that shouldn't be using braces)
A missing import statement
Just been through the entire project and removed all references to particles.js as its not critical...and its working. That was a long day, but I learnt a lot. Thanks for everyones input.
Related
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 having a problem with my React application. I am trying to deploy the website to GitHub pages but I am getting this error:
Error: "Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=u for the full message or use the non-minified dev environment for full errors and additional helpful warnings."
The error is telling me to use the non-minified development environment, but I cannot figure out how to do this.
Here is a link to my GitHub repository if you would like to check!
GitHub repository
I am not sure how to solve this since this is the first time I try to deploy a website. I tried installing some dependencies like Webpack, Babel, and Parcel to bundle my files into a readable JavaScript file, but my guess is that something is not being translated properly, meaning that there might be a syntax error somewhere in my code.
When running the Webpack dependency I did get a series of errors, that is why I installed some other libraries and loaders:
Error on Terminal
I ran into the same issue. The issue occurred wherever I deployed a production build to - locally or Firebase. I found that I had some comments in my render/return code and removing them solved this for me, as discussed at https://github.com/facebook/create-react-app/issues/8687.
I removed the comments as suggested, but ended up using gh-pages instead of deploying via a docs directory on github, so it worked in the end. I have deployed other apps after that with comments and they work just fine.
So if you ever run into this, try gh-pages instead
I am currently working on a react, working perfectly in local, the CSS seems to be broken in production, even when using the "normal" production deployment tuto made by react here
local
remote
node, npm and yarn versions are the same locally and remotly ... remote is debian, local is mac
I do not understand ...
Anyone had the same issue maybe ? :)
Found my answer ;) duplicate library, if anyone has
in package.json, if you declare #material-ui/core, you do not need to import #material-ui/styles
Have you checked in debug console from browser whether CSS files are loaded or not? Also by normal deployment do you mean production build served locally or remotely?
Please check network request made from console, sources and other part too.
my problem resides around Gatsby's production build failing to make project, which would seem and work as it should.
My goal is to adapt material-kit-react into Gatsbyv2 generated project.
done project in develop mode
so far so good i managed to do it all no problem, site looks exactly like it should in developer mode on my computer, but when i tried to put it on Github pages Gatsby build command needed to be executed, and when it did i errors appear around window object which is not defined on server where project tries to run when building (or something like that source: https://github.com/gatsbyjs/gatsby/issues/309 ). I resolved all of those errors as Gatsby employee suggested using if statement to not use window when its undefined, an it worked just fine, Gatsby ended its 'gatsby build' function and automatically published it to Github Pages thanks to ""deploy": "gatsby build --prefix-paths && gh-pages -d public""
After deploying however something strange happens to my site
project after publishing it onto Github pages
i found that it may be because css random class generator overlap somewhere, so i added JssProvider with generateRandomClassName from #material-ui/core into new layout component and it kida worked
material ui random name generator
but effect was far from desired:
deployed project after adding random class generator
and i tried to found whats wrong with this code, but i don't understand everything in react and gatsby yet and im empty of ideas. no errors, no eslint warning, everything falls apart anyway with no visible sign for me.
here is source material: https://github.com/Thrajnor/Gatsby-material-ui/tree/master/landingpage
and here is deployed page after build: https://thrajnor.github.io/Gatsby-material-ui/
i would really appreciate help or even a little advice in whats happening
I am a beginner with reactjs so I start to create a site, I do all installations, I installed Webpack to generate automatically the bundle.js all it works well and the file bundle.js is well generated but nothing that posster on the index page (page index is empty) and there are also no errors on the console. Somewhat help me please
It can be a bit messy to get up & running if you're not experienced with these technologies and how module bundling in Webpack works.
This is exactly why Facebook created the "create-react-app" solution so that you can get running without any build config and focus on creating the app that you're after instead. You can use it and "eject" to a custom setup anytime and see how they've done it:
create-react-app by Facebook
Here is a guide that you can follow along to create a simple config build:
Setup a React Environment Using webpack and Babel
You can also check out some of the other solutions that the community offers, here is a list of 143 React starter projects:
Find your perfect React starter project