fix: make compiler error extend from Error

.changeset/wet-timers-shop.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: make compiler error extend from `Error`

packages/svelte/scripts/process-messages/templates/compile-errors.js

@@ -2,16 +2,33 @@ import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 
-class InternalCompileError extends CompileDiagnostic {
-	name = 'CompileError';
+class InternalCompileError extends Error {
+	message = ''; // ensure this property is enumerable
+	#diagnostic;
 
 	/**
 	 * @param {string} code
 	 * @param {string} message
 	 * @param {[number, number] | undefined} position
 	 */
 	constructor(code, message, position) {
-		super(code, message, position);
+		super(message);
+		this.stack = ''; // avoid unnecessary noise; don't set it as a class property or it becomes enumerable
+
+		// We want to extend from Error so that various bundler plugins properly handle it.
+		// But we also want to share the same object shape with that of warnings, therefore
+		// we create an instance of the shared class an copy over its properties.
+		this.#diagnostic = new CompileDiagnostic(code, message, position);
+		Object.assign(this, this.#diagnostic);
+		this.name = 'CompileError';
+	}
+
+	toString() {
+		return this.#diagnostic.toString();
+	}
+
+	toJSON() {
+		return this.#diagnostic.toJSON();
 	}
 }
 

packages/svelte/src/compiler/errors.js

@@ -3,16 +3,32 @@
 import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
-class InternalCompileError extends CompileDiagnostic {
-	name = 'CompileError';
+class InternalCompileError extends Error {
+	message = ''; // ensure this property is enumerable
+	#diagnostic;
 
 	/**
 	 * @param {string} code
 	 * @param {string} message
 	 * @param {[number, number] | undefined} position
 	 */
 	constructor(code, message, position) {
-		super(code, message, position);
+		super(message);
+		this.stack = ''; // avoid unnecessary noise; don't set it as a class property or it becomes enumerable
+		// We want to extend from Error so that various bundler plugins properly handle it.
+		// But we also want to share the same object shape with that of warnings, therefore
+		// we create an instance of the shared class an copy over its properties.
+		this.#diagnostic = new CompileDiagnostic(code, message, position);
+		Object.assign(this, this.#diagnostic);
+		this.name = 'CompileError';
+	}
+
+	toString() {
+		return this.#diagnostic.toString();
+	}
+
+	toJSON() {
+		return this.#diagnostic.toJSON();
 	}
 }
 

packages/svelte/src/compiler/utils/compile_diagnostic.js

@@ -51,8 +51,6 @@ function get_code_frame(source, line, column) {
 /** @implements {ICompileDiagnostic} */
 export class CompileDiagnostic {
 	name = 'CompileDiagnostic';
-	// adding an empty stack so that vite will show the file and frame during build
-	stack = '';
 
 	/**
 	 * @param {string} code

packages/svelte/tests/migrate/samples/impossible-migrate-with-errors/_config.js

@@ -19,8 +19,6 @@ export default test({
 3: unterminated template
                         ^`,
 			message: 'Unexpected end of input',
-			name: 'CompileError',
-			stack: '',
 			position: [30, 30],
 			start: {
 				character: 30,

packages/svelte/tests/migrate/test.ts

@@ -28,7 +28,7 @@ const { test, run } = suite<ParserTest>(async (config, cwd) => {
 
 	if (config.errors) {
 		console.error = (...args) => {
-			errors.push(...args);
+			errors.push(...args.map((arg) => arg.toJSON?.() ?? arg));
 		};
 	}