Hi all any pointers appreciated!

Have a parent LWC component A and a nested LWC component B. I am trying to set an @api decorated variable within the nested component B to then pass to an @wire server-side query.

At render I get an 'Error during LWC component connect phase: [mode is not defined]' error and Im not sure what Im doing wrong. Surely (lol) A has set the value of mode in nested component B prior to establishing the @wire service? Any pointers most appreciated!

In A html:

   <c-componentb title="ComponentA" **mode="object"** >

In nested componentb.js:

@api mode;
@wire (options,{ 'mode': **mode** }) optionsString({error,data}){ ... }

1 Answer 1


We need to add $ and wrap that variable in (') single quotes, { 'mode': mode } should be { 'mode': '$mode' }

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class Record extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId' })
  • BOOM! sincere thanks from a LWC noob :) May 26, 2021 at 1:40
  • One day I was also a noob in LWC, NodeJS, Python, Apex, ReactJS, PHP, etc. May 26, 2021 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.