title: Import alias svelte component in typescript svelte
body: <p>I want to import a svelte component in a typescript svelte component, it works for typescript file and other type of files, but in this case of svelte component, it resulted in a path error, here's my code :</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
      import LoadingIcon from &quot;src/components/LoadingIcon.svelte&quot;;
  &lt;/script&gt;
  </code></pre>
  <p>It only works if i use <code>../../components/LoadingIcon.svelte</code> instead of <code>src/components/LoadingIcon.svelte</code></p>
  <p>Here's the error:
  <code>Uncaught (in promise) TypeError: Failed to resolve module specifier &quot;src/forms/groups/GroupFilterForm.svelte&quot;. Relative references must start with either &quot;/&quot;, &quot;./&quot;, or &quot;../&quot;.</code></p>
  <p><a href="https://i.stack.imgur.com/F861u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F861u.png" alt="error" /></a></p>
  <p>Here's my <code>tsconfig.json</code>:</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;include&quot;: [&quot;src/**/*&quot;],
      &quot;exclude&quot;: [&quot;node_modules/*&quot;, &quot;public/*&quot;, &quot;tests/*&quot;, &quot;docs/*&quot;, &quot;demo/*&quot;],
      &quot;compilerOptions&quot;: {
          &quot;rootDir&quot;: &quot;src&quot;,
          &quot;lib&quot;: [&quot;es2017&quot;, &quot;dom&quot;],
          &quot;target&quot;: &quot;es2017&quot;,
          &quot;baseUrl&quot;: &quot;.&quot;,
          &quot;noEmitOnError&quot;: true,
          &quot;noErrorTruncation&quot;: true,
          &quot;module&quot;: &quot;esnext&quot;,
          &quot;moduleResolution&quot;: &quot;node&quot;,
          &quot;resolveJsonModule&quot;: true,
          &quot;allowSyntheticDefaultImports&quot;: true,
          &quot;noImplicitThis&quot;: true,
          &quot;noUnusedLocals&quot;: true,
          &quot;noUnusedParameters&quot;: true,
          &quot;types&quot;: [&quot;svelte&quot;, &quot;node&quot;],
          &quot;typeRoots&quot;: [&quot;./node_modules&quot;, &quot;./src/types&quot;]
      }
  }
  </code></pre>
  <p>and here's my <code>rollup.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import svelte from &quot;rollup-plugin-svelte&quot;;
  import resolve from &quot;@rollup/plugin-node-resolve&quot;;
  import commonjs from &quot;@rollup/plugin-commonjs&quot;;
  import typescript from &quot;@rollup/plugin-typescript&quot;;
  import replace from &quot;@rollup/plugin-replace&quot;;
  import json from &quot;@rollup/plugin-json&quot;;
  import livereload from &quot;rollup-plugin-livereload&quot;;
  import { terser } from &quot;rollup-plugin-terser&quot;;
  import sveltePreprocess from &quot;svelte-preprocess&quot;;
  import copy from &quot;rollup-plugin-copy&quot;;
  import del from &quot;rollup-plugin-delete&quot;;
  const buildDir = &quot;public/build&quot;;
  const deploymentDir = &quot;public&quot;;
  
  const production = !process.env.ROLLUP_WATCH;
  
  const dotenv = require(&quot;dotenv-flow&quot;);
  
  dotenv.config({
      node_env: process.env.NODE_ENV,
      default_node_env: &quot;development&quot;,
  });
  
  const fileDev = dotenv.listDotenvFiles(&quot;/&quot;, {
      node_env: &quot;development&quot;,
  });
  const fileProd = dotenv.listDotenvFiles(&quot;/&quot;, {
      node_env: &quot;production&quot;,
  });
  
  function serve() {
      let server;
  
      function toExit() {
          if (server) server.kill(0);
      }
  
      return {
          writeBundle() {
              if (server) return;
              server = require(&quot;child_process&quot;).spawn(
                  &quot;npm&quot;,
                  [&quot;run&quot;, &quot;start&quot;, &quot;--&quot;, &quot;--dev&quot;],
                  {
                      stdio: [&quot;ignore&quot;, &quot;inherit&quot;, &quot;inherit&quot;],
                      shell: true,
                  }
              );
  
              process.on(&quot;SIGTERM&quot;, toExit);
              process.on(&quot;exit&quot;, toExit);
          },
      };
  }
  const baseUrl =
      process.env.BASE_URL == &quot;/&quot;
          ? &quot;&quot;
          : &quot;/&quot; + (process.env.BASE_URL || &quot;&quot;).replace(/^\/|\/$/g, &quot;&quot;);
  export default [
      {
          input: &quot;src/main.ts&quot;,
          output: {
              sourcemap: true,
              format: &quot;esm&quot;,
              name: &quot;app&quot;,
              dir: `${buildDir}/`,
          },
          plugins: [
              del({ targets: `${deploymentDir}/*`, runOnce: true }),
              copy({
                  targets: [
                      { src: &quot;scripts/*&quot;, dest: `${buildDir}/` },
                      {
                          src: &quot;src/index.html&quot;,
                          dest: `${deploymentDir}/`,
                          transform: (contents) =&gt; {
                              let content = contents.toString();
                              content = content.replace(
                                  /(&lt;%=)[\s]{0,}(BASE_URL)[\s]{0,}(%&gt;)/gm,
                                  baseUrl
                              );
                              return content;
                          },
                          copyOnce: true,
                      },
                      {
                          src: &quot;src/assets/images/*&quot;,
                          dest: `${deploymentDir}/images/`,
                          copyOnce: true,
                      },
                      {
                          src: &quot;src/assets/lang/*&quot;,
                          dest: `${deploymentDir}/lang/`,
                          copyOnce: true,
                      },
                      {
                          src: &quot;src/assets/plugins/*&quot;,
                          dest: `${deploymentDir}/plugins/`,
                          copyOnce: true,
                      },
                  ],
              }),
              json(),
              replace({
                  &quot;process.browser&quot;: true,
                  &quot;process.env.NODE_ENV&quot;: JSON.stringify(
                      production ? &quot;production&quot; : &quot;development&quot;
                  ),
                  &quot;process.env.BASE_URL&quot;: JSON.stringify(process.env.BASE_URL),
                  &quot;process.env.API_URL&quot;: JSON.stringify(process.env.API_URL),
              }),
              svelte({
                  dev: !production,
                  css: (css) =&gt; {
                      css.write(`bundle.css`);
                  },
                  preprocess: sveltePreprocess({
                      postcss: {
                          configFilePath: &quot;./postcss.config.js&quot;,
                      },
                      typescript: {
                          tsconfigFile: `./tsconfig.json`,
                      },
                  }),
              }),
              resolve({
                  browser: true,
                  dedupe: [&quot;svelte&quot;],
                  extensions: [&quot;.mjs&quot;, &quot;.ts&quot;, &quot;.js&quot;, &quot;.json&quot;, &quot;.node&quot;, &quot;.svelte&quot;],
              }),
              commonjs(),
              typescript({
                  sourceMap: !production,
                  inlineSources: !production,
              }),
  
              // In dev mode, call `npm run start` once
              // the bundle has been generated
              !production &amp;&amp; serve(),
  
              // Watch the `public` directory and refresh the
              // browser on changes when not in production
              !production &amp;&amp; livereload(deploymentDir),
  
              // If we're building for production (npm run build
              // instead of npm run dev), minify
              production &amp;&amp; terser(),
          ],
          watch: {
              clearScreen: false,
          },
      },
  ];
  </code></pre>
  <p>Anyone knows how to fix this issue? thank you for your help</p>