We Keep Coding

React build is very different from development

Thanks you want to try to help me!
When I build my React web app it looks very different from the development mode. I use serve -s build to watch when the app is build. But also on my online Digitalocean server, it won't look the same as in development. So it probably has something to do with React or how it was build.
This is in development mode:
This is when it is build:
So it looks CSS or Javacript did not compile correctly.
This is my package.json
{
"name": "websitedominique",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.1",
"#mui/material": "^5.4.2",
"#mui/styled-engine-sc": "^5.4.2",
"#react-hook/mouse-position": "^4.1.3",
"#rehooks/window-size": "^1.0.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"concurrently": "^7.0.0",
"cors": "^2.8.5",
"express": "^4.17.3",
"framer-motion": "^4.1.17",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.3",
"swiper": "^6.8.4",
"use-react-dimensions": "^2.0.1",
"web-vitals": "^1.0.1"
},
"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"
]
},
"devDependencies": {
"nodemon": "^2.0.15"
}
}
I Hope someone can help me with this. Thanks for all help!

you should add a .env file in your root and add:
REACT_APP_SC_DISABLE_SPEEDY=true
The Styled Components library uses something called the "Speedy mode" to inject styles on production. you can Google it for more info

await function failing, is a babel compile thing missing?

I've just taken over a project from a disgruntled developer who thinks he's the best thing since sliced bread.
The error
He swears his code was running on the last commit... although, I get problems in an async/await. I vaguely remember having similar problems when not supporting the right version of babel, but that was years back. The project is created with create-react-app.
Here's the package.json file:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"jest": {
"transform": {}
},
"dependencies": {
"#makerdao/multicall": "^0.11.0",
"#material-ui/core": "^4.11.0",
"#material-ui/data-grid": "^4.0.0-alpha.8",
"#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",
"bignumber.js": "^9.0.1",
"bip32": "^2.0.6",
"bip38": "^3.1.1",
"bip39": "^3.0.2",
"bitcoinjs-lib": "^5.2.0",
"bs58check": "^2.1.2",
"ci": "^1.0.0",
"fake-indexeddb": "^3.1.2",
"highcharts": "^8.2.2",
"highcharts-react-official": "^3.0.0",
"jest-fetch-mock": "^3.0.3",
"json-bigint": "^1.0.0",
"json-bignumber": "^1.0.2",
"keccak256": "^1.0.2",
"node-fetch": "^2.6.1",
"puppeteer": "^5.5.0",
"qrcode-svg": "^1.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"rimraf": "^2.6.3",
"secp256k1": "^4.0.2",
"typescript": "^4.0.5",
"web3": "^1.3.0",
"xmlhttprequest": "^1.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --verbose",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:react/recommended"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"ansi-regex": "^4.1.0",
"eslint-plugin-react": "^7.21.5",
"gh-pages": "^3.1.0",
"react-scripts": "^3.4.4"
}
}

You are passing a promise to the function, and promise is not a function. You should do instead: await f and not execute it by await f() since the promise just needs to be called and not to be executed.

SyntaxError: ..\node_modules\react-router-native\BackButton.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:14):

I have a problem with react-router-native in react-native project,
Just enter code here boot with yarn start I have this error in console:
5 |
6 | class BackButton extends React.Component {
> 7 | handleBack = () => {
| ^
8 | if (this.history.index === 0) {
9 | return false; // home screen
10 | } else {
Add #babel/plugin-proposal-class-properties to the 'plugins' section of your Babel config to enable transformation.
I have tried to follow the suggested guide, that is to install .
#babel/plugin-proposal-class-properties
To insert the file .babelrc and babel.config.js in the root, but it didn't work.
My package.json
{
"name": "Project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#mod/common": "1.0.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.47",
"#types/react": "^16.9.41",
"#types/react-dom": "^16.9.8",
"#types/react-router-dom": "^5.1.5",
"http-proxy-middleware": "^1.0.4",
"react": "^16.13.1",
"react-art": "^16.13.1",
"react-dom": "^16.13.1",
"react-multi-lang": "^2.1.1",
"react-native": "^0.62.2",
"react-native-web": "^0.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"sockjs-client": "^1.4.0",
"typescript": "^3.7.5",
"universal-cookie": "^4.0.3"
},
"scripts": {
"start": "cross-env SKIP_PREFLIGHT_CHECK=true 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"
]
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#types/react-native": "^0.62.16",
"cross-env": "^7.0.2"
}
}

Change of window focus when developping with react

I have a setup using react. When i run yarn start, i can start coding and changes are visible in my browser. Problem is, every 10 secons or so my terminal wants to let me know about error in mycode and always change my focus back to my editor within the specific file where the error would be. it is so annoying and frustrating. I guess it has something to do with eslint. I tried looking at the doc and even erased the eslinrc.json file but still persist with the same behavior. Is there any way to stop that behavior.
here is my package.json
{
"name": "korean-recipes",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.5",
"#material-ui/icons": "^4.9.1",
"#reduxjs/toolkit": "^1.2.5",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5"
},
"scripts": {
"lint": "yarn run start",
"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"
]
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-react": "^7.19.0"
}
}

I found the problem. It is a behavior create by 'npx create-react-app' by default.
To remove the behavior, simply add a .env file with the following variable:
REACT_EDITOR=none
Source: https://create-react-app.dev/docs/advanced-configuration

Reactjs Build Showing blank page on apache server?

I have created a build of my react app and deploy locally on apache server but it's showing a blank page. Every js, css and json file i am getting status 200 on my network tab of browser. any help is appreciated.Thank you.
This is my project package.json file.
{
"name": "client_side",
"homepage":".",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.7.2",
"#material-ui/icons": "^4.5.1",
"axios": "^0.19.0",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"create-react-app": "^3.3.0",
"history": "^4.10.1",
"jquery": "^3.4.1",
"jss": "^10.0.0",
"material-table": "^1.54.1",
"material-ui-dropzone": "^2.4.7",
"md5": "^2.2.1",
"md5-hash": "^1.0.1",
"mdbreact": "^4.23.0",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-image": "^2.2.1",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"tubular-react": "^3.0.0-rc6",
"typeface-roboto": "0.0.75",
"typescript": "^3.7.2",
"update": "^0.7.4"
},
"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"
]
}
}
Below is my html looks like: