Uncaught Error: Could not locate the bindings file. Tried:
→ /myproject/build/realm.node
→ /myproject/build/Debug/realm.node
→ /myproject/build/Release/realm.node
→ /myproject/out/Debug/realm.node
→ /myproject/Debug/realm.node
→ /myproject/out/Release/realm.node
→ /myproject/Release/realm.node
→ /myproject/build/default/realm.node
→ /myproject/compiled/16.14.2/darwin/x64/realm.node
→ /myproject/addon-build/release/install-root/realm.node
→ /myproject/addon-build/debug/install-root/realm.node
→ /myproject/addon-build/default/install-root/realm.node
→ /myproject/lib/binding/node-v106-darwin-x64/realm.node
at bindings (bindings.js:126:1)
at ./node_modules/realm/lib/index.js (index.js:26:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/pages/Login.tsx (Home.tsx:19:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/Routes.tsx (App.tsx:29:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)

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

module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer",
      externals: [
        nodeExternals({
          allowlist: [/webpack(\/.*)?/, "electron-devtools-installer"],
        }),
      ],
    },
  },
  ...
};

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { spawn } = require("child_process");

// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
const defaultInclude = path.resolve(__dirname, "src");

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [{ loader: "babel-loader" }],
        include: defaultInclude,
      },
      {
        test: /\.ts?$/,
        use: [{ loader: "babel-loader" }, { loader: "ts-loader" }],
        include: defaultInclude,
      },
      {
        test: /\.tsx?$/,
        use: [{ loader: "babel-loader" }, { loader: "ts-loader" }],
        include: defaultInclude,
      },
      ... (some more css, image related config)
    ],
  },
  entry: "./src/index.tsx",
  // tell Webpack to load TypeScript files
  resolve: {
    // Look for modules in .ts(x) files first, then .js
    extensions: [".js", "jsx", ".ts", ".tsx"],

    alias: {
      ... (some more alias)
      "@realmDb": path.resolve(__dirname, "src/realm-db"),
    },
  },
  target: "electron-renderer",
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development"),
    }),
  ],
  devtool: "cheap-source-map",
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    stats: {
      colors: true,
      chunks: false,
      children: false,
    },
    before() {
      spawn("electron", ["."], {
        shell: true,
        env: process.env,
        stdio: "inherit",
      })
        .on("close", (code) => process.exit(0))
        .on("error", (spawnError) => console.error(spawnError));
    },
  },
};

mainWindow = new BrowserWindow({
    ...
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

import Realm from "realm";

const Login = () => {
    useEffect(() => {
        const REALM_ID = "my-realmid";
        const appConfig = { id: REALM_ID };
        const app = new Realm.App(appConfig);
        // I don't even need to remove the comment from the below code, the error is already raised by the code above
        // const credentials = Realm.Credentials.emailPassword(username, password);
        // user = await app.logIn(credentials);      
    })

   return <div>Test</div>
}