TypeScript paths not resolved

[joelmukuthu]

Describe the bug
Svelte files cannot be imported via paths defined in tsconfig.json.

To Reproduce
Steps to reproduce the behavior:

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@local/*":["./src/*"]
    }
  }
}

The ./src directory contains a directory of components, each with a *.svelte file and a package.json file. The package.json's main property points to the component's Svelte file. For example, ./src/button/package.json:

{
  "name": "@local/button",
  "main": "button.svelte"
}

The following import fails with: Cannot find module '@local/button' or its corresponding type declarations.ts(2307):

<script lang="typescript">
  import Button from '@local/button';
</script>

But this works fine:

<script lang="typescript">
  import Button from './src/button/button.svelte';
</script>

For example a code snippet that is treated in a way you don't expect.

Expected behavior
That the component can be imported with the relative path.

Screenshots
If applicable, add screenshots to help explain your problem.

System (please complete the following information):

• OS: Linux
• IDE: VSCode
• Plugin/Package: "Svelte Beta", svelte-language-server

Additional context
Svelte plugin output:

Initialize language server at  <projects dir>/svelte-typescript-webpack
Initialize new ts service at  <projects dir>/svelte-typescript-webpack/tsconfig.json
SnapshotManager File Statistics:
Project files: 2
Svelte files: 0
From node_modules: 0
Total: 2
Trying to load config for <projects dir>/svelte-typescript-webpack/src/app/app.svelte
Trying to load config for <projects dir>/svelte-typescript-webpack/src/button/button.svelte
Found config at  <projects dir>/svelte-typescript-webpack/svelte.config.js
Using Svelte v3.20.1 from <projects dir>/svelte-typescript-webpack/node_modules/svelte/compiler
Using Svelte v3.20.1 from <projects dir>/svelte-typescript-webpack/node_modules/svelte/compiler
Found config at  <projects dir>/svelte-typescript-webpack/svelte.config.js
Using Svelte v3.20.1 from <projects dir>/svelte-typescript-webpack/node_modules/svelte/compiler
Using Svelte v3.20.1 from <projects dir>/svelte-typescript-webpack/node_modules/svelte/compiler
SnapshotManager File Statistics:
Project files: 2
Svelte files: 2
From node_modules: 85
Total: 89
Using Svelte v3.20.1 from <projects dir>/svelte-typescript-webpack/node_modules/svelte/compiler
Using Svelte v3.20.1 from <projects dir>/svelte-typescript-webpack/node_modules/svelte/compiler

[joelmukuthu]

I found out that the issue is that module resolution (the main field in package.json) doesn't seem to work. The following tweak works:

<script lang="typescript">
  import Button from '@local/button/button.svelte';
</script>

[dummdidumm]

Related #28

[dummdidumm]

Paths mappings do work for me. For the main field in package.json, please see #28 .

[joelmukuthu]

Since #28 was closed as a won't do, is there anything we can do for the main or svelte fields in package.json?

[jasonlyu123]

Haven't tested it yet. But you can probably use typescript's path mapping to achieve this. This would be the alternative of the original issue's glob approach. You can manually map the module to what the package specified in the svelte field.
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Ideally, we are hoping library authors to provide tranpiled component and type definition files so that customers don't have to preprocess it. But these are still WIP.