[Question] ssr bundle does not have styles

[mpasokolov]

Hello, can you help me?

my config

const path = require('path');
const webpack = require('webpack');
const helpers = require('./helpers');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');
const assetsPath = path.resolve(__dirname, '../static/dist');
const LoadablePlugin = require('@loadable/webpack-plugin')
var config = require('../src/config');
var host = config.host || 'localhost';
var port = (Number(config.port) + 1) || 3001
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const validDLLs = helpers.isValidDLLs('vendor', assetsPath);
if (process.env.WEBPACK_DLLS === '1' && !validDLLs) {
  process.env.WEBPACK_DLLS = '0';
  console.warn('webpack dlls disabled');
}


var projectRootPath = path.resolve(__dirname, '../');
const isDevelopment = process.env.NODE_ENV !== 'production';
const webpackConfig = module.exports = {
  devtool: 'source-map',
  mode: isDevelopment ? 'development' : 'production',
  context: projectRootPath,
  entry: {
    main: [
        `webpack-hot-middleware/client?path=http://${host}:${port}/__webpack_hmr`,
       './src/containers/Promo/seldon-ui.min.js',
        './src/client.js',
    ]
  },
  output: {
    // Filesystem path for static files
    path: path.resolve(projectRootPath, 'build/assets'),

    // Network path for static files
    publicPath: '/assets/',

    // Specifies the name of each output entry file
    filename: '[name].[fullhash].js',

    // Specifies the name of each (non-entry) chunk file
    chunkFilename: '[name].[fullhash].js'
  },
  performance: {
    hints: false,
  },
  // optimization: {
  //   minimizer: [
  //     new TerserPlugin()
  //   ],
  //   splitChunks: {
  //     chunks: 'all',
  //   },
  // },
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'thread-loader',
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
          }
        }],
        include: [path.resolve(__dirname, '../src')],
      },
      {
        test: /\.scss$/,
        use: [
          {
          loader: 'style-loader',
        },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: {
                localIdentName: !isDevelopment ? '[hash:base64:5]' : '[local]___[hash:base64:5]',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                logger: console, // HACK
                outputStyle: 'expanded',
              },
              sourceMap: true,
            },
          },
        ],
        include: [
          path.resolve(__dirname, '../src'),
        ],
        exclude: [
          path.resolve(__dirname, '../src', 'theme', 'nprogress.scss'),
          path.resolve(__dirname, '../src', 'theme', 'theme.scss'),

        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: {
                localIdentName: !isDevelopment ? '[hash:base64:5]' : '[local]___[hash:base64:5]',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                logger: console, // HACK
                outputStyle: 'expanded',
              },
            }
          },
        ],
        include: [
          path.resolve(__dirname, '../src', 'theme', 'theme.scss'),
          path.resolve(__dirname, '../src', 'theme', 'nprogress.scss'),
        ],
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto",
      },
      {
        test: /\.css$/,
        use: [
          {
          loader: 'style-loader',
        },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]',
              },
            },
          },
          {
            loader: 'postcss-loader',
          },
        ],
        include: [
          path.resolve(__dirname, '../src/theme', 'reset.css'),
          path.resolve(__dirname, '../node_modules', 'react-select', 'dist', 'react-select.css'),
          path.resolve(__dirname, '../node_modules', 'react-virtualized-select'),
          path.resolve(__dirname, '../node_modules', 'react-virtualized', 'styles.css'),
          path.resolve(__dirname, '../node_modules', 'react-virtualized-tree', 'lib', 'main.css'),
          path.resolve(__dirname, '../node_modules', 'react-grid-layout', 'css', 'styles.css'),
          path.resolve(__dirname, '../node_modules', 'react-resizable', 'css', 'styles.css'),
        ],
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
        }]
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240,
            mimetype: 'image/svg+xml',
          },
        }],
        exclude: [
          path.resolve(__dirname, '../src/theme/svg'),
        ],
      },
      {
        test: /\.svg$/,
        use: [{
          loader: 'svg-react-loader',
        }],
        include: [
          path.resolve(__dirname, '../src/theme/svg'),
        ],
      },
      {
        test: /\.(jpe?g|png)$/i,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240,
          },
        }],
        exclude: [
          path.resolve(__dirname, '../src/theme/svg'),
        ],
      },
    ],
  },
  resolve: {
    alias: {
      'components': path.resolve(__dirname, '../src/components'),
      'redux_store': path.resolve(__dirname, '../src/redux_store-test'),
      'utils': path.resolve(__dirname, '../src/utils'),
      'config': path.resolve(__dirname, '../src/config.js'),
      'app': path.resolve(__dirname, '../src/app.js'),
      'theme': path.resolve(__dirname, '../src/theme'),
      'js_lib': path.resolve(__dirname, '../js_lib'),
      'helpers': path.resolve(__dirname, '../src/helpers'),
      'hoc': path.resolve(__dirname, '../src/hoc'),
      'routes': path.resolve(__dirname, '../src/routes'),
      'containers': path.resolve(__dirname, '../src/containers'),
    },
    modules: ['src', 'node_modules'],
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
    plugins: [new TsconfigPathsPlugin({
      configFile: './tsconfig.json',
      extensions: ['.ts', '.js', '.tsx']
    })]
  },
  plugins: [
    new ReactRefreshWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), // ok
    new LoadablePlugin(), // ok
    new NodePolyfillPlugin(),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        '**/ *',
        ]
    }), // ok
    new ESLintPlugin(),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }), // ok
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        configFile: './tsconfig.json',
      },
    }) // ok
  ],
};

if (process.env.WEBPACK_DLLS === '1' && validDLLs) {
  helpers.installVendorDLL(webpackConfig, 'vendor');
}

if i set this i got css bundle on ssr. But I'm losing the source map of styles.

uconfig.client(defaultConfig, settings, {
    css_bundle: true,
    development: true
});

if not - i got empty styles in props of StartServer, only javascript.