esbuild-svelte: "p has already been declared" error when using @threlte/core with Svelte 5

[hussienliban]

Describe the bug
When building a project using @threlte/core with esbuild-svelte, multiple "p has already been declared" errors are occurring in the Canvas.svelte and T.svelte components from the @threlte/core package.

To Reproduce
Steps to reproduce the behavior:

Have a project using @threlte/core for 3D rendering in Svelte
Build the project with esbuild-svelte plugin
See multiple errors stating "p has already been declared" in:

@threlte/core/dist/Canvas.svelte
@threlte/core/dist/components/T/T.svelte

Expected behavior
The build should complete successfully without any variable redeclaration errors.

Screenshots

✘ [ERROR] `p` has already been declared [plugin esbuild-svelte]
    node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@threlte/core/dist/Canvas.svelte:6:9

Environment (please complete the following information):

• Svelte preprocessors: 6.0.3([email protected])([email protected])
• esbuild-svelte version: 0.9.0
• esbuild version: 0.24.0
• Svelte version: 5.2.7
• @threlte/core version: 8.0.0-next.31

[hussienliban]

I’ve created this repository for reference: https://github.com/hussienliban/svelte-esbuild-test/

[ginpei]

Hi I have the same issue. Here is the minimum config

const esbuild = require('esbuild');
const sveltePlugin = require('esbuild-svelte');
const sveltePreprocess = require('svelte-preprocess');

esbuild.build({
  entryPoints: ['src/main.ts'],
  bundle: true,
  outfile: 'dist/build/bundle.js',
  plugins: [
    sveltePlugin({
      preprocess: sveltePreprocess(),
    }),
  ],
});

... and code

// src/main.ts

import { mount } from "svelte";
import App from './App.svelte';

mount(App, { target: document.body });

<script lang="ts">
  let { ...props } = $props();
</script>

The error is same:

$ node esbuild.config.js 
✘ [ERROR] `p` has already been declared
https://svelte.dev/e/declaration_duplicate [plugin esbuild-svelte]

    src/App.svelte:7:0:
      7 │ 
        ╵ ^

  The plugin "esbuild-svelte" was triggered by this import

    src/main.ts:2:16:
      2 │ import App from './App.svelte';
        ╵                 ~~~~~~~~~~~~~~

/path/to/project/node_modules/esbuild/lib/main.js:1477
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
src/App.svelte:7:24: ERROR: [plugin: esbuild-svelte] `p` has already been declared
https://svelte.dev/e/declaration_duplicate
    at failureErrorWithLog (/path/to/project/node_modules/esbuild/lib/main.js:1477:15)
    at /path/to/project/node_modules/esbuild/lib/main.js:946:25
    at /path/to/project/node_modules/esbuild/lib/main.js:1355:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v22.6.0

Environment:

• esbuild-svelte version: 0.9.0
• esbuild version: 0.25.0
• Svelte version: 5.20.2
• Svelte preprocessors used and their versions (if any):
  • svelte-preprocess: 6.0.3
• typescript: 5.7.3
• node: 22.6.0

Something I found:

• It works without lang="ts"
• It works if it was not destructure syntax: let props = $props()
• FYI the above problematic code is generated by the Svelte 5 migration tool from let allProps = $$props

[hussienliban]

it could be related to this sveltejs/svelte-preprocess#662

[ginpei]

The root cause of this issue looks on Svelte compiler: sveltejs/svelte#15375

[EMH333]

Closing as sveltejs/svelte#15375 appears to resolve this