Resumen y Solución al Error TS2307 en la Configuración de Rollup con Svelte

Descripción del Problema

Al utilizar Svelte con TypeScript y Rollup, es común encontrarse con el error:

TS2307: Cannot find module '../xxx/HelloWorld.svelte' or its corresponding type declarations

Este error indica que TypeScript no puede encontrar el archivo Svelte específico o sus declaraciones de tipo correspondientes. En el código proporcionado, se importa el módulo Svelte en el archivo TypeScript sin que TypeScript reconozca su tipo.

Configuración Actual

Archivo TypeScript

import App from "../xxx/HelloWorld.svelte";

const app = new App({
  target: document.body,
});

export default app;

archivo tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["./**/*"],
  "exclude": ["../node_modules/*"],
  "compilerOptions": {"strict": true}
}

Archivo rollup.config.js

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import { sveltePreprocess } from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";
import path from "path";
import fs from "fs";
import 'svelte';

const production = !process.env.ROLLUP_WATCH;

export default fs
  .readdirSync(path.join(__dirname, "webviews", "pages"))
  .map((input) => {
    const name = input.split(".")[0];
    return {
      input: "webviews/pages/" + input,
      output: {
        sourcemap: true,
        format: "iife",
        name: "app",
        file: "out/compiled/" + name + ".js",
      },
      plugins: [
        svelte({
          dev: !production,
          css: (css) => {
            css.write(name + ".css");
          },
          preprocess: sveltePreprocess(),
        }),
        resolve({
          browser: true,
          dedupe: ["svelte"],
        }),
        commonjs(),
        typescript({
          tsconfig: "webviews/tsconfig.json",
          sourceMap: !production,
          inlineSources: !production,
        }),
        production && terser(),
      ],
      watch: {
        clearScreen: false,
      },
    };
  });

Posibles Soluciones

1. Instalar las Declaraciones de Tipo para Svelte:
   Asegúrate de tener instaladas las declaraciones de tipo para Svelte. Puedes hacerlo ejecutando:

   npm install --save-dev @types/svelte

2. Agregar un archivo de declaración de tipo (d.ts):
   Si las declaraciones de tipo no están disponibles, crea un archivo svelte.d.ts en la raíz de tu proyecto con el siguiente contenido:

   declare module "*.svelte" {
    import { SvelteComponentTyped } from "svelte";
    export default SvelteComponentTyped<any, any, any>;
   }

3. Verificar la Estructura de Archivos:
   Asegúrate de que la ruta del archivo Svelte sea correcta y que el archivo HelloWorld.svelte exista en la ubicación especificada.

4. Verificar Configuración de TypeScript:
   Asegúrate de que el archivo tsconfig.json esté correctamente configurado. Verifica que incluya el directorio donde están los archivos Svelte.

5. Verificar Versión de TypeScript:
   Si has intentado bajar la versión de TypeScript, asegúrate de que todas las dependencias sean compatibles con la versión seleccionada.

6. Ajustes en rollup.config.js:
   Asegúrate de que @rollup/plugin-typescript esté configurado adecuadamente y que el camino al tsconfig.json sea correcto.

Implementando estas soluciones, deberías poder resolver el error TS2307 y continuar con el desarrollo de tu aplicación en Svelte con TypeScript y Rollup sin inconvenientes.