I'm working on my pet project on React and deploy it on gh-pages.
All worked well before I started using the name of the component like MyComponent.name. Locally it works well but on deploy crashed. On React Dev Tools I see that all the components become Anonymous.
Why it is happened? And how to avoid it?
Related
I have been working on a react app for two months.
Suddenly today when I ran 'npm start' it runs basic react app. By basic react app I mean the basic template you get when you create app using 'npx create-react-app', the one with react logo spinning etc.
My index.js file is returned to basic, App.js file as well.
Most dependencies in package.json file are gone, and I had plenty of them, axios, react-redux, redux-thunk, to name a few. Everything is gone.
Most other components are there. The ones that I created during the process.
I'm building a frontend with React and Material UI, and everything is running smoothly when I run npm start.
I also have an express app that serves a production build of this frontend (I run npm run-script build and take the prod build and place it in my express app's target destination). When I run this express app locally (with node app.js), everything is rendering and operating smoothly there as well.
Now, when I go onto my Amazon Lightsail linux instance that I was using to deploy, and run the express app over there with node app.js, the app runs, but all of the material-ui components do not render at all. All I see is the background.
Initial investigation led me to believe that within ReactDOM.render, the UI I was rendering needed to be wrapped in MuiThemeProvider. Have tried this to no avail. Its led me to a couple questions.
CSS
In my production build (build->static->css) all I have is one css file, which only lists the background. This makes sense as to why I can at least see the background when I deploy. My question here is, I'm using makeStyles and withStyles in my jsx a lot to create the bulk of my classes. In my production build, should these get compiled down into css?
My other question is if it should get compiled down to css, why am I able to see all of my material ui components when I run the express app locally on port 9000, but can only see the background when I serve it onto my static port on lightsail? It's the same build, so I almost find it hard to believe there's something wrong with my build.
Anyone experience anything like this? Any tips or advice on how to debug would be appreciated, I've been stuck for quite some time.
Our business is currently exploring Vercel to deploy our new landing pages written in React & NextJS. When running them locally (yarn dev) everything works correctly (both css imports and React hooks). When deployed on Vercel, both CSS & React are not working.
Project is organized as follows (conceptually):
./src/pages/_app.tsx: Imports css (uses tailwind as well) and wraps app into IconContext.Provider (for icons)
./src/pages/index.tsx: Exports (default) component, which uses inside react components to render / hooks to handle logic
We've spent the last few hours debugging this issue, but still no clue on where's the error (since we can perfectly launch them locally).
You can have a look at the website here: https://fudeo-flutter-advanced-git-master.aleamakers.vercel.app/
Can you understand where's the error? Thanks
Resolved and found the "error": I'm a complete idiot and React was working in reality. I though the opposite because of the missing css, which made everything messy.
The error I had was in purgecss: It had incorrect rules for purging css, and It was eliminating, at build time, all the custom css.
Thanks #Ramakay for your help. Actually using yarn build && yarn start made everything simpler to replicate locally (didn't notice them in the package.json).
I am using Ubuntu 18.04. I have isntalled react-dom as well. Why do I have to reinstall all these again?
Because React is a dependency of your project, not in your environment.
When your site is a live, you can't tell the clients: If you're looking for the React part, don't worry, it's on my machine.. It has to bundled with the rest of your code.
Also, if you have 2 projects with different React's version how it should be managed?
Unlike create-react-app which is used only to generate the project. Once the project been created, it's not connected to the tool (create-react-app) in any way.
Think of it like a car. No one cares if the car made in one country or another (create-react-app / manually / forked from OpenSource) as long as it has engine (React).
I want to know why deploying a React app to GitHub Pages is different than the usual way of creating a repository by naming it as {username}.github.io then pushing the build files there.
According to GitHub documentation not following the naming convention won't work but gh-pages creates a repository that doesn't follow the convention and still works but at http://{username}.github.io/{repo_name}.
And why is that we cannot deploy the app at http://{username}.github.io?
Thank you.