Stylex with webpack ssr

[tienlx97]

I use webpack ssr to render react. That mean I have to file webpack.server.dev.js and webpack.client.dev.js

Should I add stylex config to webpack.server.dev.js ? This is my webpack.server.dev.js file :

const nodeExternals = require("webpack-node-externals");
const webpack = require("webpack");
const { paths } = require("../scripts/utils");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const LoadablePlugin = require("@loadable/webpack-plugin");

module.exports = {
  mode: "development",
  target: "node",
  entry: {
    server: [paths.srcServer],
  },
  output: {
    path: paths.serverBuild,
    filename: "index.js",
    publicPath: paths.publicPath,
    libraryTarget: "commonjs2",
  },
  resolve: {
    modules: [paths.src, "node_modules"],
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: require("./loaders.server.js"),
  plugins: [
    new LoadablePlugin(),
    new MiniCssExtractPlugin(),
    new webpack.DefinePlugin({
      "process.env.BROWSER": "false",
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
      "process.env.BACKEND_BASE_URL": JSON.stringify(
        process.env.BACKEND_BASE_URL
      ),
      "process.env.ASSETS_URL": JSON.stringify(process.env.ASSETS_URL),
    }),
  ],
  externals: [nodeExternals()],
  stats: "minimal",
};

[SukkaW]

Yes. You should add the stylex webpack plugin to the server webpack config as well.

stylex.create is a dummy function that should be transformed into the static classNames during the compilation, which then can be consumed by React DOM during the server-side rendering.

[tienlx97]

@SukkaW both webpack.client and webpack.server right

[SukkaW]

@SukkaW both webpack.client and webpack.server right

Right. You need to enable stylex plugin for both of them because React DOM on both client and server can only consume static classNames.