vue/require-default-prop gives false positive for optional Function props

[richardtallent-erm]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.56.0
• eslint-plugin-vue version: 9.20.1
• Vue version: 3.4.15
• Node version: 20.5.1
• Operating System: Windows 10

Please show your full configuration:

const ELEMENTS_CONTENT_WRAP_ALLOWED = ["div", "pre", "textarea", "p", "b", "i", "a", "u", "s", "em", "strong", "template", "router-link"]

module.exports = {
	plugins: ["vuejs-accessibility", "vue"],
	extends: [
		"eslint:recommended",
		"plugin:import/recommended",
		"plugin:import/typescript",
		"plugin:vue/vue3-recommended",
		"plugin:vuejs-accessibility/recommended",
		"plugin:@typescript-eslint/recommended",
		"prettier",
	],
	settings: {
		"import/resolver": {
			typescript: true,
			vite: {
				configPath: "./vite.config.ts",
			},
			node: true,
		},
		"import/extensions": [".js", ".ts", ".vue"],
		"import/ignore": ["\\.vue$"],
	},
	env: {
		// Needed for "require" to be recognized as defined
		node: true,
	},
	// Prevent this configuration from being merged with parent folders (e.g., where this
	// is used as a submodule for another project).
	root: true,
	parser: "vue-eslint-parser",
	parserOptions: {
		ecmaVersion: "latest",
		parser: "@typescript-eslint/parser",
	},
	rules: {
		// For eslint-plugin-import
		"import/no-deprecated": 1,
		"import/no-empty-named-blocks": 1,
		"import/no-extraneous-dependencies": 1,
		"import/no-mutable-exports": 1,
		"import/no-nodejs-modules": 1,
		"import/no-absolute-path": 1,
		"import/no-dynamic-require": 1,
		"import/no-self-import": 1,
		"import/no-useless-path-segments": 1,
		"import/no-webpack-loader-syntax": 1,
		"import/consistent-type-specifier-style": [1, "prefer-top-level"],
		"import/first": 1,
		"import/newline-after-import": 1,
		"import/no-named-default": 1,
		"import/no-namespace": 1,
		"import/prefer-default-export": 1,
		"import/order": [
			1,
			{
				"newlines-between": "always-and-inside-groups",
				groups: ["builtin", "external", "internal", "parent", "sibling"],
				distinctGroup: false,
				pathGroups: [
					// Put vue core stuff first within the external group (cannot override "builtin" pattern)
					{ pattern: "{vue,vue-router,axios}", group: "external", position: "before" },
					// Match @ prefix as internal, put Vue components last within that group
					{ pattern: "@/**/*.vue", group: "internal", position: "after" },
					{ pattern: "@/**", group: "internal" },
					// Matches things like @fortawesome/.., @types/..., as external
					{ pattern: "@!(/)**", group: "external" },
					// Put vue components at the end of each group
					{ pattern: "./**/*.vue", group: "sibling", position: "after" },
					{ pattern: "**/*.vue", group: "parent", position: "after" },
				],
			},
		],
		// Don't need to lint, this is handled by prettier
		indent: [0, "tab"],
		// In general, use double quotes for strings (like C#), unless single quotes
		// will simplify quoting.
		quotes: [
			"error",
			"double",
			{
				avoidEscape: true,
			},
		],
		// Matches Prettier 2.x
		"space-before-function-paren": [
			"warn",
			{
				anonymous: "always",
				named: "never",
				asyncArrow: "always",
			},
		],
		// Disable this rule, let Prettier take care of it
		"arrow-parens": 0,
		// Not an error
		"no-console": "warn",
		// Don't force this, not worth the effort to save on git churn for Vue files
		// since the last line is almost aways the end of the script or style tag.
		"eol-last": "off",
		// Yes, we know it can be dangerous. But it's also very useful.
		"vue/no-v-html": 0,
		// This always ends up being arbitrary and makes it difficult to align similar code.
		// Let Prettier's line width limit determine this.
		"vue/max-attributes-per-line": "off",
		// Disabled because newlines before closing brackets look ugly and waste space.
		"vue/html-closing-bracket-newline": 0,
		// XHTML FTW!
		"vue/html-self-closing": [
			"error",
			{
				html: {
					void: "always",
					normal: "always",
					component: "always",
				},
				svg: "any",
				math: "always",
			},
		],
		"vue/no-mutating-props": "warn",
		// Not worth fighting differences between this rule and Prettier's config. Just disable it entirely.
		"vue/html-indent": 0,
		// For more complex tags, it makes sense to always indent their content under them,
		// unless the content is very simple.
		"vue/multiline-html-element-content-newline": [
			1,
			{
				ignoreWhenEmpty: true,
				ignores: ELEMENTS_CONTENT_WRAP_ALLOWED,
				allowEmptyLines: false,
			},
		],
		// Sometimes the input element is in a separate conteol.
		"vuejs-accessibility/form-control-has-label": 0,
		"vuejs-accessibility/label-has-for": 0,
		// Sometimes divs receive keys and aren't focused directly
		"vuejs-accessibility/no-static-element-interactions": 0,
		// https://stackoverflow.com/questions/64149427/eslint-un-used-varialbes-rule-for-parameters-of-function-type-in-typescript
		"no-unused-vars": "off",
		"@typescript-eslint/no-unused-vars": [
			"warn",
			{
				argsIgnorePattern: "^_",
				varsIgnorePattern: "^_",
				caughtErrorsIgnorePattern: "^_",
			},
		],
		"vue/first-attribute-linebreak": [
			"error",
			{
				singleline: "ignore",
				multiline: "below",
			},
		],
	},
}

What did you do?

-- MyComponent.vue
export type ToggleCallback = (target: Item) => void

const props = withDefaults(
	defineProps<{
		item: Item
		onToggle?: ToggleCallback
	}>(),
	{
		onToggle: (_: Item) => {},
	}
)

What did you expect to happen?

I've provided a default for this Function-typed property, so I don't expect an error. I also wouldn't expect an error if I set the default to undefined or null.

What actually happened?

C:\Temp\components\MyComponent.vue
  35:4  warning  Prop 'onToggle' requires default value to be set    vue/require-default-prop

Repository to reproduce this issue

No time right now to reproduce. Might be easier if I write a test for your test package, but not sure if you accept PRs for that?

[FloEdelmann]

This is probably the same issue as #2051, right? Can we then close this issue in favor of #2051?

[richardtallent-erm]

Not sure... there are similarities to the last comment on #2051, but otherwise this looks different.

I'm looking at it more deeply, and it appears the problem is the use of spreading in my defaults. My actual defaults look like this:

const props = withDefaults(<
  ICommonProps && {
    onToggle?: ToggleCallback
  }>(),
  {
    ...CommonPropDefaults,
    onToggle: (_: Item) => {},
  }

CommonPropDefaults just has defaults for other properties that are common across several components -- nothing related to the Function prop.

But without the spread operator in the second argument of withDefaults(), I don't get the error. Weird.

So... I guess I'm going to need to create a reproduction.