diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
index f97948eef868..49f8346aa47d 100644
--- a/packages/svelte/src/preprocessors.ts
+++ b/packages/svelte/src/preprocessors.ts
@@ -22,8 +22,30 @@ export function componentTrackingPreprocessor(options?: ComponentTrackingInitOpt
   const mergedOptions = { ...defaultComponentTrackingOptions, ...options };
 
   const visitedFiles = new Set<string>();
+  const visitedFilesMarkup = new Set<string>();
 
   const preprocessor: PreprocessorGroup = {
+    // This markup hook is called once per .svelte component file, before the `script` hook is called
+    // We use it to check if the passed component has a <script> tag. If it doesn't, we add one to inject our
+    // code later on, when the `script` hook is executed.
+    markup: ({ content, filename }) => {
+      const finalFilename = filename || 'unknown';
+      const shouldInject = shouldInjectFunction(mergedOptions.trackComponents, finalFilename, {}, visitedFilesMarkup);
+
+      if (shouldInject && !hasScriptTag(content)) {
+        // Insert a <script> tag into the component file where we can later on inject our code.
+        // We have to add a placeholder to the script tag because for empty script tags,
+        // the `script` preprocessor hook won't be called
+        // Note: The space between <script> and </script> is important! Without any content,
+        // the `script` hook wouldn't  be executed for the added script tag.
+        const s = new MagicString(content);
+        s.prepend('<script>\n</script>\n');
+        return { code: s.toString(), map: s.generateMap().toString() };
+      }
+
+      return { code: content };
+    },
+
     // This script hook is called whenever a Svelte component's <script> content is preprocessed.
     // `content` contains the script code as a string
     script: ({ content, filename, attributes }) => {
@@ -99,3 +121,18 @@ function getBaseName(filename: string): string {
   const segments = filename.split('/');
   return segments[segments.length - 1].replace('.svelte', '');
 }
+
+function hasScriptTag(content: string): boolean {
+  // This regex is taken from the Svelte compiler code.
+  // They use this regex to find matching script tags that are passed to the `script` preprocessor hook:
+  // https://github.com/sveltejs/svelte/blob/bb83eddfc623437528f24e9fe210885b446e72fa/src/compiler/preprocess/index.ts#L144
+  // However, we remove the first part of the regex to not match HTML comments
+  const scriptTagRegex = /<script(\s[^]*?)?(?:>([^]*?)<\/script\s*>|\/>)/gi;
+
+  // Regex testing is not a super safe way of checking for the presence of a <script> tag in the Svelte
+  // component file but I think we can use it as a start.
+  // A case that is not covered by regex-testing HTML is e.g. nested <script> tags but I cannot
+  // think of why one would do this in Svelte components. For instance, the Svelte compiler errors
+  // when there's more than one top-level script tag.
+  return scriptTagRegex.test(content);
+}
diff --git a/packages/svelte/test/preprocessors.test.ts b/packages/svelte/test/preprocessors.test.ts
index 79a1f1c9e416..dd3d3cff1130 100644
--- a/packages/svelte/test/preprocessors.test.ts
+++ b/packages/svelte/test/preprocessors.test.ts
@@ -1,5 +1,12 @@
+import * as svelteCompiler from 'svelte/compiler';
+
 /* eslint-disable deprecation/deprecation */
-import { componentTrackingPreprocessor, defaultComponentTrackingOptions } from '../src/preprocessors';
+import {
+  componentTrackingPreprocessor,
+  defaultComponentTrackingOptions,
+  FIRST_PASS_COMPONENT_TRACKING_PREPROC_ID,
+} from '../src/preprocessors';
+import { SentryPreprocessorGroup } from '../src/types';
 
 function expectComponentCodeToBeModified(
   preprocessedComponents: {
@@ -27,149 +34,255 @@ function expectComponentCodeToBeModified(
 }
 
 describe('componentTrackingPreprocessor', () => {
-  it('correctly inits the script preprocessor', () => {
-    const preProc = componentTrackingPreprocessor();
-    expect(preProc.script).toBeDefined();
-    expect(preProc.markup).toBeUndefined();
-    expect(preProc.style).toBeUndefined();
-  });
+  describe('script hook', () => {
+    it('correctly inits the script preprocessor', () => {
+      const preProc = componentTrackingPreprocessor();
+      expect(preProc.markup).toBeDefined();
+      expect(preProc.script).toBeDefined();
+      expect(preProc.style).toBeUndefined();
+      expect((preProc as SentryPreprocessorGroup).sentryId).toEqual(FIRST_PASS_COMPONENT_TRACKING_PREPROC_ID);
+    });
 
-  it.each([
-    ['no options', undefined],
-    ['default options', defaultComponentTrackingOptions],
-    ['custom options (init 0, updates 0)', { trackInit: false, trackUpdates: false }],
-    ['custom options (init 0, updates 1)', { trackInit: false, trackUpdates: true }],
-    ['custom options (init 1, updates 0)', { trackInit: true, trackUpdates: false }],
-    ['custom options (init 1, updates 1)', { trackInit: true, trackUpdates: true }],
-  ])('adds the function call to all components if %s are set', (_, options) => {
-    const preProc = componentTrackingPreprocessor(options);
-    const components = [
-      { originalCode: 'console.log(cmp1);', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
-      { originalCode: 'console.log(cmp2);', filename: 'components/Cmp2.svelte', name: 'Cmp2' },
-      { originalCode: 'console.log(cmp3);', filename: 'components/Cmp3.svelte', name: 'Cmp3' },
-    ];
-
-    const preprocessedComponents = components.map(cmp => {
-      const res: any =
-        preProc.script &&
-        preProc.script({
-          content: cmp.originalCode,
-          filename: cmp.filename,
-          attributes: {},
-          markup: '',
-        });
-      return { ...cmp, newCode: res.code, map: res.map };
+    it.each([
+      ['no options', undefined],
+      ['default options', defaultComponentTrackingOptions],
+      ['custom options (init 0, updates 0)', { trackInit: false, trackUpdates: false }],
+      ['custom options (init 0, updates 1)', { trackInit: false, trackUpdates: true }],
+      ['custom options (init 1, updates 0)', { trackInit: true, trackUpdates: false }],
+      ['custom options (init 1, updates 1)', { trackInit: true, trackUpdates: true }],
+    ])('adds the function call to all components if %s are set', (_, options) => {
+      const preProc = componentTrackingPreprocessor(options);
+      const components = [
+        { originalCode: 'console.log(cmp1);', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+        { originalCode: 'console.log(cmp2);', filename: 'components/Cmp2.svelte', name: 'Cmp2' },
+        { originalCode: 'console.log(cmp3);', filename: 'components/Cmp3.svelte', name: 'Cmp3' },
+      ];
+
+      const preprocessedComponents = components.map(cmp => {
+        const res: any =
+          preProc.script &&
+          preProc.script({
+            content: cmp.originalCode,
+            filename: cmp.filename,
+            attributes: {},
+            markup: '',
+          });
+        return { ...cmp, newCode: res.code, map: res.map };
+      });
+
+      expectComponentCodeToBeModified(preprocessedComponents, options);
     });
 
-    expectComponentCodeToBeModified(preprocessedComponents, options);
-  });
+    it('does not add the function call to any component if `trackComponents` is set to `false`', () => {
+      const preProc = componentTrackingPreprocessor({ trackComponents: false });
+      const components = [
+        { originalCode: 'console.log(cmp1)', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+        { originalCode: 'console.log(cmp2)', filename: 'components/Cmp2.svelte', name: 'Cmp2' },
+        { originalCode: 'console.log(cmp3)', filename: 'components/Cmp3.svelte', name: 'Cmp3' },
+      ];
 
-  it('does not add the function call to any component if `trackComponents` is set to `false`', () => {
-    const preProc = componentTrackingPreprocessor({ trackComponents: false });
-    const components = [
-      { originalCode: 'console.log(cmp1)', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
-      { originalCode: 'console.log(cmp2)', filename: 'components/Cmp2.svelte', name: 'Cmp2' },
-      { originalCode: 'console.log(cmp3)', filename: 'components/Cmp3.svelte', name: 'Cmp3' },
-    ];
+      const preprocessedComponents = components.map(cmp => {
+        const res: any =
+          preProc.script &&
+          preProc.script({
+            content: cmp.originalCode,
+            filename: cmp.filename,
+            attributes: {},
+            markup: '',
+          });
+        return { ...cmp, newCode: res.code, map: res.map };
+      });
 
-    const preprocessedComponents = components.map(cmp => {
-      const res: any =
-        preProc.script &&
-        preProc.script({
-          content: cmp.originalCode,
-          filename: cmp.filename,
-          attributes: {},
-          markup: '',
-        });
-      return { ...cmp, newCode: res.code, map: res.map };
+      preprocessedComponents.forEach(cmp => {
+        expect(cmp.newCode).toEqual(cmp.originalCode);
+      });
     });
 
-    preprocessedComponents.forEach(cmp => {
-      expect(cmp.newCode).toEqual(cmp.originalCode);
+    it('adds the function call to specific components if specified in `trackComponents`', () => {
+      const preProc = componentTrackingPreprocessor({ trackComponents: ['Cmp1', 'Cmp3'] });
+      const components = [
+        { originalCode: 'console.log(cmp1)', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+        { originalCode: 'console.log(cmp2)', filename: 'lib/Cmp2.svelte', name: 'Cmp2' },
+        { originalCode: 'console.log(cmp3)', filename: 'lib/subdir/sub/Cmp3.svelte', name: 'Cmp3' },
+      ];
+
+      const [cmp1, cmp2, cmp3] = components.map(cmp => {
+        const res: any =
+          preProc.script &&
+          preProc.script({
+            content: cmp.originalCode,
+            filename: cmp.filename,
+            attributes: {},
+            markup: '',
+          });
+        return { ...cmp, newCode: res.code, map: res.map };
+      });
+
+      expect(cmp2.newCode).toEqual(cmp2.originalCode);
+
+      expectComponentCodeToBeModified([cmp1, cmp3], { trackInit: true, trackUpdates: true });
     });
-  });
 
-  it('adds the function call to specific components if specified in `trackComponents`', () => {
-    const preProc = componentTrackingPreprocessor({ trackComponents: ['Cmp1', 'Cmp3'] });
-    const components = [
-      { originalCode: 'console.log(cmp1)', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
-      { originalCode: 'console.log(cmp2)', filename: 'lib/Cmp2.svelte', name: 'Cmp2' },
-      { originalCode: 'console.log(cmp3)', filename: 'lib/subdir/sub/Cmp3.svelte', name: 'Cmp3' },
-    ];
+    it('doesnt inject the function call to the same component more than once', () => {
+      const preProc = componentTrackingPreprocessor();
+      const components = [
+        {
+          originalCode: 'console.log(cmp1)',
+          filename: 'components/Cmp1.svelte',
+          name: 'Cmp1',
+        },
+        {
+          originalCode:
+            'import { trackComponent } from "@sentry/svelte";\ntrackComponent({"trackInit":true,"trackUpdates":true,"componentName":"Cmp1"});\nconsole.log(cmp1)',
+          filename: 'components/Cmp1.svelte',
+          name: 'Cmp1',
+        },
+        {
+          originalCode: 'console.log(cmp2)',
+          filename: 'lib/Cmp2.svelte',
+          name: 'Cmp2',
+        },
+      ];
+
+      const [cmp11, cmp12, cmp2] = components.map(cmp => {
+        const res: any =
+          preProc.script &&
+          preProc.script({
+            content: cmp.originalCode,
+            filename: cmp.filename,
+            attributes: {},
+            markup: '',
+          });
+        return { ...cmp, newCode: res.code, map: res.map };
+      });
+
+      expectComponentCodeToBeModified([cmp11, cmp2], { trackInit: true, trackUpdates: true });
+      expect(cmp12.newCode).toEqual(cmp12.originalCode);
+    });
+
+    it('doesnt inject the function call to a module context script block', () => {
+      const preProc = componentTrackingPreprocessor();
+      const component = {
+        originalCode: 'console.log(cmp2)',
+        filename: 'lib/Cmp2.svelte',
+        name: 'Cmp2',
+      };
 
-    const [cmp1, cmp2, cmp3] = components.map(cmp => {
       const res: any =
         preProc.script &&
         preProc.script({
-          content: cmp.originalCode,
-          filename: cmp.filename,
-          attributes: {},
+          content: component.originalCode,
+          filename: component.filename,
+          attributes: { context: 'module' },
           markup: '',
         });
-      return { ...cmp, newCode: res.code, map: res.map };
-    });
 
-    expect(cmp2.newCode).toEqual(cmp2.originalCode);
+      const processedComponent = { ...component, newCode: res.code, map: res.map };
 
-    expectComponentCodeToBeModified([cmp1, cmp3], { trackInit: true, trackUpdates: true });
+      expect(processedComponent.newCode).toEqual(processedComponent.originalCode);
+    });
   });
 
-  it('doesnt inject the function call to the same component more than once', () => {
-    const preProc = componentTrackingPreprocessor();
-    const components = [
-      {
-        originalCode: 'console.log(cmp1)',
-        filename: 'components/Cmp1.svelte',
-        name: 'Cmp1',
-      },
-      {
-        originalCode:
-          'import { trackComponent } from "@sentry/svelte";\ntrackComponent({"trackInit":true,"trackUpdates":true,"componentName":"Cmp1"});\nconsole.log(cmp1)',
-        filename: 'components/Cmp1.svelte',
-        name: 'Cmp1',
-      },
-      {
-        originalCode: 'console.log(cmp2)',
+  describe('markup hook', () => {
+    it("adds a <script> tag to components that don't have one", () => {
+      const preProc = componentTrackingPreprocessor();
+      const component = {
+        originalCode: "<p>I'm just a plain component</p>\n<style>p{margin-top:10px}</style>",
         filename: 'lib/Cmp2.svelte',
         name: 'Cmp2',
-      },
-    ];
+      };
 
-    const [cmp11, cmp12, cmp2] = components.map(cmp => {
       const res: any =
-        preProc.script &&
-        preProc.script({
-          content: cmp.originalCode,
-          filename: cmp.filename,
-          attributes: {},
-          markup: '',
+        preProc.markup &&
+        preProc.markup({
+          content: component.originalCode,
+          filename: component.filename,
         });
-      return { ...cmp, newCode: res.code, map: res.map };
+
+      expect(res.code).toEqual(
+        "<script>\n</script>\n<p>I'm just a plain component</p>\n<style>p{margin-top:10px}</style>",
+      );
     });
 
-    expectComponentCodeToBeModified([cmp11, cmp2], { trackInit: true, trackUpdates: true });
-    expect(cmp12.newCode).toEqual(cmp12.originalCode);
+    it("doesn't add a <script> tag to a component that already has one", () => {
+      const preProc = componentTrackingPreprocessor();
+      const component = {
+        originalCode:
+          "<script>console.log('hi');</script>\n<p>I'm a component with a script</p>\n<style>p{margin-top:10px}</style>",
+        filename: 'lib/Cmp2.svelte',
+        name: 'Cmp2',
+      };
+
+      const res: any =
+        preProc.markup &&
+        preProc.markup({
+          content: component.originalCode,
+          filename: component.filename,
+        });
+
+      expect(res.code).toEqual(
+        "<script>console.log('hi');</script>\n<p>I'm a component with a script</p>\n<style>p{margin-top:10px}</style>",
+      );
+    });
   });
 
-  it('doesnt inject the function call to a module context script block', () => {
-    const preProc = componentTrackingPreprocessor();
-    const component = {
-      originalCode: 'console.log(cmp2)',
-      filename: 'lib/Cmp2.svelte',
-      name: 'Cmp2',
-    };
+  // These are more "higher level" tests in which we use the actual preprocessing command of the Svelte compiler
+  // This lets us test all preprocessor hooks we use in the correct order
+  describe('all hooks combined, using the svelte compiler', () => {
+    it('handles components without script tags correctly', async () => {
+      const component = {
+        originalCode: "<p>I'm just a plain component</p>\n<style>p{margin-top:10px}</style>",
+        filename: 'lib/Cmp1.svelte',
+      };
 
-    const res: any =
-      preProc.script &&
-      preProc.script({
-        content: component.originalCode,
+      const processedCode = await svelteCompiler.preprocess(component.originalCode, [componentTrackingPreprocessor()], {
         filename: component.filename,
-        attributes: { context: 'module' },
-        markup: '',
       });
 
-    const processedComponent = { ...component, newCode: res.code, map: res.map };
+      expect(processedCode.code).toEqual(
+        '<script>import { trackComponent } from "@sentry/svelte";\n' +
+          'trackComponent({"trackInit":true,"trackUpdates":true,"componentName":"Cmp1"});\n\n' +
+          '</script>\n' +
+          "<p>I'm just a plain component</p>\n" +
+          '<style>p{margin-top:10px}</style>',
+      );
+    });
+
+    it('handles components with script tags correctly', async () => {
+      const component = {
+        originalCode:
+          "<script>console.log('hi');</script>\n<p>I'm a component with a script</p>\n<style>p{margin-top:10px}</style>",
+        filename: 'lib/Cmp2.svelte',
+      };
+
+      const processedCode = await svelteCompiler.preprocess(component.originalCode, [componentTrackingPreprocessor()], {
+        filename: component.filename,
+      });
 
-    expect(processedComponent.newCode).toEqual(processedComponent.originalCode);
+      expect(processedCode.code).toEqual(
+        '<script>import { trackComponent } from "@sentry/svelte";\n' +
+          'trackComponent({"trackInit":true,"trackUpdates":true,"componentName":"Cmp2"});\n' +
+          "console.log('hi');</script>\n" +
+          "<p>I'm a component with a script</p>\n" +
+          '<style>p{margin-top:10px}</style>',
+      );
+    });
+
+    it("falls back to 'unknown' if filename isn't passed to preprocessor", async () => {
+      const component = {
+        originalCode: "<script>console.log('hi');</script>",
+        filename: undefined,
+      };
+
+      const processedCode = await svelteCompiler.preprocess(component.originalCode, [componentTrackingPreprocessor()], {
+        filename: component.filename,
+      });
+
+      expect(processedCode.code).toEqual(
+        '<script>import { trackComponent } from "@sentry/svelte";\n' +
+          'trackComponent({"trackInit":true,"trackUpdates":true,"componentName":"unknown"});\n' +
+          "console.log('hi');</script>",
+      );
+    });
   });
 });