Skip to content

custom_element_props_identifier after updating project #2041

@opensas

Description

@opensas

Describe the bug

In Input.svelte (for example) I get the following error:

	let {
		ref = $bindable(null),
		value = $bindable(),
		allowedChars,
		onkeydown: _onkeydown, // allow caller to set its own handler
		onbeforeinput: _onbeforeinput,
		oninput: _oninput,
		...restProps // ==>> Error custom_element_props_identifier
	}: Props = $props();

error: https://svelte.dev/docs/svelte/compiler-warnings#custom_element_props_identifier

/home/sas/devel/apps/dgiit/proyectos/encuestas/Main/Source/src/lib/components/input/Input.svelte
  18:3  error  Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
https://svelte.dev/e/custom_element_props_identifier(custom_element_props_identifier)  svelte/valid-compile

these are my dependencies:

	"devDependencies": {
		"@eslint/compat": "^1.2.9",
		"@playwright/test": "^1.52.0",
		"@sveltejs/adapter-auto": "^3.3.1",
		"@sveltejs/kit": "^2.21.1",
		"@sveltejs/vite-plugin-svelte": "^5.0.3",
		"autoprefixer": "^10.4.21",
		"bits-ui": "1.0.0-next.77",
		"clsx": "^2.1.1",
		"eslint": "^9.27.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-simple-import-sort": "^12.1.1",
		"eslint-plugin-svelte": "^2.46.1",
		"globals": "^15.15.0",
		"lucide-svelte": "^0.469.0",
		"mode-watcher": "^0.5.1",
		"prettier": "^3.5.3",
		"prettier-plugin-svelte": "^3.4.0",
		"prettier-plugin-tailwindcss": "^0.6.11",
		"svelte": "^5.33.10",
		"svelte-check": "^4.2.1",
		"sveltekit-adapter-node-iis": "^0.2.0",
		"tailwind-merge": "^2.6.0",
		"tailwind-variants": "^0.3.1",
		"tailwindcss": "^3.4.17",
		"tailwindcss-animate": "^1.0.7",
		"typescript": "^5.8.3",
		"typescript-eslint": "^8.33.0",
		"vite": "^6.3.5",
		"vitest": "^2.1.9"
	}

with these versions it won't report any error:

	"devDependencies": {
		"@eslint/compat": "^1.2.8",
		"@playwright/test": "^1.51.1",
		"@sveltejs/adapter-auto": "^3.3.1",
		"@sveltejs/kit": "^2.20.3",
		"@sveltejs/vite-plugin-svelte": "^5.0.3",
		"autoprefixer": "^10.4.21",
		"bits-ui": "1.0.0-next.77",
		"clsx": "^2.1.1",
		"eslint": "^9.23.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-simple-import-sort": "^12.1.1",
		"eslint-plugin-svelte": "^2.46.1",
		"globals": "^15.15.0",
		"lucide-svelte": "^0.469.0",
		"mode-watcher": "^0.5.1",
		"prettier": "^3.5.3",
		"prettier-plugin-svelte": "^3.3.3",
		"prettier-plugin-tailwindcss": "^0.6.11",
		"svelte": "^5.25.6",
		"svelte-check": "^4.1.5",
		"sveltekit-adapter-node-iis": "^0.2.0",
		"tailwind-merge": "^2.6.0",
		"tailwind-variants": "^0.3.1",
		"tailwindcss": "^3.4.17",
		"tailwindcss-animate": "^1.0.7",
		"typescript": "^5.8.2",
		"typescript-eslint": "^8.29.0",
		"vite": "^6.2.5",
		"vitest": "^2.1.9"
	}

Reproduction

this is my package.json

{
	"name": "encuestas",
	"private": true,
	"version": "1.1.3",
	"type": "module",
	"packageManager": "[email protected]",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"check:all": "pnpm run format && eslint . --fix && pnpm run check",
		"format": "prettier --write .",
		"lint": "prettier --check . && eslint .",
		"test:unit": "vitest",
		"test": "pnpm run test:unit -- --run && npm run test:e2e",
		"test:e2e": "playwright test"
	},
	"devDependencies": {
		"@eslint/compat": "^1.2.8",
		"@playwright/test": "^1.51.1",
		"@sveltejs/adapter-auto": "^3.3.1",
		"@sveltejs/kit": "^2.20.3",
		"@sveltejs/vite-plugin-svelte": "^5.0.3",
		"autoprefixer": "^10.4.21",
		"bits-ui": "1.0.0-next.77",
		"clsx": "^2.1.1",
		"eslint": "^9.23.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-simple-import-sort": "^12.1.1",
		"eslint-plugin-svelte": "^2.46.1",
		"globals": "^15.15.0",
		"lucide-svelte": "^0.469.0",
		"mode-watcher": "^0.5.1",
		"prettier": "^3.5.3",
		"prettier-plugin-svelte": "^3.3.3",
		"prettier-plugin-tailwindcss": "^0.6.11",
		"svelte": "^5.25.6",
		"svelte-check": "^4.1.5",
		"sveltekit-adapter-node-iis": "^0.2.0",
		"tailwind-merge": "^2.6.0",
		"tailwind-variants": "^0.3.1",
		"tailwindcss": "^3.4.17",
		"tailwindcss-animate": "^1.0.7",
		"typescript": "^5.8.2",
		"typescript-eslint": "^8.29.0",
		"vite": "^6.2.5",
		"vitest": "^2.1.9"
	}
}

Logs

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 1.98 GB / 15.06 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.16.0 - ~/.volta/tools/image/node/20.16.0/bin/node
    npm: 10.8.1 - ~/.volta/tools/image/node/20.16.0/bin/npm
    pnpm: 9.6.0 - ~/.volta/tools/image/pnpm/9.6.0/bin/pnpm
    bun: 1.1.38 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 136.1.78.102
    Chrome: 136.0.7103.113
  npmPackages:
    @sveltejs/kit: ^2.20.3 => 2.20.3 
    bits-ui: 1.0.0-next.77 => 1.0.0-next.77 
    lucide-svelte: ^0.469.0 => 0.469.0 
    mode-watcher: ^0.5.1 => 0.5.1 
    svelte: ^5.25.6 => 5.25.6 
    tailwindcss: ^3.4.17 => 3.4.17

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageThe issue is pending triage by a maintainer.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions