Production embroider build – empty Components tab

[gilest]

Describe the bug

When inspecting a production app built with embroider the Components tab is empty.

To Reproduce

Minimal reproduction repo here

• git clone [email protected]:gilest/embroider-component-inspector-repro.git
• yarn
• ember s -e production
• Open ember inspector, visit Components tab
• <Example /> component is visible ✅
• Kill server
• git checkout embroider
• yarn
• ember s -e production
• Open ember inspector, visit Components tab
• Components tab is empty ❌

Expected behavior

<Example /> component should be inspectable from the Components tab.

Screenshots

Branch: master

Branch: embroider

Environment

MacOS 12.5 Chrome 105.0.5195.52

Reproduced on latest ember-cli blueprint

ember-cli@~4.6.0 ember-source@~4.6.0

Additional context

May be related to #1745 (although that issue can maybe be closed now as the reported outright crash does not occur).

[NullVoxPopuli]

I confirm your reproduction steps behave as you say they do.

I think this may be something specific to your app/settings though.

I have an app running locally in production mode as well, and the inspector works:

So... this is good, we have an app that works and an app that doesn't, both with embroider -- so ... something is different between them.

[gilest]

Thanks @NullVoxPopuli

I did some tests and found that a single line from your ember-cli-build is required to enable the component inspector to work in my reproduction.

  app.import('vendor/ember/ember-template-compiler.js');

I've pushed this to the embroider-working branch of the reproduction repo.

[RobbieTheWagner]

@NullVoxPopuli is this something people should be adding in manually?

[gilest]

Adding that line to ember-cli-build does not resolve this issue in a few ember 3.28 apps I tried it in.

[NullVoxPopuli]

is this something people should be adding in manually?

it should not, adding the template-compiler like this is (imo) "intimate API" for run-time compiled components, which 99.999% of apps are not doing 🙃

[gilest]

@NullVoxPopuli do you have any insight about why that fixes the issue in 4.6 apps or, regardless, the best repo for this issue to reside within?

[bendemboski]

I am also seeing this in an app (private, unforch) running:

• embroider 1.8.0 with static: true
• ember-cli 4.7
• ember-source 4.4.2

[RobbieTheWagner]

@chancancode any ideas here?

[patricklx]

somehow _DEBUG_RENDER_TREE is false https://github.com/emberjs/ember-inspector/blob/main/ember_debug/libs/capture-render-tree.js#L10 although it should be set to true by ember-inspector: https://github.com/emberjs/ember-inspector/blob/main/skeletons/web-extension/boot.js#L13

[patricklx]

it probably is getting set. BUT: classic build extends the existing EmberENV :

window.EmberENV = function(e, t) {
    for (var r in t)
        e[r] = t[r]
    return e
}(window.EmberENV || {}, {
    FEATURES: {},
    EXTEND_PROTOTYPES: {
        Date: !1
    },
    _APPLICATION_TEMPLATE_WRAPPER: !1,
    _DEFAULT_ASYNC_OBSERVERS: !0,
    _JQUERY_INTEGRATION: !1,
    _TEMPLATE_ONLY_GLIMMER_COMPONENTS: !0
})

whereas embroid build overwrites:

window.EmberENV = {
   FEATURES: {},
   _APPLICATION_TEMPLATE_WRAPPER: !1,
   _DEFAULT_ASYNC_OBSERVERS: !0,
   _JQUERY_INTEGRATION: !1,
   _TEMPLATE_ONLY_GLIMMER_COMPONENTS: !0
};

manually setting _DEBUG_RENDER_TREE in environment.js EmberENV will make inspector work

[gilest]

Can confirm that setting EmberENV._DEBUG_RENDER_TREE = true this fixes the issue in the minimal reproduction app.

[patricklx]

@NullVoxPopuli in limber I see some duplicate modules in the source for "@ember/-internals/environment/index". One without glimmer DEBUG enabled and another with DEBUG disabled... the one with DEBUG enabled is processed and thus sets _DEBUG_RENDER_TREE to true

[NullVoxPopuli]

Hmm, duplicate modules is suspicious. Gonna look in to that

[patricklx]

ah, thats the ember-template-compiler... its build with debug enabled..

[NullVoxPopuli]

Ah, right. Then my issue (accidental working) will be fixed by the template layering RFC

[RobbieTheWagner]

Is there a good way to fix this in inspector? I don't know much about how embroider works.

[gilest]

@rwwagner90 Should be fixed once this PR is merged and released: embroider-build/embroider/pull/1252

This issue can probably be closed

[patricklx]

the pr is merged and this can be closed. Although it's not released yet