Does Material-UI have different style results in production mode?

Programming
, , , ,
1

Rewritten Problem

I am writing a React app that uses server-side rendering and following the instructions to set up a file. However, when I bundle the file in production mode, some styling is missing. This styling is the one I wrote with makeStyles(), but the built-in styles work fine.

My .babelrc configuration file looks like this:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": { "version": 3, "proposals": true },
        "targets": {
          "browsers": "> 1%, not ie 11, not op_mini all",
          "node": 13
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
    [
      "import",
      {
        "libraryName": "@material-ui/icons",
        "libraryDirectory": "utils", // default: lib
        "camel2DashComponentName": false // default: true
      },
      "@material-ui/icons"
    ]
  ]
}

And here is my webpack.config.js file:

const path = require("path");

const nodeExternals = require("webpack-node-externals");

const commonConfig = {
  devtool: "source-map",
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }]
  },
  resolve: {
    alias: {
      "@material-ui/core": "@material-ui/core/es"
    }
  }
};

module.exports = [
  {
    ...commonConfig,
    entry: "./src/client",
    output: {
      path: path.resolve(__dirname, "public")
    }
  },
  {
    ...commonConfig,
    target: "node",
    entry: "./src/server",
    output: {
      path: path.resolve(__dirname, "server")
    },
    externals: [nodeExternals()]
  }
];

The full code can be found in CodeSandbox and Github.

I have two possible fixes: removing the code that removes the styling file (in client.js) or removing the nodeExternal() plugin in webpack.config.js. What do you think would be the best solution? Additionally, why is there a difference between development and production modes?

2

The best solution is to remove the nodeExternals() plugin in webpack.config.js. The reason for the difference between development and production modes is that the nodeExternals() plugin excludes all node_modules dependencies from the server bundle, including the @material-ui/core/styles dependency used for makeStyles().