Ошибка при запуске npm run dev при реализации рендеринга на стороне сервера React

Question

Я работаю над проектом React JS и пытаюсь выполнить рендеринг на стороне сервера. После изучения этого урока: https://dev.to/achhapolia10/implementing-server-side-rendering-using-react-and-express-22nh.

Я выполняю все шаги, и все работает нормально. Затем я пытаюсь реализовать свой собственный проект и у меня возникли следующие проблемы:

Когда я запускаю 'npm run dev' я получаю сообщение об ошибке SyntaxError, неожиданная загрузка токена при попытке загрузить файл CSS.

Также, если в комментариях к строке, в которую я импортирую css, появляется ошибка, на этот раз связанная с файлом png, поэтому я думаю, что ошибка в том, что что-то неправильно настроено в веб-пакете или в babel.

Babel пытается проанализировать файл CSS, даже если в webpack.config определены правильные загрузчики. js

Мой webpack.config. js Файл:

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; 

Мой пакет. 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"
  }
}

Мой index.jsx:

import React from "react";

import {hydrate} from "react-dom";

import App from '../pages/App';

hydrate(<App/>, document.getElementById("root"));

Мое приложение. 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;

ОШИБКА при запуске 'npm run dev':

Если кто-то может помочь мне с этим, я полностью потерян.