TypeScript: Build fails with `bindable_invalid_location` on destructuring assignment with a rest operator

[CosmoMyzrailGorynych]

Describe the bug

My issue is similar to #15209, but more nuanced. My case emerges while trying to use @xyflow/svelte@next package.

After switching to this xyflow version, Svelte fails with an error bindable_invalid_location. (See logs.) The actual code referenced in the logs does use $bindable in the props declaration:

  let {
    width,
    height,
    proOptions,
    selectionKey,
    deleteKey,
    panActivationKey,
    multiSelectionKey,
    zoomActivationKey,
    paneClickDistance = 1,
    nodeClickDistance = 1,
    onmovestart,
    onmoveend,
    onmove,
    oninit,
    onnodeclick,
    onnodecontextmenu,
    onnodedrag,
    onnodedragstart,
    onnodedragstop,
    onnodepointerenter,
    onnodepointermove,
    onnodepointerleave,
    onselectionclick,
    onselectioncontextmenu,
    onedgeclick,
    onedgecontextmenu,
    onedgepointerenter,
    onedgepointerleave,
    onpaneclick,
    onpanecontextmenu,
    panOnScrollMode = PanOnScrollMode.Free,
    preventScrolling = true,
    zoomOnScroll = true,
    zoomOnDoubleClick = true,
    zoomOnPinch = true,
    panOnScroll = false,
    panOnDrag = true,
    selectionOnDrag = true,
    connectionLineComponent,
    connectionLineStyle,
    connectionLineContainerStyle,
    connectionLineType = ConnectionLineType.Bezier,
    attributionPosition,
    children,
    nodes = $bindable([]),
    edges = $bindable([]),
    viewport = $bindable(undefined),
    ...props
  }: SvelteFlowProps & HTMLAttributes<HTMLDivElement> = $props();

Reproduction

⚠️👉 Now look, I am able to reproduce the same error only if I add ...theRest:

{sausages} sausages {#if theRest} with {Object.keys(theRest).join(', ')}{/if}

<script lang="ts">
type A = {
    sausages: number;
    ketchup?: boolean;
    mayonnaise?: boolean;
};

let {
    sausages = $bindable(1),
    ...theRest
}: A = $props();
</script>

00:29:14 [vite] (client) Pre-transform error: src/App.svelte:14:32 `$bindable()` can only be used inside a `$props()` declaration
https://svelte.dev/e/bindable_invalid_location
  Plugin: vite-plugin-svelte
  File: src/App.svelte:14:32
   12 |      return t;
   13 |  };
   14 |  let _a = $props(), { sausages = $bindable(1) } = _a, theRest = __rest(_a, ["sausages"]);
                                                     ^
   15 |  </script>

👉 Using JS only instead of TS magically fixes the issue.

Logs

X [ERROR] node_modules/@xyflow/svelte/dist/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte:16:42 `$bindable()` can only be used inside a `$props()` declaration
https://svelte.dev/e/bindable_invalid_location [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/@xyflow/svelte/dist/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte:16:42:
      16 │ ...pe, reconnecting = $bindable(false), po...
         ╵                        ^

  The plugin "vite-plugin-svelte:optimize-svelte" was
  triggered by this import

    node_modules/@xyflow/svelte/dist/lib/components/EdgeReconnectAnchor/index.js:1:47:
      1 │ ...chor } from './EdgeReconnectAnchor.svelte';
        ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] node_modules/@xyflow/svelte/dist/lib/container/SvelteFlow/SvelteFlow.svelte:27:855 `$bindable()` can only be used inside a `$props()` declaration
https://svelte.dev/e/bindable_invalid_location [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/@xyflow/svelte/dist/lib/container/SvelteFlow/SvelteFlow.svelte:27:855:
      27 │ ... children, nodes = $bindable([]), edges...
         ╵                        ^

  The plugin "vite-plugin-svelte:optimize-svelte" was
  triggered by this import

    node_modules/@xyflow/svelte/dist/lib/container/SvelteFlow/index.js:1:38:
      1 │ ...as SvelteFlow } from './SvelteFlow.svelte';

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H   
    Memory: 42.32 GB / 63.73 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE     
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD        
    bun: 1.2.10 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.1
    (but I'm using Firefox, hello???)
  npmPackages:
    svelte: ^5.27.0 => 5.27.0

Severity

blocking an upgrade

[7nik]

14 | let _a = $props(), { sausages = $bindable(1) } = _a, theRest = __rest(_a, ["sausages"]);

Well, it's definitely bindable_invalid_location. It looks like the code is downgraded to lower than ES2015 Or ES6 (dude, it's already 10yo).

Please provide more info about your setup.

[CosmoMyzrailGorynych]

Regular npm create vite with Svelte (and no SvelteKit) and TypeScript and vitePreprocess.

  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^5.0.3",
    "@tsconfig/svelte": "^5.0.4",
    "stylus": "^0.64.0",
    "svelte": "^5.27.0",
    "svelte-check": "^4.1.6",
    "svelte-preprocess": "^6.0.3",
    "type-fest": "^4.40.0",
    "typescript": "~5.7.3",
    "vite": "^6.3.1",
    "vite-raw-plugin": "^1.0.2"
  },
  "dependencies": {
    "@neutralinojs/lib": "^6.0.0",
    "@xyflow/svelte": "^1.0.0-next.9",
    "nanoid": "^5.1.5",
    "runed": "^0.25.0",
    "svelte-awesome-color-picker": "^4.0.1",
    "svelte-portal": "^2.2.1"
  }

svelte.config.js:

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

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),
}

vite.config.ts:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import raw from 'vite-raw-plugin';
import { sveltePreprocess } from 'svelte-preprocess';

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        svelte({
            preprocess: sveltePreprocess()
        }),
        raw({
            fileRegex: /\.text$/
        })
    ]
});

[CosmoMyzrailGorynych]

I should probably post TSConfigs, but I haven't changed them much either, I think:

{
  "composite": true,
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "resolveJsonModule": true,
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "verbatimModuleSyntax": true,
    "strict": true
  },
  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

The "node" one:

{
  "composite": true,
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

[CosmoMyzrailGorynych]

It looks like svelte-preprocess cannot find the proper TSConfig/uses the almost empty root config, and uses weird defaults. Adding a direct path fixes the issue:

 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import raw from 'vite-raw-plugin';
 import { sveltePreprocess } from 'svelte-preprocess';
 
 // https://vite.dev/config/
 export default defineConfig({
     plugins: [
         svelte({
-            preprocess: sveltePreprocess()
+            preprocess: sveltePreprocess({
+                typescript: {
+                    tsconfigFile: 'tsconfig.app.json'
+                }
+            })
         }),
         raw({
             fileRegex: /\.text$/
         })
     ]
 });

Oh well. The joys of modern JS development.

[CosmoMyzrailGorynych]

Thank you @7nik for nudging me to the needed solution.