1

Does anyone possess secret knowledge how to make this work? I am trying to migrate from relative to absolute imports using tsconfig paths and having problems with resolution of *.svelte files.

tsconfig.json:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "lib": [
      "dom",
      "es2020"
    ],
    "paths": { //❗
      "~/*": [
        "src/*"
      ]
    },
    "strict": true,
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/*",
    "public/*"
  ]
}

rollup.config.js:

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
// ...
plugins: [
  // ...
  resolve({
    browser: true,
    dedupe: ["svelte"],
  }),
  commonjs(),
  typescript({
    sourceMap: !production,
    inlineSources: !production,
  }),
  // ...
],
...

src/App.svelte:

<script lang="ts">
  import Test from '~/Test.svelte'; //❗
  //import Test from './Test.svelte'; // works without issues
</script>

<Test />

rollup output:

$ rollup -c -w
rollup v2.44.0
bundles src/main.ts → public\build\bundle.js...
LiveReload enabled on port 35730
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
~/Test.svelte (imported by src\App.svelte)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
~/Test.svelte (guessing 'Test')
created public\build\bundle.js in 845ms
...

Runtime error:

Uncaught ReferenceError: Test is not defined
    at bundle.js:367:3

Test project (clone, yarn and yarn run serve): https://github.com/earshinov/bug-svelte-rollup-typescript-paths

The deepest I went is here: https://github.com/microsoft/TypeScript/blob/v4.2.3/src/compiler/moduleNameResolver.ts#L1062. TypeScript is doing something weird with module extensions, so maybe that's the problem.

Similar questions:

  • Setup tsconfig path in svelte - This one is 3 years ago, and the best answer involves configuring aliases separately in rollup config. @rollup/plugin-typescript claims to properly configure module resolution, so using aliases sounds like an ugly workaround.
Evgeny A.
  • 731
  • 2
  • 8
  • 19
  • Try follow all the steps in this blog post? https://codingcat.dev/post/make-pathing-easier-with-aliases-in-sveltekit#change-default-alias – Oscar Hermoso May 10 '23 at 16:24
  • 1
    @OscarHermoso, they seem to have a different stack - SvelteKit + Vite. For my situation, I ended up separately configuring aliases in Rollup (approach from another question linked in the description) – Evgeny A. May 11 '23 at 19:02

0 Answers0