Rollup error Could not resolve TS files without extension (.ts) from Svelte files

[TeemuKoivisto]

What happens and why it is wrong

I am trying to bundle a Svelte project that uses TypeScript and while importing TS files from other TS files works well, importing TS files inside Svelte project requires setting the extension eg utils.ts which then causes linting errors. This works in other TS rollup bundlers, like rollup-plugin-ts, but since they have other issues I am hoping this gets fixed so I can keep using this plugin instead.

Environment

It's exactly this project https://github.com/TeemuKoivisto/svelte-tree-view/tree/master/core

Versions

Running the command didn't work but I extracted the versions manually.

"typescript": "^4.4.2"
"rollup": "^2.56.3",
"rollup-plugin-typescript2": "^0.30.0"

rollup.config.js

`rollup.config.js`:

tsconfig.json

`tsconfig.json`:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom",
      "dom.iterable"
    ],
    "target": "es2019",
    "types": [
      "svelte",
      "jest",
      "@testing-library/jest-dom"
    ],
    /**
			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
			to enforce using \`import type\` instead of \`import\` for Types.
			*/
    "importsNotUsedAsValues": "error",
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "declarationDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    /**
			To have warnings/errors of the Svelte compiler at the correct position,
			enable source maps by default.
			*/
    "sourceMap": true,
    "baseUrl": "."
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.svelte"
  ],
  "exclude": [
    "**/__tests__"
  ]
}

package.json

`package.json`:

plugin output with verbosity 3

plugin output with verbosity 3:

rpt2: plugin options:
{
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "xxx/svelte-tree-view/core/node_modules/.cache/rollup-plugin-typescript2",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "useTsconfigDeclarationDir": false,
    "tsconfigOverride": {},
    "transformers": [],
    "tsconfigDefaults": {},
    "objectHashIgnoreUnknownHack": false,
    "cwd": "xxx/svelte-tree-view/core",
    "typescript": "version 4.4.2"
}
rpt2: rollup config:
{
    "external": [
        "@rollup/plugin-typescript",
        "rollup-plugin-typescript2"
    ],
    "input": "src/index.ts",
    "plugins": [
        {
            "name": "commonjs"
        },
        {
            "name": "rpt2"
        },
        {
            "name": "svelte"
        },
        {
            "name": "scss"
        },
        {
            "name": "node-resolve"
        },
        {
            "name": "terser"
        },
        {
            "name": "stdin"
        }
    ],
    "watch": {
        "clearScreen": false
    },
    "output": [
        {
            "file": "dist/index.js",
            "format": "umd",
            "name": "svelte-tree-view",
            "plugins": [],
            "sourcemap": true
        },
        {
            "file": "dist/index.es.js",
            "format": "es",
            "plugins": [],
            "sourcemap": true
        }
    ]
}
rpt2: tsconfig path: xxx/svelte-tree-view/core/tsconfig.json
rpt2: included:
[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]
rpt2: excluded:
[
    "*.d.ts",
    "**/*.d.ts"
]
(node:44909) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at xxx/svelte-tree-view/node_modules/rollup-plugin-typescript2/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
rpt2: Ambient types:
rpt2:     xxx/svelte-tree-view/node_modules/@types/jest/index.d.ts
rpt2: ambient types changed, redoing all semantic diagnostics
rpt2: transpiling 'xxx/svelte-tree-view/core/src/index.ts'
rpt2:     cache: 'xxx/svelte-tree-view/core/node_modules/.cache/rollup-plugin-typescript2/rpt2_7f906861443330a2bc40777737066bec1b082c02/code/cache/ece56db94fb66ebecf2e8491d48273d1b7374a6b'
rpt2:     cache miss
rpt2:     cache: 'xxx/svelte-tree-view/core/node_modules/.cache/rollup-plugin-typescript2/rpt2_7f906861443330a2bc40777737066bec1b082c02/syntacticDiagnostics/cache/ece56db94fb66ebecf2e8491d48273d1b7374a6b'
rpt2:     cache miss
rpt2:     cache: 'xxx/svelte-tree-view/core/node_modules/.cache/rollup-plugin-typescript2/rpt2_7f906861443330a2bc40777737066bec1b082c02/semanticDiagnostics/cache/ece56db94fb66ebecf2e8491d48273d1b7374a6b'
rpt2:     cache miss
rpt2: generated declarations for 'xxx/svelte-tree-view/core/src/index.ts'
[!] Error: Could not resolve './tree-utils' from src/TreeView.svelte
Error: Could not resolve './tree-utils' from src/TreeView.svelte

[veeking]

I have same problem, how did you solve it?

[TeemuKoivisto]

I have same problem, how did you solve it?

Switched to SvelteKit and rollup-plugin-ts

[l1bbcsg]

With @rollup/plugin-node-resolve listing all three of ['.js', '.ts', '.svelte'] in its extensions config option solves this problem.

[agilgur5]

Here's a permalink to OP's old commit that was referenced, as the master link referenced in OP is quite different now and was actually changed to use a different plugin the very same day.

Looking at the Rollup config, the ordering of plugins is confusing to me. Usually resolve comes first, then commonjs, then I would think svelte (as TS doesn't understand a Svelte file), and then rpt2.

Above comment suggests resolving .svelte files as well.

Switched to SvelteKit and rollup-plugin-ts

rollup-plugin-ts doesn't seem to have any specific code for Svelte, so I'm not sure why it works with this configuration 🤷

But it's a great plugin in any case! It was too complicated for me to contribute to in any short time period, so that's why I ended up contributing here a bunch instead over the years. rpt2 is significantly simpler, which has its trade-offs of course.
Ironically, in different issues I've seen people say the opposite -- that rpt2 is simple to configure, get started with, and contribute to -- so I guess it depends on who you ask and what your use-case, surrounding config, etc is 😅

[agilgur5]

So I investigated this issue and came up with a handful of different things:

clarifications

The error that OP was receiving wasn't from rpt2, but from Rollup itself.

That is, Rollup and none of the plugins were able to resolve the file without extension.

workarounds

With @rollup/plugin-node-resolve listing all three of ['.js', '.ts', '.svelte'] in its extensions config option solves this problem.

One can just add .ts to node-resolve's extensions (note that it has defaults as well per the link above), which will workaround this issue.
That is, per my previous comment, so long as node-resolve comes before rpt2 in the plugins list, as it should, per rpt2's Compatibility docs.

This workaround resolves the issue because it means node-resolve handles resolving the extensionless TS file, instead of rpt2. rpt2 will still transform the TS file though.

seems like this is caused by a regression

The root cause is because rpt2 has some very specific code to not resolve anything imported by a file that isn't in the tsconfig include (or hasn't been transformed). This line and the comment above that directly say that. Removing this line fixes this issue.

This was a bit of a doozy to track down why this even existed.
As far as I can tell, most Rollup plugins out there don't filter resolution this way, as this is kind of necessary for composing different Rollup plugins together, such as for this exact use-case of Svelte + TS.
As an example, if Svelte supported extensionless files and a TS file imported a Svelte file without extension, the Svelte plugin would similarly have to handle this. So this is a general Rollup plugin thing, not specific to TS plugins (but somewhat specific to TS itself as it allows extensionless imports).

I eventually traced it to this commit, which was meant to be an optimization / potential bugfix for #162 (which never actually got a response).
This seems to have been erroneous though, and the code for that issue seems to have caused a handful of different regressions unfortunately, including this one 😕

Can see a deeper investigation in #347 (comment) .

Writing up a PR to fix this shortly (EDIT: see #365). In the meantime, until the fix is released, please use the workaround listed above if you're facing this.

[agilgur5]

Oh boy this regression really goes back....

#172 (comment) mentions this exact same problem (importing TS files from Svelte files) and the suggested fix was to add .ts as well. The commenter there seemed to agree with that solution though, and so it was never entirely rolled back... and the rest is history 😕

That issue / comment is also linked to in a Svelte library's issues pyoner/svelte-typescript#15 (comment), which was subsequently linked to the official svelte-preprocess issues: sveltejs/svelte-preprocess#159 (comment) .
Both those issues suggest a workaround to downgrade to rpt2 0.21, which is prior to the regression 😬 😬 ....

Anyway... I've written a PR for this in #365, though it's really quite unfortunate how many regressions came out of #162 and how many years those have lasted for (and the additional confusion, frustration, breakage, etc caused by that) 😕 😕

[TeemuKoivisto]

Wow, really forgot about this issue but I'm impressed by the depth of your investigation! Glad you found the root cause and squashed that nasty bug. Big thumbs up 👍. Great work

[agilgur5]

#365 has been released in 0.33.0, and I confirmed that 0.33.0 works in your repro without extensions