oxc-project/oxc · error · OxcDiagnostic

Props default value factory functions no longer have access

Error message

Props default value factory functions no longer have access to `this`.

What it means

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.

Source

Thrown at crates/oxc_linter/src/rules/vue/no_deprecated_props_default_this.rs:12

use oxc_ast::{
    AstKind,
    ast::{Expression, ObjectExpression, ObjectPropertyKind},
};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;

use crate::{AstNode, context::LintContext, rule::Rule, utils::is_vue_component_options_object};

fn no_deprecated_props_default_this_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Props default value factory functions no longer have access to `this`.")
        .with_label(span)
}

#[derive(Debug, Default, Clone)]
pub struct NoDeprecatedPropsDefaultThis;

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Disallow deprecated `this` access in props default function (in Vue.js 3.0.0+).
    ///
    /// ### Why is this bad?
    ///
    /// In Vue.js 3.0.0+, props default factory functions no longer have access to
    /// `this`. They are invoked before the component instance is created, so
    /// `this` is `undefined`. The factory should rely on its first argument (the
    /// raw props passed by the parent) instead.
    ///

View on GitHub (pinned to e1e7af627c)

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

Example fix

// before
props: {
  label: {
    default() { return this.fieldName },
  },
},
// after
props: {
  fieldName: { type: String, required: true },
  label: {
    default(props) { return props.fieldName },
  },
},

Defensive patterns

Strategy: validation

Validate before calling

# find this usage inside prop default factories
grep -rnB2 -A4 "default\s*(\([^)]*\))?\s*\{" --include='*.vue' src | grep "this\."

Prevention

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

When it happens

Trigger: 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).

Common situations: 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.

Related errors

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/65b50934d85ef742. Report an issue: GitHub.