diff --git a/.changeset/healthy-ants-whisper.md b/.changeset/healthy-ants-whisper.md
new file mode 100644
index 000000000..7b0475044
--- /dev/null
+++ b/.changeset/healthy-ants-whisper.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix bug when building Svelte components
diff --git a/packages/astro/src/frontend/SvelteWrapper.svelte b/packages/astro/src/frontend/SvelteWrapper.svelte
index eb4cbb7d9..c3e926128 100644
--- a/packages/astro/src/frontend/SvelteWrapper.svelte
+++ b/packages/astro/src/frontend/SvelteWrapper.svelte
@@ -2,6 +2,6 @@
 const { __astro_component: Component, __astro_children, ...props } = $$props;
 </script>
 
-<Component {...props}>
+<svelte:component this={Component} {...props}>
     {@html __astro_children}
-</Component>
+</svelte:component>
diff --git a/scripts/cmd/build.js b/scripts/cmd/build.js
index b46c8e61c..e0482a6a6 100644
--- a/scripts/cmd/build.js
+++ b/scripts/cmd/build.js
@@ -14,7 +14,6 @@ const defaultConfig = {
   target: 'node14',
   sourcemap: 'inline',
   sourcesContent: false,
-  plugins: [svelte()],
 };
 
 export default async function build(...args) {
@@ -38,6 +37,7 @@ export default async function build(...args) {
       outdir,
       external,
       format,
+      plugins: [svelte({ isDev })]
     });
     return;
   }
@@ -61,6 +61,7 @@ export default async function build(...args) {
     outdir,
     external,
     format,
+    plugins: [svelte({ isDev })]
   });
 
   process.on('beforeExit', () => {
diff --git a/scripts/utils/svelte-plugin.js b/scripts/utils/svelte-plugin.js
index cd65a5fdf..f8a30ff33 100644
--- a/scripts/utils/svelte-plugin.js
+++ b/scripts/utils/svelte-plugin.js
@@ -15,13 +15,13 @@ const convertMessage = ({ message, start, end, filename, frame }) => ({
     },
 });
 
-const handleLoad = async (args, generate) => {
+const handleLoad = async (args, generate, { isDev }) => {
   const { path } = args;
   const source = await fs.readFile(path, 'utf8');
   const filename = relative(process.cwd(), path);
 
   try {
-    let compileOptions = { css: false, generate, hydratable: true };
+    let compileOptions = { dev: isDev, css: false, generate, hydratable: true };
 
     let { js, warnings } = compile(source, { ...compileOptions, filename });
     let contents = js.code + `\n//# sourceMappingURL=` + js.map.toUrl();
@@ -32,7 +32,7 @@ const handleLoad = async (args, generate) => {
   }
 };
 
-export default function sveltePlugin() {
+export default function sveltePlugin({ isDev = false }) {
   return {
     name: 'svelte-esbuild',
     setup(build) {
@@ -54,8 +54,8 @@ export default function sveltePlugin() {
           };
         }
       });
-      build.onLoad({ filter: /.*/, namespace: 'svelte:client' }, (args) => handleLoad(args, 'dom'));
-      build.onLoad({ filter: /.*/, namespace: 'svelte:server' }, (args) => handleLoad(args, 'ssr'));
+      build.onLoad({ filter: /.*/, namespace: 'svelte:client' }, (args) => handleLoad(args, 'dom', { isDev }));
+      build.onLoad({ filter: /.*/, namespace: 'svelte:server' }, (args) => handleLoad(args, 'ssr', { isDev }));
     },
   };
 }