Error: Build failed with 2 errors: Unexpected character '@'

[knuurr]

✘ [ERROR] /home/qbus/00projects/git_projects/00my_projects/kiepscy-tv/node_modules/sveltekit-embed/dist/components/generic-embed.svelte:15:2 Unexpected character '@' [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/sveltekit-embed/dist/components/generic-embed.svelte:15:2:
      15 │  {@render children?.()}
         ╵   ^

  The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import

    node_modules/sveltekit-embed/dist/index.js:7:40:
      7 │ export { default as GenericEmbed } from './components/generic-embed.svelte';
        ╵                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] /home/qbus/00projects/git_projects/00my_projects/kiepscy-tv/node_modules/sveltekit-embed/dist/components/general-observer.svelte:44:4 Unexpected character '@' [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/sveltekit-embed/dist/components/general-observer.svelte:44:4:
      44 │      {@render children()}
         ╵     ^

  The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import

    node_modules/sveltekit-embed/dist/index.js:6:43:
      6 │ export { default as GeneralObserver } from './components/general-observer.svelte';
        ╵                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

9:52:24 PM [vite] error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/sveltekit-embed/dist/components/general-observer.svelte:44:4: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] /home/qbus/00projects/git_projects/00my_projects/kiepscy-tv/node_modules/sveltekit-embed/dist/components/general-observer.svelte:44:4 Unexpected character '@'
node_modules/sveltekit-embed/dist/components/generic-embed.svelte:15:2: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] /home/qbus/00projects/git_projects/00my_projects/kiepscy-tv/node_modules/sveltekit-embed/dist/components/generic-embed.svelte:15:2 Unexpected character '@'
    at failureErrorWithLog (/home/qbus/00projects/git_projects/00my_projects/kiepscy-tv/node_modules/esbuild/lib/main.js:1651:15)
    at /home/qbus/00projects/git_projects/00my_projects/kiepscy-tv/node_modules/esbuild/lib/main.js:1059:25
    at /home/qbus/00projects/git_projects/00my_projects/kiepscy-tv/node_modules/esbuild/lib/main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

+page.svelte:

<script lang="ts">
  import { YouTube } from "sveltekit-embed";
  import Icon from "@iconify/svelte";
  import { onMount } from "svelte";

  // State management
  let youtubeUrl = "";
  let currentVideoId = "dQw4w9WgXcQ"; // Rick Astley - Never Gonna Give You Up
  let error = "";

  // Function to extract video ID from various YouTube URL formats
  function extractVideoId(url: string): string | null {
    try {
      // Handle empty input
      if (!url.trim()) return null;

      // Regular expressions for different YouTube URL formats
      const patterns = {
        standard: /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/,
        shortened: /(?:https?:\/\/)?(?:www\.)?youtu\.be\/([^?]+)/,
        embed: /(?:https?:\/\/)?(?:www\.)?youtube\.com\/embed\/([^?]+)/,
        videoId: /^[a-zA-Z0-9_-]{11}$/, // Direct video ID (11 characters)
      };

      // Try each pattern
      for (const [type, pattern] of Object.entries(patterns)) {
        const match = url.match(pattern);
        if (match) {
          console.debug(
            `[YouTube URL Parser] Matched ${type} pattern:`,
            match[1],
          );
          return match[1];
        }
      }

      console.debug("[YouTube URL Parser] No pattern matched for URL:", url);
      return null;
    } catch (err) {
      console.error("[YouTube URL Parser] Error parsing URL:", err);
      return null;
    }
  }

  // Handle video loading
  function loadVideo() {
    try {
      console.debug(
        "[Video Loader] Attempting to load video from URL:",
        youtubeUrl,
      );
      const videoId = extractVideoId(youtubeUrl);

      if (!videoId) {
        error = "Invalid YouTube URL or video ID";
        console.error("[Video Loader] Invalid video ID");
        return;
      }

      error = "";
      currentVideoId = videoId;
      console.debug("[Video Loader] Successfully loaded video ID:", videoId);
    } catch (err) {
      error = "Error loading video";
      console.error("[Video Loader] Error:", err);
    }
  }

  // Handle Enter key press
  function handleKeyPress(event: KeyboardEvent) {
    if (event.key === "Enter") {
      loadVideo();
    }
  }

  onMount(() => {
    console.debug("[Component] Mounted with default video ID:", currentVideoId);
  });
</script>

<div class="container mx-auto p-4 max-w-4xl">
  <h1 class="text-3xl font-bold mb-6">YouTube Video Player</h1>

  <!-- Input section -->
  <div class="form-control w-full mb-6">
    <label class="label" for="youtube-url">
      <span class="label-text">Enter YouTube URL or Video ID</span>
    </label>
    <div class="input-group">
      <input
        type="text"
        id="youtube-url"
        placeholder="https://youtube.com/watch?v=... or video ID"
        class="input input-bordered w-full"
        bind:value={youtubeUrl}
        on:keypress={handleKeyPress}
      />
      <button class="btn btn-primary" on:click={loadVideo}>
        <Icon icon="heroicons:play" class="w-5 h-5 mr-2" />
        Load
      </button>
    </div>
    {#if error}
      <label class="label">
        <span class="label-text-alt text-error">{error}</span>
      </label>
    {/if}
  </div>

  <!-- Video player section -->
  <div class="w-full aspect-video bg-base-200 rounded-lg overflow-hidden">
    {#key currentVideoId}
      <YouTube
        youTubeId={currentVideoId}
        aspectRatio="16:9"
        autoPlay={true}
        iframe_styles="width: 100%; height: 100%; border-radius: 0.5rem;"
      />
    {/key}
  </div>
</div>

There isn't anything spicy here to hide.

So what's happening here?

[spences10]

Is it a svelte 4 project?

[knuurr]

Is it a svelte 4 project?

Yes.

	"devDependencies": {
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
// ...
		"svelte": "^4.2.16",
},