diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index c4957fc312d..ea53640f3ba 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -207,10 +207,10 @@ function createCodegenContext(
   }
 
   function addMapping(loc: Position, name: string | null = null) {
-    // @ts-ignore we use the private property to directly add the mapping
+    // we use the private property to directly add the mapping
     // because the addMapping() implementation in source-map-js has a bunch of
     // unnecessary arg and validation checks that are pure overhead in our case.
-    const { _names, _mappings } = context.map
+    const { _names, _mappings } = context.map!
     if (name !== null && !_names.has(name)) _names.add(name)
     _mappings.add({
       originalLine: loc.line,
@@ -354,8 +354,7 @@ export function generate(
     ast,
     code: context.code,
     preamble: isSetupInlined ? preambleContext.code : ``,
-    // SourceMapGenerator does have toJSON() method but it's not in the types
-    map: context.map ? (context.map as any).toJSON() : undefined
+    map: context.map ? context.map.toJSON() : undefined
   }
 }
 
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index 03971d431e8..ba8517658fa 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -360,7 +360,7 @@ function generateSourceMap(
       }
     }
   })
-  return JSON.parse(map.toString())
+  return map.toJSON()
 }
 
 function padContent(
diff --git a/packages/compiler-sfc/src/style/preprocessors.ts b/packages/compiler-sfc/src/style/preprocessors.ts
index 9b3610501c7..e4630745667 100644
--- a/packages/compiler-sfc/src/style/preprocessors.ts
+++ b/packages/compiler-sfc/src/style/preprocessors.ts
@@ -38,7 +38,12 @@ const scss: StylePreprocessor = (source, map, options, load = require) => {
     if (map) {
       return {
         code: result.css.toString(),
-        map: merge(map, JSON.parse(result.map.toString())),
+        map: merge(
+          map,
+          result.map.toJSON
+            ? result.map.toJSON()
+            : JSON.parse(result.map.toString())
+        ),
         errors: [],
         dependencies
       }
diff --git a/packages/global.d.ts b/packages/global.d.ts
index 97405129be9..64699ae7759 100644
--- a/packages/global.d.ts
+++ b/packages/global.d.ts
@@ -44,6 +44,24 @@ declare module 'estree-walker' {
   )
 }
 
+declare module 'source-map-js' {
+  export interface SourceMapGenerator {
+    // SourceMapGenerator has this method but the types do not include it
+    toJSON(): RawSourceMap
+    _names: Set<string>
+    _mappings: {
+      add(mapping: {
+        originalLine: number
+        originalColumn: number
+        generatedLine: number
+        generatedColumn: number
+        source: string
+        name: string | null
+      }): void
+    }
+  }
+}
+
 declare interface String {
   /**
    * @deprecated Please use String.prototype.slice instead of String.prototype.substring in the repository.