{"record":{"id":"65b50934d85ef742","repo":"oxc-project/oxc","slug":"props-default-value-factory-functions-no-longer-ha","errorCode":null,"errorMessage":"Props default value factory functions no longer have access to `this`.","messagePattern":"Props default value factory functions no longer have access to `this`\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"error","filePath":"crates/oxc_linter/src/rules/vue/no_deprecated_props_default_this.rs","lineNumber":12,"sourceCode":"use oxc_ast::{\n    AstKind,\n    ast::{Expression, ObjectExpression, ObjectPropertyKind},\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\n\nuse crate::{AstNode, context::LintContext, rule::Rule, utils::is_vue_component_options_object};\n\nfn no_deprecated_props_default_this_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Props default value factory functions no longer have access to `this`.\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoDeprecatedPropsDefaultThis;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Disallow deprecated `this` access in props default function (in Vue.js 3.0.0+).\n    ///\n    /// ### Why is this bad?\n    ///\n    /// In Vue.js 3.0.0+, props default factory functions no longer have access to\n    /// `this`. They are invoked before the component instance is created, so\n    /// `this` is `undefined`. The factory should rely on its first argument (the\n    /// raw props passed by the parent) instead.\n    ///","sourceCodeStart":1,"sourceCodeEnd":30,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/vue/no_deprecated_props_default_this.rs#L1-L30","documentation":"Diagnostic from oxlint's vue/no-deprecated-props-default-this rule (since oxlint 1.67.0). It fires when a props default-value factory function accesses `this`. In Vue 3, prop default factories no longer receive the component instance — `this` is undefined — so the expression throws a TypeError at prop initialization time. In Vue 2 this worked, which is why migrated code keeps the pattern.","triggerScenarios":"A Vue component options object's `props` entry has a default factory (default: function() {} or default() {}) whose body contains a `this` member access (Expression on is_this_object receivers inside ObjectExpression defaults).","commonSituations":"Defaults computed from other props or from the service layer via this.$api / this.$store; Vue 2 code that 'worked' starts crashing during render prop initialization after the upgrade.","solutions":["Use the props argument Vue passes to the factory: default(props) { return props.otherProp + '!' }","Import the dependency at module scope instead of reading it from this","Move the logic into a computed or setup() where the instance is legitimately available"],"exampleFix":"// before\nprops: {\n  label: {\n    default() { return this.fieldName },\n  },\n},\n// after\nprops: {\n  fieldName: { type: String, required: true },\n  label: {\n    default(props) { return props.fieldName },\n  },\n},","handlingStrategy":"validation","validationCode":"# find this usage inside prop default factories\ngrep -rnB2 -A4 \"default\\s*(\\([^)]*\\))?\\s*\\{\" --include='*.vue' src | grep \"this\\.\"","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Write prop default factories against their props parameter, never this","Import shared dependencies at module scope instead of pulling them off the instance in defaults"],"tags":["vue","oxlint","lint","props","this-binding","vue3","migration"],"backgroundTag":"vue-2-to-3-migration","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}