diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 9d9699bdbf6c..5fdac9bce458 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -333,7 +333,7 @@ export default function dom(
 		// $$props arg is still needed for unknown prop check
 		args.push(x`$$props`);
 	}
-
+	// has_create_fragment is intentionally to be true in dev mode.
 	const has_create_fragment = component.compile_options.dev || block.has_content();
 	if (has_create_fragment) {
 		body.push(b`
diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
index a0134668eff1..306a5e3793b4 100644
--- a/src/runtime/internal/transitions.ts
+++ b/src/runtime/internal/transitions.ts
@@ -79,6 +79,8 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca
 		});
 
 		block.o(local);
+	} else if (callback) {
+		callback();
 	}
 }
 
@@ -143,7 +145,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 	return {
 		start() {
 			if (started) return;
-			
+
 			started = true;
 			delete_rule(node);
 
diff --git a/test/runtime/samples/empty-component-destroy/Empty.svelte b/test/runtime/samples/empty-component-destroy/Empty.svelte
new file mode 100644
index 000000000000..14551c069ad3
--- /dev/null
+++ b/test/runtime/samples/empty-component-destroy/Empty.svelte
@@ -0,0 +1,8 @@
+
+<script>
+  import { onDestroy } from 'svelte';
+	
+	onDestroy(() => {
+		console.log('destroy');
+	});
+</script>
diff --git a/test/runtime/samples/empty-component-destroy/_config.js b/test/runtime/samples/empty-component-destroy/_config.js
new file mode 100644
index 000000000000..76b9ae4bb82e
--- /dev/null
+++ b/test/runtime/samples/empty-component-destroy/_config.js
@@ -0,0 +1,25 @@
+let log;
+export default {
+	html: `
+	  <button>destroy component</button>
+	`,
+
+	before_test() {
+		log = console.log;
+	},
+	after_test() {
+		console.log = log;
+	},
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		const messages = [];
+		console.log = msg => messages.push(msg);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>destroy component</button>
+		`);
+		assert.deepEqual(messages, ['destroy']);
+	}
+};
diff --git a/test/runtime/samples/empty-component-destroy/main.svelte b/test/runtime/samples/empty-component-destroy/main.svelte
new file mode 100644
index 000000000000..0ee5ef4a04b0
--- /dev/null
+++ b/test/runtime/samples/empty-component-destroy/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Empty from './Empty.svelte';
+	let active = true;
+</script>
+
+<button on:click='{() => active = false }'>destroy component</button>
+
+<svelte:component this={active ? Empty : null} />