react : why does yarn start works and yarn build doesnt - reactjs

Question

I have a frontend served by a rest api and when i run yarn start i get a template page showing "loading" (the backend api is not running yet). But the problem is when i run yarn build, and then serve it with serve -s build or with a nginx i get an empty page. When i reload the page I have very briefly the content of the page (a fraction of second) and then a blank page with no error codes in the browser or the server requests.
I dont know where to start to troubleshoot this, could you help me define a method?
I have tried to build in containerized docker and outside containerized docker with serve -s build and it's the same: it doesnt come from docker.
The build folder contains all the necessary files and i dont have any errors on my page when loading in the browser or in the console where the nginx run. I will only put extracts relative to react as my nginx and docker are out of cause (i have tried everything outside nginx and docker with serve -s build)
This is my index.js :
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./components/App";
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter basename="/">
<App/>
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
And this is my App.js
import React from "react";
import { Route, Switch } from "react-router";
import { Container, Row } from "react-bootstrap";
import { BlogPage } from "./BlogPage";
import { PostPage } from "./PostPage";
function App() { return (
<Switch>
<Route path="/post/:id([\d]+)" component={PostPage}/>
<Route path="/tag/:tag/:page([\d]+)?" component={BlogPage}/>
<Route path="/:page([\d]+)?" component={BlogPage}/>
<Route path="*" component={() => (
<Container>
<Row>
<h1>404</h1>
</Row>
</Container> )}/>
</Switch>
); }
export default App;
this is my package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"homepage":".",
"dependencies": {
"#craco/craco": "^6.2.0",
"#headlessui/react": "^1.4.1",
"#heroicons/react": "^1.0.4",
"#tailwindcss/forms": "^0.3.3",
"#tailwindcss/typography": "^0.4.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"camelcase-keys": "^7.0.0",
"msw": "^0.35.0",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-responsive-carousel": "^3.2.21",
"react-router-dom": "^5.3.0",
"react-scripts": "^3.4.0",
"snakecase-keys": "^4.0.2",
"swr": "^1.0.0",
"tributejs": "^5.1.3",
"web-vitals": "^1.0.1",
"autoprefixer": "^9",
"storybook":"^6.5.6",
"postcss": "^7",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"bootstrap":"^4.5.3",
"react-bootstrap":"^1.3.0",
"typescript":"^2.8.0",
"jquery":"^1.9.1",
"popper.js":"^1.16.1",
"axios":"^0.27.2",
"axios-mock-adapter":"^1.21.1",
"dompurify":"^2.3.8"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"proxy": "http://localhost:8000",
"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"
]
},
"jest": {
"resetMocks": false
},
"devDependencies": {
"autoprefixer": "^9",
"postcss": "^7",
"tailwindcss": "npm:#tailwindcss/postcss7-compat"
}
}
I have tried to remove the / in the path to static content in my index.html following this post Why won't React production build run on the browser? but it's the same.
I have tried to put "homepage":"." in my package.json but it's the same.
I have tried to put "start_url": "/" in my manifest.json but it's the same.
I have tried to put in my App.js but it's the same.
I have tried to remove "proxy": "http://localhost:8000" (which is there for api calls) from my package.json but it's the same.
I have tried to use HashRouter instead of BrowserRouter in my index.js but it's the same.
The fact it is loading a fraction of a second makes me think the problem is not the path in index.html
In this post: component is getting loaded for fraction of second in React
they say : "In React undefined and false values are not rendered. Since the data you're getting is from an async function the notifications component will be rendered briefly until initialized and then removed."
So in my case, in my components, i have an api call with axios in my ComponentDidMount sections. Would it be possible that the fact the data from the api call is undefined makes the build page to not render? But why would it render in yarn start and not in yarn build?
ComponentDidMount section :
componentDidMount() {
const pk = this.props.match.params.id;
axios.get(`/api/cms/pages/${pk}/`).then((res) => { const post = res.data;
this.setState({
post,
loading: false });
}) }
render() {
if (!this.state.loading) {
const post = this.state.post;
return (
<div className="col-md-8">
<img src={post.header_image_url.url} className="img-fluid rounded" alt=""
/>
<hr />
<h1>{post.title}</h1>
<hr />
<StreamField value={post.body} />
</div> );
}else{
return <div className="col-md-8">Loading...</div>;
} }
}
Thank you