What happens if you add the "@babel/preset-env" and "@babel/preset-react" presets to the babel.config.js, and remove .babelrc entirely?
It really looks to me like "@babel/preset-react" is just not applied, and you definitely do not need both a babel.config.js and a root .babelrc, so you can simplify your setup by only using the former.
I thought it was because the react component isn’t immediately closed and all the docs seem to wrap those in parens on the react website. Plus, I’ve been bitten by many weird syntax errors while mixing jsx and plain Javascript so I thought it was worth a try. But admittedly, I still don’t have a clear mental model about the jsx syntactic rules (even after having shipped a product that relies a lot on react and has the same configuration as op, yet somehow works).
You were 100% correct in this one. I didn’t remove .babelrc but made the file and copied what was added in @kokolegorille and it started to work. From what I found in the docs, it looks like babel is trying to look for babel.config.js file which is what was causing this problem.
In my opinion React is cool but weird. The reason being when you use syntactic sugar (I forgot which package helps with it) there is a lot of crazy things you can do. Technically we are writing it in a style but it’s being translated into something different. An example was when I had to bind every function I was making before but now just needing to name = () => {}
I’ve tagged your answer as the solution since you first brought it up and it was exactly what you said in regards to replacing .babelrc thank you 
I wish I was able to have 2 correct answers. @lucaong called it out in the beginning but your code example (same file) also helped plus the link provided. I haven’t build webpack from scratch in almost a year but yup, this upgrade is a little headache lol Feels like it went from pure Webpack -> .babelrc -> babel.config.js I wonder what is the next file we will be asked to add 
Again thank you for the help on this one.
