3 files changed, 16 insertions, 5 deletions
diff --git a/cli/js/compiler/host.ts b/cli/js/compiler/host.ts
index 627c52970..457388bd9 100644
--- a/cli/js/compiler/host.ts
+++ b/cli/js/compiler/host.ts
@@ -242,8 +242,16 @@ export class Host implements ts.CompilerHost {
       assert(sourceFile != null);
       if (!sourceFile.tsSourceFile) {
         assert(sourceFile.sourceCode != null);
+        // even though we assert the extension for JSON modules to the compiler
+        // is TypeScript, TypeScript internally analyses the filename for its
+        // extension and tries to parse it as JSON instead of TS.  We have to
+        // change the filename to the TypeScript file.
         sourceFile.tsSourceFile = ts.createSourceFile(
-          fileName.startsWith(ASSETS) ? sourceFile.filename : fileName,
+          fileName.startsWith(ASSETS)
+            ? sourceFile.filename
+            : fileName.toLowerCase().endsWith(".json")
+            ? `${fileName}.ts`
+            : fileName,
           sourceFile.sourceCode,
           languageVersion
         );
diff --git a/cli/js/compiler/sourcefile.ts b/cli/js/compiler/sourcefile.ts
index 159ccda85..e400acbf5 100644
--- a/cli/js/compiler/sourcefile.ts
+++ b/cli/js/compiler/sourcefile.ts
@@ -35,7 +35,10 @@ function getExtension(fileName: string, mediaType: MediaType): ts.Extension {
     case MediaType.TSX:
       return ts.Extension.Tsx;
     case MediaType.Json:
-      return ts.Extension.Json;
+      // we internally compile JSON, so what gets provided to the TypeScript
+      // compiler is an ES module, but in order to get TypeScript to handle it
+      // properly we have to pretend it is TS.
+      return ts.Extension.Ts;
     case MediaType.Wasm:
       // Custom marker for Wasm type.
       return ts.Extension.Js;
diff --git a/cli/js/compiler/util.ts b/cli/js/compiler/util.ts
index 09725fc22..8acc83a2d 100644
--- a/cli/js/compiler/util.ts
+++ b/cli/js/compiler/util.ts
@@ -4,7 +4,7 @@ import { bold, cyan, yellow } from "../colors.ts";
 import { CompilerOptions } from "./api.ts";
 import { buildBundle } from "./bundler.ts";
 import { ConfigureResponse, Host } from "./host.ts";
-import { SourceFile } from "./sourcefile.ts";
+import { MediaType, SourceFile } from "./sourcefile.ts";
 import { atob, TextEncoder } from "../web/text_encoding.ts";
 import * as compilerOps from "../ops/compiler.ts";
 import * as util from "../util.ts";
@@ -51,13 +51,13 @@ function cache(
     // NOTE: If it's a `.json` file we don't want to write it to disk.
     // JSON files are loaded and used by TS compiler to check types, but we don't want
     // to emit them to disk because output file is the same as input file.
-    if (sf.extension === ts.Extension.Json) {
+    if (sf.mediaType === MediaType.Json) {
       return;
     }
 
     // NOTE: JavaScript files are only cached to disk if `checkJs`
     // option in on
-    if (sf.extension === ts.Extension.Js && !checkJs) {
+    if (sf.mediaType === MediaType.JavaScript && !checkJs) {
       return;
     }
   }