diff --git a/app/models/theme.rb b/app/models/theme.rb
index 347f54f3a90..8a6e3199984 100644
--- a/app/models/theme.rb
+++ b/app/models/theme.rb
@@ -6,7 +6,7 @@ require "json_schemer"
 class Theme < ActiveRecord::Base
   include GlobalPath
 
-  BASE_COMPILER_VERSION = 86
+  BASE_COMPILER_VERSION = 87
 
   class SettingsMigrationError < StandardError
   end
diff --git a/lib/theme_javascript_compiler.rb b/lib/theme_javascript_compiler.rb
index c599576f56f..bc6dbec9131 100644
--- a/lib/theme_javascript_compiler.rb
+++ b/lib/theme_javascript_compiler.rb
@@ -209,8 +209,7 @@ class ThemeJavascriptCompiler
   end
 
   def raw_template_name(name)
-    name = name.sub(/\.(raw|hbr)\z/, "")
-    name.inspect
+    name.sub(/\.(raw|hbr)\z/, "")
   end
 
   def append_raw_template(name, hbs_template)
@@ -218,16 +217,27 @@ class ThemeJavascriptCompiler
       DiscourseJsProcessor::Transpiler.new.compile_raw_template(hbs_template, theme_id: @theme_id)
     source_for_comment = hbs_template.gsub("*/", '*\/').indent(4, " ")
     modern_replacement_marker = hbs_template.include?("{{!-- has-modern-replacement --}}")
-    @output_tree << ["#{name}.js", <<~JS]
-      (function() {
-        /*
+
+    source = <<~JS
+      /*
       #{source_for_comment}
-        */
-        const addRawTemplate = requirejs('discourse-common/lib/raw-templates').addRawTemplate;
-        const template = requirejs('discourse-common/lib/raw-handlebars').template(#{compiled});
-        addRawTemplate(#{raw_template_name(name)}, template, { themeId: #{@theme_id}, themeName: #{@theme_name.to_json}, hasModernReplacement: #{modern_replacement_marker} });
-      })();
+      */
+
+      import { template as compiler } from "discourse-common/lib/raw-handlebars";
+      import { addRawTemplate } from "discourse-common/lib/raw-templates";
+
+      let template = compiler(#{compiled});
+
+      addRawTemplate(#{raw_template_name(name).to_json}, template, {
+        themeId: #{@theme_id},
+        themeName: #{@theme_name.to_json},
+        hasModernReplacement: #{modern_replacement_marker}
+      });
+
+      export default template;
     JS
+
+    append_module source, "raw-templates/#{raw_template_name(name)}", "js", include_variables: false
   rescue MiniRacer::RuntimeError, DiscourseJsProcessor::TranspileError => ex
     raise CompileError.new ex.message
   end
diff --git a/spec/lib/theme_javascript_compiler_spec.rb b/spec/lib/theme_javascript_compiler_spec.rb
index dab065bf9db..50706ab879f 100644
--- a/spec/lib/theme_javascript_compiler_spec.rb
+++ b/spec/lib/theme_javascript_compiler_spec.rb
@@ -8,15 +8,15 @@ RSpec.describe ThemeJavascriptCompiler do
       template = "<h1>hello</h1>"
       name = "/path/to/templates1"
       compiler.append_raw_template("#{name}.raw", template)
-      expect(compiler.raw_content.to_s).to include("addRawTemplate(\"#{name}\"")
+      expect(compiler.raw_content.to_s).to include("addRawTemplate)(\"#{name}\"")
 
       name = "/path/to/templates2"
       compiler.append_raw_template("#{name}.hbr", template)
-      expect(compiler.raw_content.to_s).to include("addRawTemplate(\"#{name}\"")
+      expect(compiler.raw_content.to_s).to include("addRawTemplate)(\"#{name}\"")
 
       name = "/path/to/templates3"
       compiler.append_raw_template("#{name}.hbs", template)
-      expect(compiler.raw_content.to_s).to include("addRawTemplate(\"#{name}.hbs\"")
+      expect(compiler.raw_content.to_s).to include("addRawTemplate)(\"#{name}.hbs\"")
     end
   end
 
diff --git a/spec/models/theme_field_spec.rb b/spec/models/theme_field_spec.rb
index 4fa891fe6a2..3083eb698d1 100644
--- a/spec/models/theme_field_spec.rb
+++ b/spec/models/theme_field_spec.rb
@@ -257,7 +257,7 @@ HTML
     expect(theme.javascript_cache.content).to include(
       "define(\"discourse/theme-#{theme.id}/discourse/templates/discovery\", [\"exports\", ",
     )
-    expect(theme.javascript_cache.content).to include('addRawTemplate("discovery"')
+    expect(theme.javascript_cache.content).to include('addRawTemplate)("discovery"')
     expect(theme.javascript_cache.content).to include(
       "define(\"discourse/theme-#{theme.id}/discourse/controllers/discovery\"",
     )
@@ -283,8 +283,8 @@ HTML
       "discourse/controllers/discovery.blah",
       "discourse/controllers/discovery.js",
       "discourse/templates/discovery.js",
-      "discovery.js",
-      "other_discovery.js",
+      "raw-templates/discovery.js",
+      "raw-templates/other_discovery.js",
     )
     expect(map["sourceRoot"]).to eq("theme-#{theme.id}/")
     expect(map["sourcesContent"].length).to eq(6)