React Express Built app not working in production mode - reactjs

I have a Create React App working well in development mode both with
yarn start
and
yarn build > serve -s build
But when I upload my build folder to my distant server (on Planet Hoster), I get the following errors :
GEThttps://www.mysite.fr/static/js/main.f79317f8.js
[HTTP/2 404 Not Found 273ms]
GEThttps://www.mysite.fr/static/css/main.43a07738.css
[HTTP/2 404 Not Found 272ms]
What's happening here ? I've been working days and days on it and I still can't find something... Any help will be greatful !
My code to launch my express server :
const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "build")));
app.get("/", function (req, res) {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
[EDIT] - Here is my package.json file if it can helps :
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"cors": "^2.8.5",
"express": "^4.17.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"react-router-hash-link": "^2.4.3",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4",
"webpack": "^5.67.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

I am coming back to it lately but I finally found the solution.
To achieve it, I ran locally node app.js wich is the file that launch my frontend service. I then found in my logs that my script was trying to "modify the headers of my site after they were sent". I fix it and now it works.
My code was probably not that clean.
Still, thank you for your help !

Related

Blank page when deploying React app to Heroku with react-app-rewired

My website (react app) returns a blank page after deploying on Heroku. Although, it runs well on localhost. Hence, it most likely has to do with how Heroku run build and/or start.
The error arose after I had to change the scripts in package.json to :
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
I had to change from react-scripts to react-app-rewired as it was a requirement to use some libraries (e.g. most web3-related libraries).
Below are my package.json and server.js below. I read others having issues with server.js but it was working fine in my case before I made the changes mentioned above.
Package.json
{
"name": "app",
"version": "0.1.0",
"engines": {
"node": "16.16.0",
"npm": "8.11.0"
},
"private": true,
"dependencies": {
"#appbaseio/reactivesearch": "^3.34.3",
"#biconomy/web3-auth": "^1.0.0",
"#headlessui/react": "^1.7.5",
"#metamask/onboarding": "^1.0.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"apexcharts": "^3.35.3",
"assert": "^2.0.0",
"axios": "^0.27.2",
"bn.js": "^5.2.1",
"bootstrap": "^4.6.0",
"browserify": "^17.0.0",
"caver-js": "^1.8.2",
"chart.js": "^3.8.0",
"elliptic": "^6.5.4",
"ethereum-unit-converter": "^0.0.17",
"ethereumjs-util": "^7.1.5",
"ethers": "^5.7.0",
"express": "^4.18.2",
"js-sha3": "^0.8.0",
"moralis": "^1.11.0",
"primeicons": "^5.0.0",
"primereact": "^8.1.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-app-rewired": "^2.2.1",
"react-card-flip": "^1.1.5",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-form-stepper": "^2.0.3",
"react-ga": "^3.3.1",
"react-icons": "^4.6.0",
"react-minimal-pie-chart": "^8.3.0",
"react-moralis": "^1.4.1",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"react-step-wizard": "^5.3.11",
"react-toastify": "^9.0.5",
"slick-carousel": "^1.8.1",
"stream": "^0.0.2",
"swr": "^2.0.0",
"web-vitals": "^2.1.4",
"web3": "^1.7.5",
"web3modal": "^1.9.8"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"proxy": "https://buckets-backend.herokuapp.com",
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
server.js
// server.js
const express = require('express');
const compression = require('compression');
const path = require('path');
const app = express();
app.use(compression());
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`App is running on port ${PORT}`);
});
Procfile
web: node server.js
I am stuck, any idea how I could debug this?
Heroku will call start script automatically. You need to change the current "start" script to
"start:dev": "react-app-rewired start",
then create a "start" script which calls the server.js file of your server.
// make sure you pass a correct path to server.js
// if server.js is inside server folder, server/server.js
"start": "node server.js",
The issue was related to one of the new package I used: web3auth. According to their docs, the following resolved the problem:
Replace in package.json:
"browserslist": {
"production": [
"chrome >= 67",
"edge >= 79",
"firefox >= 68",
"opera >= 54",
"safari >= 14"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Source: https://web3auth.io/docs/troubleshooting/react-big-int-error

Why is react-admin ignoring my proxy configuration?

I am in the middle of upgrading my project from react-admin v3 to v4. I am currently stuck because the proxy configuration line in my package.json file is not working. It was working fine in v3.
Here is my package.json file:
{
"name": "my-admin",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:80",
"dependencies": {
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.10.8",
"#mui/styles": "^5.10.8",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^13.2.1",
"gojs": "^2.2.16",
"gojs-react": "^1.1.1",
"http-proxy-middleware": "^2.0.6",
"jwt-decode": "^3.1.2",
"prop-types": "^15.8.1",
"query-string": "^7.1.1",
"ra-compact-ui": "^1.1.5",
"ra-data-json-server": "^4.4.1",
"react": "^18.2.0",
"react-admin": "^4.4.1",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "set PORT=3006 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
and my setupProxy.js file:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:80',
changeOrigin: true,
})
);
};
I have also tried using http-proxy-middleware as described in this article:
https://medium.com/bb-tutorials-and-thoughts/react-how-to-proxy-to-backend-server-5588a9e0347
My app starts and runs fine, but all of the backend calls are being made to the same port that the app is running on (3006).
I have deleted the node_modules folder and the yarn.lock file, then re-ran yarn install and finally yarn start but nothing I do seems to make any difference.
Turns out the problem was only in my head.
I have not finished rewriting my dataProvider, so all of the ajax calls were failing. I saw the port 3006 on the calls and assumed the problem was due to the proxy. After I cleared my head, I realized that's not how proxies work. They do not rewrite the port in the URL. The proxy intercepts the call on the development server and proxies it over to port 80. That means the developer console in my browser will always show port 3006.
Anyway, once I get my dataProvider straightened out everything should be ok.

Why am I getting a "module not found" when using console.log in my react application?

I am attempting to use console.log() to be able to verify some values in my react application, but as soon as I type console.log() anywhere within any .js file in the src folder, the page doesn't load anymore and an error is thrown, saying I cannot import the file console-browserify/index.js because it falls outside of the src folder.
I have bootstrapped the project with npx create-react-app and normally I don't face any problems.
Here is the error as well as my package.json file : enter image description here
{
"name": "lovebook",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/styled": "^11.9.3",
"#mui/material": "^5.8.6",
"#mui/x-date-pickers": "^5.0.0-beta.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#web3auth/web3auth": "^1.1.0",
"console": "^0.7.2",
"console-browserify": "^1.2.0",
"date-fns": "^2.28.0",
"grommet": "^2.25.0",
"grommet-icons": "^4.7.0",
"magic-sdk": "^7.0.0",
"moralis": "^1.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-moralis": "^1.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4",
"web3uikit": "^0.1.163"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
make sure you type "cd (your project path name)" when you create a new terminal, so any excess packages don't get installed into the node modules problem. Maybe you should recreate the project and check whether the error keeps showing. At last I'm not sure if it's gonna help much, but try reloading the server you're running your application on

heroku config variables are undefined

I have a React app that I am deploying with Heroku. It only has a frontend and no backend.
In my app, I have 3 environment variables for EmailJS: USER_ID, SERVICE_ID, TEMPLATE_ID.
Here are the places I use them:
index.html
<script type="text/javascript">
(function(){
emailjs.init("%USER_ID%");
})();
</script>
email.js
emailjs
.sendForm(
process.env.SERVICE_ID,
process.env.TEMPLATE_ID,
e.target,
process.env.USER_ID
)
I have read the documentation on heroku here which says I need to use the heroku CLI or the config variables setting in the heroku dashboard.
I have a .env file that I have for local development with all these variables defined. The variables are also undefined when I try locally with npm start.
When I use bash and type echo $SERVICE_ID I get the desired outcome.
I have tried both heroku CLI and the config variables setting in the heroku dashboard and the env variables are still undefined.
What might I be doing wrong? Please let me know if I am unclear or if you guys would like more info. Thanks!
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"emailjs-com": "^2.6.4",
"jquery": "^3.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-ga": "^3.3.0",
"react-scripts": "^4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I believe I fixed it.
I changed all of my env variables to start with REACT_APP_ which according to the react documentation, is the proper way to deal with env variables in react. I also used react-dotenv which #Hoobs recommended.

Axios Proxy when using POST is not working

I'm having a problem on some of my request from my react application, all GET requests goes through my Cloud function without any issue however POST requests does not go through and send the traffic to localhost port 3000 instead, I have set up my Proxy in the Package.json and its working on GET requests so I can atleast assume that it should work.
Package.json file:
{
"name": "socialapp-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.20.0",
"dayjs": "^1.8.35",
"jwt-decode": "^3.0.0-beta.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": <Google Function link here>
}
The error I encountered when sending post request:
POST http://localhost:3000/user/image 500 (Internal Server Error)
When I'm using postman with the same payload and auth, it works, so I'm really baffled on what might be causing the issue.
I was having the same problem but in some moment I notice a unspect solution. The particular fetch problem was happening when my components received params by URL (useParams). I don't how but after avoid using this, I'd never had the same problem again.

Resources