Turborepo SvelteKit: cannot import TS files from workspace

[MarArMar]

Troubleshooting

Reproduction repo: https://github.com/MarArMar/TurboTest

npx turbo run dev --filter=SveltekitTypia

Bug 1: Cannot import TS files (critical because blocks dev)

SveltekitTypia:dev: Parse failure: Unexpected token (1:7)
SveltekitTypia:dev: At file: /@fs/.../TurboTest/packages/common/lib/log.ts
SveltekitTypia:dev: Contents of line 1: export type LogFunction = (...params: any) => void
SveltekitTypia:dev: Sourcemap for ".../TurboTest/apps/SveltekitTypia/src/routes/typia.ts" points to missing source files
SveltekitTypia:dev: 13:38:59 [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/@fs/.../TurboTest/packages/common/lib/log.ts"
SveltekitTypia:dev: |- Error: Parse failure: Unexpected token (1:7)
SveltekitTypia:dev: At file: /@fs/.../TurboTest/packages/common/lib/log.ts
SveltekitTypia:dev: Contents of line 1: export type LogFunction = (...params: any) => void

Note: it seems it imports them as JS because if you remove all TS syntax it works.

The file that loads the other files is TurboSvelteKitTypia\apps\SvelteKitTS\src\routes+page.svelte

Bug 2: Does not find source files (not critical because it does not block dev)

SveltekitTypia:dev: Sourcemap for ".../TurboTest/apps/SveltekitTypia/src/hooks.server.ts" points to missing source files

1. Does your Rollup plugin order match this plugin's compatibility? If not, please elaborate

Yes

	plugins: [sveltekit(),
		typescript({
			
			check: false,
})]

Environment

Turborepo & Sveltekit

Versions

  System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 2.61 GB / 15.74 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.8.0 - ~\AppData\Local\pnpm\pnpm.EXE

rollup.config.js

:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import typescript from "rollup-plugin-typescript2";

export default defineConfig({
	esbuild: false,
	plugins: [sveltekit(),
		typescript({
			check: false, // If not set, has another error before
		})]
});

tsconfig.json

:

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    
    "noEmitOnError": false,
    "plugins": [
      {
        "transform": "typia/lib/transform"
      }
    ],
    "strictNullChecks": true
  }
  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
  //
  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
  // from the referenced tsconfig.json - TypeScript does not merge them in
}

package.json

:

{
  "name": "SveltekitTypia",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev --open",
    "build": "vite build",
    "prepare": "ts-patch install"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.20.4",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-svelte": "^2.30.0",
    "rollup-plugin-typescript2": "^0.36.0",
    "svelte": "^4.0.5",
    "svelte-check": "^3.4.3",
    "ts-node": "^10.9.1",
    "ts-patch": "^3.0.2",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2",
    "typia": "^5.2.6",
    "vite": "^4.4.2"
  },
  "dependencies": {
    "common": "workspace:*"
  },
  "type": "module"
}

[agilgur5]

This doesn't seem to be an rpt2 error as none of the errors you have listed are from rpt2 or from TS.

Note: it seems it imports them as JS because if you remove all TS syntax it works.

The TS compiler (and rpt2 as a result) is compatible with both syntaxes and does not give such an error.

1. Does your Rollup plugin order match this plugin's compatibility? If not, please elaborate

rollup.config.js

This is a Vite config, not a Rollup config. Additionally, I believe SvelteKit is expecting JS and not TS (I believe it uses Vite/esbuild for transpilation), hence the error you're getting may very well be from SvelteKit, not rpt2. Your config has rpt2 after SvelteKit though.

I haven't used Svelte before though, so I can't really help you further than that, but it is pretty clear that it is not an rpt2 bug

[MarArMar]

Ok so I updated the example repo with all possible info : https://github.com/MarArMar/TurboSvelteKitTypia

• ✅ TS files from the same project work
• ✅ JS file from the PNPM workspace work
• ✅ On a regular Sveltekit install, TS files on the PNPM workspace work
• BUT When I import a TS file on the PNPM workspace work I get this :

Parse failure: Unexpected token (3:26)
At file: /@fs/TurboSvelteKitTypia/packages/common/log.ts
Contents of line 3: export const messageLoaded: string =

Like before, if I remove TS syntax from the TS file it works again. It seems the file is imported as JS

The file that loads the other files is TurboSvelteKitTypia\apps\SvelteKitTS\src\routes+page.svelte

Tried :

• putting the rollup-plugin-typescript2 plugin before the sveltekit plugin in the vite.config.ts, it didn't work
• importing the file with .ts at the end of the import, no effect
• importing the file from a relative path .ts at the end of the import, no effect (vite.config.ts can't import untranspiled ts files from other packages in the same monorepo vitejs/vite#5370 (comment))
• setting sourceMap: false, in the rollup-plugin-typescript2 plugin config, no effect (in tsconfig.json it does suppress a warning)
• setting allowImportingTsExtensions: true in the rollup-plugin-typescript2 plugin config & tsconfig, no effect (Can't make it work with Vite/Svelte samchon/typia#812 (comment))
• using tspCompiler in the rollup-plugin-typescript2 plugin config, no effect (Can't make it work with Vite/Svelte samchon/typia#812 (comment))

Tried solutions proposed in :

• Turborepo SvelteKit: cannot import TS files from workspace #465
• vite.config.ts can't import untranspiled ts files from other packages in the same monorepo vitejs/vite#5370 (comment)
• Can't make it work with Vite/Svelte samchon/typia#812

I am becoming really out of ideas and desperate, I would be thankful if you have any clue of what could I try next

[MarArMar]

Ok made it work @agilgur5

The issue was I had to add in the config: include: ["../../**/*.ts+(|x)"],

export default defineConfig({
  esbuild: false,
  plugins: [
    typescript({
      include: ["../../**/*.ts+(|x)"],
    }),
    sveltekit(),
  ],
});

[agilgur5]

Ah yea, since you're including files outside of the Rollup root, those files would be ignored by default