title: import Stencil in Svelte
body: <p>I have a Monorepo with a svelte project and a Stencil component library. On the <a href="https://stenciljs.com/docs/overview" rel="nofollow noreferrer">Stencil website</a> they very clearly describe how to integrate the library with, for example, Angular </p>
  
  <pre><code>import { defineCustomElements } from 'test-components/loader';
  defineCustomElements(window);
  </code></pre>
  
  <p>Super easy. But now I would like to use it too in a Svelte project ..... not so super easy anymore :(</p>
  
  <p>When I try to do something similar as described above I get serious errors</p>
  
  <p><a href="https://i.stack.imgur.com/XC5ex.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XC5ex.png" alt="enter image description here"></a></p>
  
  <p><code>fbp/dist</code> is where the Stencil files are.</p>
  
  <p>When I build my Stencil project first and copy my dist into the <code>public</code> folder and load  <code>./dist/fbp.js</code> in the head of <code>index.html</code> it all works. But it would be a lot easier if I could include it similar as it does with Angular. Any suggestions?</p>
  
  <p>Update: Added <code>emitCss</code> which gives</p>
  
  <p><a href="https://i.stack.imgur.com/sv2rc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sv2rc.png" alt="enter image description here"></a></p>
  
  <p>Somewhere at the end it stats: <code>Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)</code></p>
  
  <p>UPDATE: With the fixes of @Sambor, Svelte is now able to download the web component, which unfortunately fails</p>
  
  <p><a href="https://i.stack.imgur.com/enAwJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enAwJ.png" alt="enter image description here"></a></p>