fix: Fix type: module errors after the make command is executed

.eslintrc.js → .eslintrc.cjs

@@ -1,3 +1,4 @@
+// TODO: Can I make you a module? Think I need to upgrade eslint
 module.exports = {
   root: true,
   env: {

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

.prettierrc.js

@@ -2,7 +2,7 @@
  * This file defines specific rules for Prettier. It adjusts their default settings.
  * We recommend these settings if your lab does not have specific style standards.
  */
-module.exports = {
+export default {
   printWidth: 100, // Sets the maximum line size to 100 (default is 80)
   quoteProps: "as-needed", // Add quotes around props as needed
   trailingComma: "es5", // Add a trailing comma to all es5 modules

forge.config.mjs → forge.config.js

@@ -42,11 +42,11 @@ export default {
       config: {
         build: [
           // Build files that use the main config
-          { entry: "src/Electron/main.js", config: "vite.main.config.mjs" },
+          { entry: "src/Electron/main.js", config: "vite.main.config.js" },
           // Build files that use the preload config
-          { entry: "src/Electron/preload.js", config: "vite.preload.config.mjs" },
+          { entry: "src/Electron/preload.js", config: "vite.preload.config.js" },
         ],
-        renderer: [{ name: "main_window", config: "vite.renderer.config.mjs" }],
+        renderer: [{ name: "main_window", config: "vite.renderer.config.js" }],
       },
     },
     {

package.json

@@ -18,6 +18,7 @@
   "repository": "https://github.com/brown-ccv/honeycomb",
   "license": "MIT",
   "private": true,
+  "type": "module",
   "main": ".vite/build/main.js",
   "homepage": ".",
   "dependencies": {
@@ -89,12 +90,12 @@
     "make:windows": "electron-forge make --arch x64 --targets @electron-forge/maker-squirrel",
     "make:linux": "electron-forge make --arch x64 --targets @electron-forge/maker-deb",
     "make:mac": "electron-forge make  --arch universal --targets @electron-forge/maker-dmg",
-    "cli": "node cli.mjs",
+    "cli": "node cli.js",
     "commit": "git-cz",
     "format": "prettier --write .",
     "lint": "eslint .",
     "prepare": "husky",
-    "postinstall": "node version.mjs"
+    "postinstall": "node version.js"
   },
   "browserslist": {
     "production": [

src/App/App.jsx

@@ -52,14 +52,6 @@ export default function App() {
         "Task Settings": SETTINGS,
       });
 
-     // TEMP: Testing to ensure the config is setup correctly
-      console.log(
-        "ENVIRONMENT",
-        import.meta.env.PACKAGE_NAME,
-        import.meta.env.PACKAGE_VERSION,
-        import.meta.env
-      );
-
       // If on desktop
       if (CONFIG.USE_ELECTRON) {
         // TODO @brown-ccv #443 : Pass NODE_ENV here as well

src/Electron/main.js

@@ -36,7 +36,9 @@ process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
 /************ APP LIFECYCLE ***********/
 
 // Early exit when installing on Windows: https://www.electronforge.io/config/makers/squirrel.windows#handling-startup-events
-if (require("electron-squirrel-startup")) app.quit();
+// if (require("electron-squirrel-startup")) app.quit();
+// TODO: This causes the app to quit right away, even in development
+// if (import("electron-squirrel-startup")) app.quit();
 
 // Initialize the logger
 // TODO @brown-ccv #398: Handle logs in app.getPath('logs')
@@ -165,7 +167,8 @@ async function handleGetCommit() {
       };
     } else {
       // Load the Git Commit SHA and Branch that was created at build-time
-      return JSON.parse(fs.readFileSync(path.resolve(__dirname, "version.json")));
+      // return JSON.parse(fs.readFileSync(path.resolve(__dirname, "version.json")));
+      return JSON.parse(fs.readFileSync(path.resolve(import.meta.dirname, "version.json")));
     }
   } catch (e) {
     log.error("Unable to determine git version");
@@ -297,7 +300,15 @@ function createWindow() {
   // Create the browser window
   const mainWindow = new BrowserWindow({
     icon: "./favicon.ico",
-    webPreferences: { preload: path.join(__dirname, "preload.js") },
+    // webPreferences: { preload: path.join(__dirname, "preload.js") },
+    webPreferences: {
+      // preload: path.join(import.meta.dirname, "preload.js"),
+      preload: path.join(import.meta.dirname, "preload.mjs"),
+      // TEST
+      sandbox: false,
+      contextIsolation: true,
+      // enableRemoteModule: false,
+    },
     width: 1500,
     height: 900,
     // TODO @brown-ccv: Settings for preventing the menu bar from ever showing up
@@ -311,7 +322,10 @@ function createWindow() {
     mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
   } else {
     // TODO @brown-ccv: JsPsych protections for loading from a file://
-    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
+    // mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
+    mainWindow.loadFile(
+      path.join(import.meta.dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`)
+    );
   }
   log.info("Loaded Renderer process");
 }

src/Electron/preload.js

@@ -1,7 +1,11 @@
 import { contextBridge, ipcRenderer } from "electron";
+import log from "electron-log";
 
+log.info("PRELOAD");
 /** Load bridges between the main and renderer processes when the preload process is first loaded */
 process.once("loaded", () => {
+  // TODO: "module" stuff is working but this "loaded" state is never finished
+  log.info("PRELOAD LOADED");
   contextBridge.exposeInMainWorld("electronAPI", {
     setConfig: (config) => ipcRenderer.send("setConfig", config),
     setTrigger: (triggerCodes) => ipcRenderer.send("setTrigger", triggerCodes),

src/config/env.js

@@ -18,4 +18,6 @@ const config = {
   USE_EEG,
   USE_CAMERA,
 };
+
+console.log("CONFIG", window.electronAPI, config);
 export default config;

vite.browser.config.js

@@ -1,7 +1,7 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig, mergeConfig } from "vite";
 
-import baseConfig from "./vite.base.config.mjs";
+import baseConfig from "./vite.base.config.js";
 
 /** Vite configuration used when running in the browser */
 export default defineConfig(mergeConfig(baseConfig, defineConfig({ plugins: [react()] })));

vite.main.config.mjs → vite.main.config.js

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from "vite";
-import { external, getBuildConfig, getDefineKeys, pluginHotRestart } from "./vite.base.config.mjs";
+import { external, getBuildConfig, getDefineKeys, pluginHotRestart } from "./vite.base.config.js";
 
 /** Vite configuration for the main process */
 export default defineConfig((env) =>
@@ -8,7 +8,7 @@ export default defineConfig((env) =>
       lib: {
         entry: env.forgeConfigSelf.entry,
         fileName: () => "[name].js",
-        formats: ["cjs"],
+        formats: ["es"],
       },
       rollupOptions: { external },
     },

vite.preload.config.mjs → vite.preload.config.js

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from "vite";
-import { external, getBuildConfig, pluginHotRestart } from "./vite.base.config.mjs";
+import { external, getBuildConfig, pluginHotRestart } from "./vite.base.config.js";
 
 /** Vite configuration for the preload process */
 export default defineConfig((env) =>
@@ -10,11 +10,14 @@ export default defineConfig((env) =>
         // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
         input: env.forgeConfigSelf.entry,
         output: {
-          format: "cjs", // TODO: Switch to ESM modules
+          format: "es",
           // It should not be split chunks.
           inlineDynamicImports: true,
-          entryFileNames: "[name].js",
-          chunkFileNames: "[name].js",
+          // NOTE: The preload script must be built with the .mjs extensions: https://www.electronjs.org/docs/latest/tutorial/esm#esm-preload-scripts-must-have-the-mjs-extension
+          // entryFileNames: "[name].js",
+          // chunkFileNames: "[name].js",
+          entryFileNames: "[name].mjs",
+          chunkFileNames: "[name].mjs",
           assetFileNames: "[name].[ext]",
         },
       },

vite.renderer.config.mjs → vite.renderer.config.js

@@ -1,7 +1,7 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig, mergeConfig } from "vite";
 
-import baseConfig, { getDefineKeys } from "./vite.base.config.mjs";
+import baseConfig, { getDefineKeys } from "./vite.base.config.js";
 
 /** Vite configuration for the render process */
 export default defineConfig(({ forgeConfigSelf }) => {