diff --git a/gulp/gulpfile.js b/gulp/gulpfile.js
index 0f4f4185..87901377 100644
--- a/gulp/gulpfile.js
+++ b/gulp/gulpfile.js
@@ -146,7 +146,7 @@ gulp.task("main.webserver", () => {
  */
 function serve({ version = "web" }) {
     browserSync.init({
-        server: buildFolder,
+        server: [buildFolder, path.join(baseDir, "src", "js")],
         port: 3005,
         ghostMode: {
             clicks: false,
diff --git a/gulp/webpack.config.js b/gulp/webpack.config.js
index 14987cfa..7db0bf0b 100644
--- a/gulp/webpack.config.js
+++ b/gulp/webpack.config.js
@@ -71,6 +71,7 @@ module.exports = ({ watch = false, standalone = false, chineseVersion = false, w
                     type: "javascript/auto",
                 },
                 { test: /\.(png|jpe?g|svg)$/, loader: "ignore-loader" },
+                { test: /\.nobuild/, loader: "ignore-loader" },
                 {
                     test: /\.md$/,
                     use: [
diff --git a/gulp/webpack.production.config.js b/gulp/webpack.production.config.js
index fd7551e0..72bae9f4 100644
--- a/gulp/webpack.production.config.js
+++ b/gulp/webpack.production.config.js
@@ -177,6 +177,7 @@ module.exports = ({
                     type: "javascript/auto",
                 },
                 { test: /\.(png|jpe?g|svg)$/, loader: "ignore-loader" },
+                { test: /\.nobuild/, loader: "ignore-loader" },
                 {
                     test: /\.js$/,
                     enforce: "pre",
diff --git a/src/js/mods/dev_mod.js b/src/js/mods/demo_mod.nobuild/index.js
similarity index 100%
rename from src/js/mods/dev_mod.js
rename to src/js/mods/demo_mod.nobuild/index.js
diff --git a/src/js/mods/mod_interface.js b/src/js/mods/mod_interface.js
index b0a8fe0c..89330d3d 100644
--- a/src/js/mods/mod_interface.js
+++ b/src/js/mods/mod_interface.js
@@ -1,5 +1,6 @@
 /* typehints:start */
 import { ModLoader } from "./modloader";
+import { Component } from "../game/component";
 import { MetaBuilding } from "../game/meta_building";
 /* typehints:end */
 
@@ -16,7 +17,7 @@ import { Loader } from "../core/loader";
 import { LANGUAGES } from "../languages";
 import { matchDataRecursive, T } from "../translations";
 import { gBuildingVariants, registerBuildingVariant } from "../game/building_codes";
-import { gMetaBuildingRegistry } from "../core/global_registries";
+import { gComponentRegistry, gMetaBuildingRegistry } from "../core/global_registries";
 import { MODS_ADDITIONAL_SHAPE_MAP_WEIGHTS } from "../game/map_chunk";
 
 const LOG = createLogger("mod-interface");
@@ -106,6 +107,14 @@ export class ModInterface {
         }
     }
 
+    /**
+     *
+     * @param {typeof Component} component
+     */
+    registerComponent(component) {
+        gComponentRegistry.register(component);
+    }
+
     /**
      *
      * @param {object} param0
diff --git a/src/js/mods/modloader.js b/src/js/mods/modloader.js
index 45c70caa..b9a7d4d2 100644
--- a/src/js/mods/modloader.js
+++ b/src/js/mods/modloader.js
@@ -41,8 +41,12 @@ export class ModLoader {
                 if (G_IS_STANDALONE) {
                     mods = await getIPCRenderer().invoke("get-mods");
                 } else if (G_IS_DEV && globalConfig.debug.loadDevMod) {
-                    // @ts-expect-error
-                    mods = [require("!!raw-loader!./dev_mod")];
+                    const mod = await (
+                        await fetch("http://localhost:3005/mods/demo_mod.nobuild/index.js", {
+                            method: "GET",
+                        })
+                    ).text();
+                    mods.push(mod);
                 }
 
                 mods.forEach(modCode => {