Error running 'npm run dev' implementing React Server Side Rendering - reactjs

Question

Im on a React JS project and im trying to do Server Side Rendering.
After following this tutorial: https://dev.to/achhapolia10/implementing-server-side-rendering-using-react-and-express-22nh.
I follow all the steps and everything worked fine. Then i try to implement my own project an i had the following problems.
When i run 'npm run dev' i get the error SyntaxError, unexpected token loadingwhen trying to load CSS file.
Also if a comment the line in which i import the css , an error appears, this time related to a png file , so i think the error is because something is missconfigured on webpack or babel.
Babel tries to parse a CSS file even though proper loaders are defined in the webpack.config.js
My webpack.config.js file is:
const config = {
entry: {
vendor: ["#babel/polyfill", "react"], // Third party libraries
index: ["./src/components/entrypoints/index.jsx"]
/// Every pages entry point should be mentioned here
},
output: {
path: path.resolve(__dirname, "src", "public"), //destination for bundled output is under ./src/public
filename: "[name].js" // names of the bundled file will be name of the entry files (mentioned above)
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader", // asks bundler to use babel loader to transpile es2015 code
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
},
exclude: [/node_modules/, /public/]
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
},
{
test: /\.s?css$/, // archivos .css o .scss
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader'},
]
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
]
},
resolve: {
extensions: [".js", ".jsx", ".json", ".wasm", ".mjs", "*"]
} // If multiple files share the same name but have different extensions, webpack will resolve the one with the extension listed first in the array and skip the rest.
};
module.exports = config;
My package.json :
"name": "projectssr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack -wd",
"dev": "nodemon --exec babel-node src/server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-es2017": "^7.0.0-beta.53",
"#material-ui/core": "^4.7.0",
"#material-ui/icons": "^4.5.1",
"axios": "^0.19.2",
"babel-loader": "^8.0.6",
"bootstrap": "^4.4.1",
"compression": "^1.7.4",
"ejs": "^3.0.1",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"jquery": "^3.4.1",
"react": "^16.13.0",
"react-bootstrap-dropdown-menu": "^1.1.15",
"react-burger-menu": "^2.6.13",
"react-dom": "^16.13.0",
"react-icons": "^3.8.0",
"react-intl-tel-input": "^7.1.0",
"react-phone-number-input": "^2.5.1",
"react-scripts": "3.2.0",
"svg-url-loader": "^5.0.0",
"url-loader": "^4.0.0"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.7",
"#babel/node": "^7.8.7",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/polyfill": "^7.8.7",
"#babel/preset-env": "^7.8.7",
"#babel/preset-react": "^7.8.3",
"#babel/register": "^7.8.6",
"css-loader": "^3.4.2",
"node-sass": "^4.13.1",
"nodemon": "^2.0.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
My index.jsx :
import React from "react";
import {hydrate} from "react-dom";
import App from '../pages/App';
hydrate(<App/>, document.getElementById("root"));
My App.js :
import React from 'react';
import './assets/css/App.css';
import Header from './componentes/Header';
import Izquierda from './componentes/Izquierda';
import Derecha from './componentes/Derecha';
import Footer from './componentes/Footer';
import BurgerMenu from './componentes/BurgerMenu';
class App2 extends React.Component {
state = {
valor: 0,
/* data: null */
};
//Funcion para cambiar la "vista" en la parte derecha , en función de la opción seleccionada en el menú (historial,saldo,recarga...etc)
callbackFunction = (childData) => {
this.setState({ valor: childData });
}
render() {
return (
<div className="App">
<Header />
<div id="contenedor">
<BurgerMenu parentCallback={this.callbackFunction} />
</div>
<Izquierda estado={this.state.valor} />
<Derecha estado={this.state.valor} />
{/* Render the newly fetched data inside of this.state.data */}
{/* <p className="App-intro">{this.state.data}</p> */}
<Footer />
</div>
);
}
}
export default App2;
The ERROR when running 'npm run dev':
If anyone can help me with this , im completely lost.