# Tracked variable not found?

**URL:** https://meta.discourse.org/t/tracked-variable-not-found/370793
**Category:** Development
**Created:** [June 19, 2025, 5:06am UTC](https://meta.discourse.org/t/tracked-variable-not-found/370793 "2025-06-19T05:06:56Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 19, 2025, 5:06am UTC](https://meta.discourse.org/t/tracked-variable-not-found/370793/1 "2025-06-19T05:06:56Z")

</div>

This is my code:

```js
import { apiInitializer } from "discourse/lib/api";
import { iconNode } from "discourse-common/lib/icon-library";
import { tracked } from "@glimmer/tracking";

export default apiInitializer((api) => {
  @tracked iconName = settings.category_lock_icon || 'lock'; // Fallback to 'lock' if setting is not defined
  @tracked lockIcon = iconNode(this.iconName);

```

Frustratingly, the browser console tells me that `ReferenceError: iconName is not defined`. Looking at the file in the browser dev tools, this is what it looks like:

```js
iconName = settings.category_lock_icon || 'lock'; // Fallback to 'lock' if setting is not defined
lockIcon = (0, _iconLibrary.iconNode)((void 0).iconName);

```

This, compared to another component I made that uses tracked variables (which works):

```js
#buttonIcon = (() => (dt7948.i(this, "buttonIcon"), void 0))();

```

, where the original code is

```js
@tracked buttonIcon = localStorage.getItem('buttonIcon') != null ? localStorage.getItem('buttonIcon') : "bug";

```

Am I doing something wrong?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [June 19, 2025, 6:02am UTC](https://meta.discourse.org/t/tracked-variable-not-found/370793/2 "2025-06-19T06:02:42Z")

</div>

You don’t need to track these. They will be constant so unnecessary. You only need to track things that will be dynamic and with which you want to re-fire getters.

Use DIcon instead. eg `{{icon this.myIcon}}`

eg:

> <https://github.com/merefield/discourse-chatbot/blob/8a06667fe5b9cf6db7ac9c52cc5fa1bf2c845948/assets/javascripts/discourse/components/chatbot-launch.gjs#L9>

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 19, 2025, 6:09am UTC](https://meta.discourse.org/t/tracked-variable-not-found/370793/3 "2025-06-19T06:09:40Z")

</div>

I see. Thanks for the help; I’ll try it out.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [June 19, 2025, 6:12am UTC](https://meta.discourse.org/t/tracked-variable-not-found/370793/4 "2025-06-19T06:12:47Z")

</div>

Every time you track you use resources so keep that to minimum. It’s no big deal but good practice not to track if something won’t change during a page visit.

I don’t believe settings will be updated without a page refresh in any case.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 19, 2025, 6:21am UTC](https://meta.discourse.org/t/tracked-variable-not-found/370793/5 "2025-06-19T06:21:34Z")

</div>

Thanks for the advice! I’ll keep that in mind.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 20, 2025, 1:21am UTC](https://meta.discourse.org/t/tracked-variable-not-found/370793/6 "2025-06-20T01:21:22Z")

</div>

~~Hi @merefield , I can't seem how to get past this function:

```js
function ifProtected() {
  if(category.read_restricted) {
    return this.lockIcon;
  }
}

```

 ~~

Any advice on how I would return this? Since this is in a .gjs file, is it possible to return

```gjs
return <template>{{icon this.iconName}}</template>

```

~~?  
 ~~

* * *

EDIT:  
I’ve changed them to:

```gjs
const iconName = settings.category_lock_icon || 'lock'; // Fallback to 'lock' if setting is not defined
const lockIcon = <template>{{icon this.iconName}}</template>

```

Thanks for the nudge in the correct direction!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [July 20, 2025, 1:22am UTC](https://meta.discourse.org/t/tracked-variable-not-found/370793/7 "2025-07-20T01:22:04Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.