title: How do you import a Svelte component in a Typescript file?
body: <p>Is it possible to import a Svelte component in a Typescript file and have Rollup successfully compile it?</p>
  <p>The following code works as a Javascript file, but errors when converted to Typescript, because the TS compiler doesn’t know how to handle a <code>.svelte</code> file:</p>
  <pre class="lang-js prettyprint-override"><code>import Component from './Component.svelte';
  
  const foo = () =&gt; new Component({ target: document.body });
  </code></pre>
  <p>Is there a combination of <code>rollup-plugin-svelte</code> and <code>@rollup/plugin-typescript</code> that will preprocess the Svelte component in such a way that the Typescript compiler can include the Svelte code?</p>
  <hr />
  <p>In case some more context is helpful, boardgame.io includes <a href="https://github.com/boardgameio/boardgame.io/tree/31cb443ad966458bc625b1a4c980a00fd74ae24e/src/client/debug" rel="noreferrer">an in-browser debugging component</a> built with Svelte, which is bundled in both a plain JS client &amp; in a React client component, and we’re trying to update <a href="https://github.com/boardgameio/boardgame.io/blob/ce8ef4a16bcc420b05c5e0751b41f168352bce7d/rollup.config.js" rel="noreferrer">our Rollup config</a> for exactly this scenario.</p>