svench with typescript

[bhvngt]

I am stuck with making typescript work with svench. It works fine when it is run with only vite. Any hint to solve this will be highly appreciated.

Here's my setup

vite.config.js

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import preprocess from "svelte-preprocess";

export default defineConfig({
    plugins: [svelte({ preprocess: preprocess({typescript: true}) })]
});

src/Component.svelte

<script lang="ts">
    export let name = "";

    let buttonText: string = 'Button with ts'

    function handleClick() {
        buttonText = 'Button Clicked'
    }
</script>

<h1 class='border m-2'>Hello {name}!</h1>

<button on:click="{handleClick}">{buttonText}</button>

package.json

    "devDependencies": {
        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.14",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/svelte": "^3.0.3",
        "@types/jest": "^26.0.24",
        "@types/testing-library__jest-dom": "^5.14.1",
        "jest": "^27.0.6",
        "svelte-check": "^2.2.3",
        "svelte-jester": "^1.7.0",
        "svelte-preprocess": "^4.7.4",
        "svench": "^0.2.0-28",
        "ts-jest": "^27.0.4",
        "tslib": "^2.3.0",
        "typescript": "^4.3.5",
        "vite": "^2.4.3",
        "@tsconfig/svelte": "^2.0.1",
        "postcss": "^8.3.5",
        "postcss-load-config": "^3.1.0",
        "autoprefixer": "^10.3.1",
        "cssnano": "^5.0.6",
        "tailwindcss": "^2.2.4"
    },

tsconfig.json

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
    "exclude": ["node_modules/*", "coverage/*"],
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "lib": ["dom", "esnext"],
        "allowJs": true,
        "strict": true,
        "moduleResolution": "node",
        "types": ["svelte"] ,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "importsNotUsedAsValues": "error",
        "isolatedModules": true,
        "sourceMap": true,
        "baseUrl": ".",
        "checkJs": true
    }
}

It throws following error when it sees any typescript syntax

Error: failed to load component
TypeError: Failed to fetch dynamically imported module: http://localhost:4242/@fs/Project/src/Component.svench?import

on the vite cli it throws

[vite] Internal server error: Unexpected token
File: /Project/src/Component.svelte
  2:   export let name = "";
  3: 
  4:   let buttonText: string = 'Button with ts'
                     ^
  5: 
  6:   function handleClick() {

[rixo]

• upgrade to svench@0.2.0-30 (when investigating your problem, I discovered that we had a compatibility issues with latest versions of @sveltejs/vite-plugin-svelte)

• I assumed you were using "type": "module" in your package.json

• move your Svelte plugin config to svelte.config.js

Historically, Svench was CJS based and used proxyquire wizardry to replace and steal config of your Svelte plugin... Now with native ESM this is way harder to achieve and doesn't seem to be worth the trouble, so we gave up on trying to retrieve the Svelte plugin config from inside your rollup.config.js, vite.config.js or so, and instead only base on what's present in svelte.config.js.

So, in your case:

• remove any plugin config from vite.config.js:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
})

• move it to svelte.config.js:

import preprocess from 'svelte-preprocess'

export default {
  preprocess: preprocess({ typescript: true }),
}

Does this work for you?

[bhvngt]

Thank you so much @rixo for your detailed explanation. You rock man!!! It totally works.

Shift from cjs to esm has been quite a learning experience for me too. I am closing this issue and will look forward to using svench :-)