diff --git a/client/src/templates/Challenges/components/output.css b/client/src/templates/Challenges/components/output.css
index e2405a3414..32d9b41103 100644
--- a/client/src/templates/Challenges/components/output.css
+++ b/client/src/templates/Challenges/components/output.css
@@ -1,5 +1,5 @@
 .output-text {
-  white-space: pre-line;
+  white-space: pre-wrap;
   word-break: normal;
   padding-top: 0;
   height: 100%;
diff --git a/client/src/templates/Challenges/redux/execute-challenge-saga.js b/client/src/templates/Challenges/redux/execute-challenge-saga.js
index db58d8b63c..8b8136adc0 100644
--- a/client/src/templates/Challenges/redux/execute-challenge-saga.js
+++ b/client/src/templates/Challenges/redux/execute-challenge-saga.js
@@ -125,13 +125,15 @@ function* previewChallengeSaga() {
     return;
   }
   const challengeData = yield select(challengeDataSelector);
-  if (!challengeHasPreview(challengeData)) {
-    return;
-  }
 
   try {
     yield put(initConsole(''));
+    // try to build even if there's no preview so build errors will be reported.
     const ctx = yield buildChallengeData(challengeData);
+    // then only continue if there is a preview.
+    if (!challengeHasPreview(challengeData)) {
+      return;
+    }
     const document = yield getContext('document');
     yield call(updatePreview, ctx, document);
   } catch (err) {