diff --git a/tools/build_config.js b/tools/build_config.js
index 6d6557f4ab..9db3f7a2db 100644
--- a/tools/build_config.js
+++ b/tools/build_config.js
@@ -44,6 +44,20 @@ module.exports = {
         footer: "if (typeof exports === 'object' && typeof module !== 'undefined') { module.exports = hljs; }",
         interop: false
       }
+    },
+    browser: {
+      input: {
+        plugins: [
+          jsonPlugin(),
+          cjsPlugin(),
+          nodeResolve()
+        ]
+      },
+      output: {
+        name: "hljs",
+        format: "es",
+        interop: false
+      }
     }
   },
   terser: {
diff --git a/tools/lib/language.js b/tools/lib/language.js
index 7b026fb8e2..662a033801 100644
--- a/tools/lib/language.js
+++ b/tools/lib/language.js
@@ -85,16 +85,15 @@ class Language {
 
 
 async function compileLanguage (language, options) {
-  const IIFE_HEADER_REGEX = /^(var hljsGrammar = )?\(function \(\)/;
+  const EXPORT_REGEX = /export default (.*);/;
 
-  // TODO: cant we use the source we already have?
-  const input = { ...build_config.rollup.browser_iife.input, input: language.path };
-  const output = { ...build_config.rollup.browser_iife.output, name: `hljsGrammar`, file: "out.js" };
+  // We can't use the source as extra language may be written in CJS
+  const input = { ...build_config.rollup.browser.input, input: language.path };
+  const output = { ...build_config.rollup.browser.output, file: "out.js" };
   output.footer = null;
   
-  const data = await rollupCode(input, output);
-  const iife = data.replace(IIFE_HEADER_REGEX, `hljs.registerLanguage('${language.name}', function ()`);
-  const esm = `${data};\nexport default hljsGrammar;`;
+  const esm = await rollupCode(input, output);
+  const iife = `hljs.registerLanguage('${language.name}', (function (){"use strict";` + esm.replace(EXPORT_REGEX, 'return $1') + '})())';
 
   language.module = iife;
   const miniESM = await Terser.minify(esm, options.terser);