electron-webpack.json

{
  "renderer": {
    "webpackConfig": "webpack.renderer.additions.js"
  },
  "main": {
    "webpackConfig": "webpack.main.additions.js"
  },

  "title": "Chrysalis",

  // "whiteListedModules" means "modules which are bundled by webpack during
  // the build rather than treated as external". Notably, "react" requires
  // being bundled to work well in the renderer process, so electron-webpack
  // bundles it *implicitly*. That means we want all dependencies which talk to
  // react to also be bundled, since we want them to see the same instance of
  // react when they require("react") as our own (bundled) code does. Otherwise,
  // you are liable to see runtime errors like "Hooks can only be called inside
  // the body of a function component."
  //
  // Specifically, the rules of the road are:
  //  - dependencies used by the main process MUST NOT be listed/bundled
  //  - dependencies which invoke require("react") in the renderer process MUST
  //    be listed/bundled
  //  - dependencies used *only* by the renderer process which do not directly
  //    require("react") MAY be bundled
  //
  // See:
  //  - https://github.com/electron-userland/electron-webpack/issues/361
  //  - https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
  //  - https://github.com/expo/expo-cli/issues/2835#issuecomment-722952296
  //  - https://github.com/facebook/react/issues/13991#issuecomment-683109390
  //  - https://github.com/electron-userland/electron-webpack/issues/283#issuecomment-487470932
  "whiteListedModules": [
    "@mui/system",
    "react",
    "react-dnd",
    "react-dnd-html5-backend",
    "react-color",
    "react-dom",
    "react-i18next",
    "react-toastify",
    "react-markdown",
    "remark-emoji",
    "remark-gfm",
    "@emotion/react",
    "@emotion/styled"
  ]
}