diff --git a/client/src/templates/Challenges/rechallenge/transformers.js b/client/src/templates/Challenges/rechallenge/transformers.js
index 213bec1297..e0dd4c0d45 100644
--- a/client/src/templates/Challenges/rechallenge/transformers.js
+++ b/client/src/templates/Challenges/rechallenge/transformers.js
@@ -180,12 +180,13 @@ function getBabelOptions({ preview = false, protect = true }) {
 }
 
 const sassWorker = createWorker(sassCompile);
-async function transformSASS(contentDocument) {
+async function transformSASS(documentElement) {
   // we only teach scss syntax, not sass. Also the compiler does not seem to be
   // able to deal with sass.
-  const styleTags = contentDocument.querySelectorAll(
+  const styleTags = documentElement.querySelectorAll(
     'style[type~="text/scss"]'
   );
+
   await Promise.all(
     [].map.call(styleTags, async style => {
       style.type = 'text/css';
@@ -194,10 +195,10 @@ async function transformSASS(contentDocument) {
   );
 }
 
-async function transformScript(contentDocument) {
+async function transformScript(documentElement) {
   await loadBabel();
   await loadPresetEnv();
-  const scriptTags = contentDocument.querySelectorAll('script');
+  const scriptTags = documentElement.querySelectorAll('script');
   scriptTags.forEach(script => {
     script.innerHTML = tryTransform(babelTransformCode(babelOptionsJS))(
       script.innerHTML
@@ -211,7 +212,7 @@ async function transformScript(contentDocument) {
 const addImportedFiles = async function (fileP) {
   const file = await fileP;
   const transform = frame => {
-    const documentElement = frame.contentDocument.documentElement;
+    const documentElement = frame;
     const link =
       documentElement.querySelector('link[href="styles.css"]') ??
       documentElement.querySelector('link[href="./styles.css"]');
@@ -258,7 +259,7 @@ const transformWithFrame = async function (transform, contents) {
     frame.contentDocument.documentElement.innerHTML = contents;
     // grab the contents now, in case the transformation fails
     out = { contents: frame.contentDocument.documentElement.innerHTML };
-    out = await transform(frame);
+    out = await transform(frame.contentDocument.documentElement);
   } finally {
     document.body.removeChild(frame);
   }
@@ -266,12 +267,12 @@ const transformWithFrame = async function (transform, contents) {
 };
 
 const transformHtml = async function (file) {
-  const transform = async frame => {
+  const transform = async documentElement => {
     await Promise.all([
-      transformSASS(frame.contentDocument),
-      transformScript(frame.contentDocument)
+      transformSASS(documentElement),
+      transformScript(documentElement)
     ]);
-    return { contents: frame.contentDocument.documentElement.innerHTML };
+    return { contents: documentElement.innerHTML };
   };
 
   const { contents } = await transformWithFrame(transform, file.contents);