title: Setup tsconfig path in svelte
body: <p>Using Svelte and typescript, I would like to use paths for component import.</p>
  <p>I have the following <code>tsconfig.json</code></p>
  <pre><code>{
    &quot;extends&quot;: &quot;@tsconfig/svelte/tsconfig.json&quot;,
    &quot;include&quot;: [&quot;src/**/*&quot;],
    &quot;main&quot;: &quot;src/main.ts&quot;,
    &quot;exclude&quot;: [&quot;node_modules/*&quot;, &quot;__sapper__/*&quot;, &quot;public/*&quot;],
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;./&quot;,
      &quot;module&quot;: &quot;es2020&quot;,
      &quot;target&quot;: &quot;es2020&quot;,
      &quot;paths&quot;: {
        &quot;@src/*&quot;: [&quot;src/*&quot;],
        &quot;@environments/*&quot;: [&quot;src/environments/*&quot;]
      }
    }
  }
  </code></pre>
  <p>Now when I do</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
    import Home from '@src/home/Home.svelte'
  &lt;/script&gt;
  
  &lt;style&gt;
    main {
      width: 100%;
      height: 100%;
      position: relative;
    }
  &lt;/style&gt;
  
  &lt;main&gt;
    &lt;Home/&gt;
  &lt;/main&gt;
  
  </code></pre>
  <p>The home point to some svelte internal file =&gt;</p>
  <p><a href="https://i.stack.imgur.com/a7oGK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/a7oGK.png" alt="enter image description here" /></a></p>
  <p>instead of my <code>Home.svelte</code></p>
  <p><a href="https://i.stack.imgur.com/GDKIt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GDKIt.png" alt="enter image description here" /></a></p>
  <p>It works if I do <code>import Home from './home/Home.svelte'</code>
  I can't figure out why.</p>