Рендеринг на стороне сервера с помощью Express + ReactJS + Webpack 4 2019

Question

Не могли бы вы помочь мне с рендерингом на стороне сервера ??Я использую webpack 4, реагируя на js и express, я следовал инструкциям по настройке рендеринга на стороне сервера в моем приложении Express, эти учебники, из которых я пытаюсь научиться, устарели, так что я должен понять концепцию и использовать обновленный кодв моем приложении.Проблема здесь в том, что я не специалист по веб-пакетам или вавилонским материалам, поэтому, хотя я теоретически понимаю концепцию, лежащую в основе учебника, мне трудно его реализовать.

Я ссылался на эти учебники:

https://www.youtube.com/watch?v=tsEHfL-Ul1Y,

https://dev.to/aurelkurtula/setting-up-a-minimal-node-environment-with-webpack-and-babel--1j04,

Лучшее, что я мог сделать, это добиться рендеринга на стороне сервера без JSX.

https://github.com/xxxgrime/ssrerror это репо

с настройкой webpack и babel, когда я пытаюсь запустить npm, я получаю

окна не определены

. Может кто-нибудь помочь мне с этим или, может быть,направить меня к обновленному учебнику или связанным ресурсам ??

это мой Webpack Config

const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

const serverConfig = {
  entry: "./src/server/index.js",
  target: "node",
  output: {
    path: path.resolve(__dirname, ""),
    filename: 'server.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }

        ]
      }
    ]
  }
}

const browserConfig = {

  entry: "./src/browser",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }

        ]
      }
    ]
  },
  plugins: [htmlPlugin]
}
module.exports = [serverConfig,browserConfig]

Answer 1

Я не уверен, поможет ли это, но, если рендеринг на стороне сервера - вариант, я создал инструмент для этого с простым HTML - поскольку он в основном предназначен только для шаблонов для замены, он должен работать и с JSX:

https://www.npmjs.com/package/ezrender

Answer 2

Итак, я нашел решение моей проблемы, в моих конфигурационных файлах что-то не так, я получаю windows undefined из-за того, как я импортировал стили в мое приложение

для получения дополнительной информации.проверить это окно не определено (webpack и реагироватьJS)