[SalesForce] Creating a Case Detail LWC But get error that recordId is undefined

So I am creating a LWC, but when I add this to the App Builder the component doesn't render and when refreshing the app builder I get the following error

This page has an error. You might just need to refresh it. Failed to initialize a component [Cannot read property 'recordId' of undefined]

The meta data looks like:

    <isExposed>true</isExposed>
    <masterLabel>Case Details</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Case</object>
            </objects>
        </targetConfig>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" ></property>
        </targetConfig>
    </targetConfigs>

and the JS file looks like this:

    @api recordId;
    @track subject;
    @track description;
    @track priority;

    @wire(getRecord, {
        recordId: this.recordId,
        fields: [CASE_SUBJECT, CASE_DESCRIPTION, CASE_PRIORITY],
        optionalFields: [ACCOUNT_NAME, CONTACT_NAME, CONTACT_PHONE]
    }) wireuser({
        error,
        data
    }) {
        if (error) {
           this.error = error ; 
        } else if (data) {
            this.subject = data.fields.Subject.value;
            this.description = data.fields.Description.value;
            this.priority = data.fields.Priority.value;
        }
    }

I have looked through many documents and comments, but haven't figured this out. any help is much appreciated.

Best Answer

The issue was a syntax error in my .js file where I had this.recordId instead of '$recordId'

Final code in .js file

    @api recordId;
    @track subject;
    @track description;
    @track priority;

    @wire(getRecord, {
        recordId: '$recordId',
        fields: [CASE_SUBJECT, CASE_DESCRIPTION, CASE_PRIORITY],
        optionalFields: [ACCOUNT_NAME, CONTACT_NAME, CONTACT_PHONE]
    }) wireuser({
        error,
        data
    }) {
        if (error) {
           this.error = error ; 
        } else if (data) {
            this.subject = data.fields.Subject.value;
            this.description = data.fields.Description.value;
            this.priority = data.fields.Priority.value;
        }
    }
Related Topic