Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Dev server fails unrecoverable, if LWC is rendered that recursively references itself

Open
#250 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
devtools

Research direction

Reproduce the failure with sf lightning dev app -t desktop using the recursive c-drag-drop-tree-branch example, and compare it with the normal renderer. Trace the generated tmpl error to the dev-server handling of self-referencing LWCs; done means the dev server renders the recursive tree successfully.

Written by the indexing model from the issue text.

Description

Summary

The dev server fails to render, if it tries to display an LWC that recursively references itself.

Sorry if the bug report is incomplete and misses relevant information. It's my first bug report. I am very happy to help investigation & debugging.

Steps To Reproduce:

A simple tree implementation

<!-- c-drag-drop-tree-branch -->
<template>
    <div class="draggable-card slds-var-m-vertical_small">
        <lightning-formatted-text value={nodeName}></lightning-formatted-text>
        <template if:true={hasChildren}>
            <template for:each={children} for:item="item">
                <div
                    key={item.id}
                    class="slds-var-m-left_medium slds-var-m-vertical_small"
                >
                    <c-drag-drop-tree-branch
                        data-id={item.id}
                        role="treebranch"
                        branch-data={item}
                        is-root="false"
                        draggable
                    ></c-drag-drop-tree-branch>
                </div>
            </template>
        </template>
    </div>
</template>
Expected Result

The dev-server renders the LWC correctly and shows the same result as the "normal" (?) renderer.

When the source is pushed LWC dev server is off, it renders the tree recursively

image
Actual Result

When dev server is launched (sf lightning dev app -t desktop), it throws this error

function tmpl($api, $cmp, $slotset, $ctx) {
      const {c: api_custom_element, k: api_key, h: api_element, i: api_iterator, f: api_flatten} = $api;
      return [api_element("div", stc0, api_flatten([api_custom_element("lightning-formatted-text", _lightningFormattedText__default.default, {
        props: {
          "value": $cmp.nodeName
        },
        key: 1
      }), $cmp.hasChildren ? api_iterator($cmp.children, function (item) {
        return api_element("div", {
          classMap: stc1,
          key: api_key(2, item.id)
        }, [api_custom_element("c-drag-drop-tree-branch", _cDragDropTreeBranch, {
          attrs: {
            "data-id": item.id
          },
          props: {
            "role": "treebranch",
            "branchData": item,
            "isRoot": "false",
            "draggable": true
          },
          key: 3
        })]);
      }) : stc2]))];
      /*LWC compiler v7.1.3*/
    } is not a valid component, or does not extends LightningElement from "lwc". You probably forgot to add the extend clause on the class declaration.
Additional Information

Screenshots:

Logs:

System Information

SF CLI:

@j-schreiber/sf-plugin 0.1.2
@tmh-bis-salesforce/tmh-bis-salesforce-cli-plugin 0.8.3
community 3.3.2 (3.3.2)
dev 2.5.0 (2.5.0)
lightning-dev 1.9.3
packaging 2.9.0
sfdmu 4.36.7
texei-sfdx-plugin 2.8.1

Uninstalled JIT Plugins:
custom-metadata 3.3.36
devops-center 1.2.25
env 3.0.33
functions 1.23.0
signups 2.5.23
@salesforce/sfdx-plugin-lwc-test 1.2.1
@salesforce/sfdx-scanner 4.7.0
Dominant language
TypeScript
Stars
19
Forks
19
Avg merge
3d 12h
Merged PRs (30d)
2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from salesforcecli/plugin-lightning-dev

All issues in salesforcecli/plugin-lightning-dev

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.