Uncaught ReferenceError: Cannot access 'root' before initialization

[Jean-Zombie]

Hey there! After a fresh and unaltered install with bombino my bombino-vue-basic panel is not rendering. As suggested I am checking the CEF client in Chrome at localhost:8888. The module cep-spy is throwing Uncaught ReferenceError: Cannot access 'root' before initialization error. Am I doing something wrong?

[Inventsable]

Edit:

This issue should be fully resolved and is caused by a legacy version of cep-spy. The fix should be npm i cep-spy@latest.

The root problem for this wasn't found until recently and outlined here.

---

Hello, just tested a fresh install but couldn't reproduce this. This seems to be a common error with circular dependencies but since CEP-Spy has no dependencies I'm unsure if that's the case here.

Can you list some information about your machine like OS, host app and version? Are you up to date with bombino@1.3.0? Is this happening with every template, or only bombino-vue-basic?

Could you create a repo of this failing template and link me to it?

[Jean-Zombie]

Ah, sorry, sure. First my environment:

• macOs: 11.2
• InDesign 16.1 (2021)
• bombino@1.3.0

The only template I am able to get running is: bombino-vue-bare. bombino-vue-basicand bombino-vue-router fail with said error.

I am not sure if I understand correctly what a repo of the failing template would look like. Since I did not alter any code. Could you elaborate and I am happy to provide you ;-)

[vonnnassau]

I got the same error for all panels, except bombino-vue-bare (Absolute minimum). Was this solved or is it an user error?

with # npx bombino i create a new panel with a Bombino default for AfterEffects.

Only bombino-vue-bare (Absolute minimum) gives me a working panel in AE. Others keep on black. when commenting out target and node in vue.config.js they do work in Chrome.

After # npm run serve the ones with Brutalism in it give this warning:

Compiled with 2 warnings  
 warning  in ./src/main.js
"export 'Select' was not found in 'brutalism'
 warning  in ./src/main.js
"export 'Watcher' was not found in 'brutalism'

And except from bombino-vue-bare (Absolute minimum) I get the following error in Cepclient:

Uncaught ReferenceError: Cannot access 'root' before initialization
    at doubleCheckPathIntegrity (index.js?2e38:95)
    at eval (index.js?2e38:403)
    at Module../node_modules/cep-spy/index.js (chunk-vendors.js:83)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (index.js?ebe6:6)
    at Module../node_modules/cluecumber/index.js (chunk-vendors.js:95)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/lokney/components/Menus/Menus.vue?vue&type=script&lang=js&:26)

so:

bombino-brutalism-vuex (Vue-CLI, brutalism, router, vuex) // warning, cefclient error, black panel bombino-vue-vuetify (Vuetify, Router, Vuex) // black panel, cefclient error bombino-brutalism-basic (Vue-CLI, brutalism utility components) // warning, cefclient error, black panel bombino-brutalism-router (Vue-CLI, brutalism library, router) // warning, black panel, cefclient error bombino-vue-basic (Include utility components)// black, cefclient error bombino-vue-bare (Absolute minimum) // WORKS :) bombino-vue-router (Basic and Vue Router)// black panel, cefclient error

Using AEFT 17.7, OSX 10.15.7, not my first CEP panel, but first attempt to get Bombino to work.

Am I missing something obvious here?

[Inventsable]

Hello @vonnnassau, I've never been able to recreate this issue from my end. The brutalism package has undergone a lot of updates since the creation of those templates though, so you may need to run npm i brutalism@latest on the root of the template after creation to ensure the library is up to date and is not missing components.

Uncaught ReferenceError: Cannot access 'root' before initialization

As far as I'm aware this is an issue dealing with circular dependencies, but CEP-Spy has no dependencies at all, so I've never been sure why this would error out. It seems there must be something in common between you and the initial user, whether environment or method, that causes this -- I have both OSX and Win users running bombino without this problem.

Just to verify, you're not running the panel from within a Chrome window, correct? You're running npm run serve at the root, then relaunching your host app to develop the panel inside a viewport of this app, and you're using CEFClient at the debug port then seeing this issue there?

[Inventsable]

Can you try using a global install instead of npx?

npm i -g bombino

Then at your source destination (like the userData CEP folder):

bombino

[vonnnassau]

Hello Tom, solved! I tried the global install before, without succes. But running

npm i brutalism@latest

after the creation fixed it for me. I just build successfully bombino-brutalism-vuex. I assumed Bombino was downloading latest updates already. Many thanks, very excited to use your framework.

[Jean-Zombie]

OP here,

a global install seems to fix my original error message as well but I am still seeing a black panel only.

I am confused about what would be rendered per default for the bombino-vue-router template f.e.. Looking a the source I was expecting to see at least a menu with "Home" and "About" links, right? Inspecting the rendered source in Chrome shows an empty "app" tag. For testing I simply added some html content to "index.html" and that gets rendered in my host app flawlessly. So even though I see no errors anymore the vue app does not seem to get initialized.

I‘d be thankful for any more hints cos I feel I am soo close ;-)

[vonnnassau]

Hi Jean-Zombie, I can reproduce a black panel for bombino-vue-router this way:

after creation and cd <name> npm run serve I get a DONE Compiled successfully

But I open AEFT, file > extension and the panel is black and Cefclient throws the initial error Uncaught ReferenceError: Cannot access 'root' before initialization

Solution:

after creation cd <name> npm i brutalism@latest npm run serve

reopen app and the panel opens with Vue-logo, Home | About and welcome.

edit: cefclient, not cepclient

[Jean-Zombie]

hey vonnassau,

npm i brutalism@latest indeed did it! Since I had no error anymore I did not think about trying that one but yeah… thx! Closing as solved.

[Inventsable]

Thanks guys! I'll go through all the templates and push commits to have brutalism updated. Good work!

[kartik1225]

I was also having the same error and npm I brutalism@latest this solved the issue

[vonnnassau]

Hi, this issue is back for me. All panels stay black, except the bombino-vue-bare (Absolute minimum) These black panels throw the same Uncaught ReferenceError: Cannot access 'root' before initialization as mentioned earlier.

using: npm i -g bombino
bombino

or: npx bombino

the previous mentioned solution i brutalism@latest does not solve now, tells me it's up to date. But still 36 vulnerabilities (24 moderate, 12 high)

[Inventsable]

Sorry for the delay, the issue is that panels are installing cep-spy@1.2.3 instead of obeying @latest in panel's package.json which should result in v1.3.4. Running npm i cep-spy@latest or npm i cep-spy@1.3.4 should solve this.

This is probably because one of the main dependencies has a hard-coded version of cep-spy in it's package.json, I'll have to comb through each one and double-check.

For vulnerabilities this is mostly because each template is a static build from Vue-CLI at a given date, ideally you'd want to trigger Vue-CLI directly to generate the app at the start then inject necessary files like manifest.xml and other placeholder files. Unfortunately the templates are outdated and I'll need to regenerate them seeing as npm audit fix only resolves 3/36 total, I can do this soon. Migration would essentially be downloading a new template, then copy/pasting your own CSXS and ./src folders into it.

[Inventsable]

The issue is probably cluecumber@0.0.8 which has cep-spy@^1.1.2 as a dependency. Since the templates always download cluecumber@latest any new templates should have 0.1.0 which has cep-spy@latest and should resolve this.

[vonnnassau]

Thank you again, cep-spy@latest worked for the brutalism templates which I just tested. Is there a way I can figure this out myself next time?

[Inventsable]

In my case the process was:

1. Google "cannot access before initialization" to double-check I understand exactly what the error means, which led me to the MDN page outlining how accessing a variable defined by let prior to the let ____ assignment itself throws this error.
2. The error stack begins with at doubleCheckPathIntegrity (index.js?2e38:95), and clicking on the index.js link took me straight to the line in question, which I'm embarrassed to reveal was a copy/paste error where the code was:

let root = 
    root && root.length 
        ? ...
        : ...

And the problem became obvious to me because I was assigning a value to a variable while simultaneously calling for it's value, and while that code is fine if root had been declared on any other line (even if let root; root =) it was clear that this was the "root" of the issue.

3. I went into the panel's node_modules/cep-spy/index.js, rewrote that section and saved then saw the error clear due to the Hot Module Replacement when everything refreshed. So I verified this was the issue.
4. I immediately checked the package.json of the panel, noticed that cep-spy was set to latest, then cross-referenced the published version on NPM (1.3.4) with the node_modules/cep-spy/package.json version which was 1.1.2. So it became further clear that the issue is due to an outdated dependency call somewhere within the panel's own dependencies (in this case, cluecumber).

I've been spending the last few months in pretty complex and equally frustrating debugging so it just struck me immediately when I saw this. It's not easy to do with someone else's code admittedly, but I do think that every time you hit an error as obstacle then are able to overcome it and find a resolution you get a little bit faster and a bit wiser for it.

[Inventsable]

Hi all,

I've transferred this issue here because it isn't specific to the template where the issue was published and is largely caused by cep-spy which is one of the core dependencies of bombino. Presumably any one who comes across this problem will be able to much more easily find it here than in it's original location.

I am going to go ahead and close this for now under the assumption all templates are fixed. If you can replicate this in any way after today's date, feel free to re-open it and notify me.