Report errors in the 'index.html':require is not defined

[mark134340]

I created the project, cloned the "bombino Vue router" template. NPM install and NPM run serve, and received the error: I tried this: but it didn't seem to work

[Inventsable]

Hi Mark, can you clarify a few things:

1) By "created the project, cloned the 'bombino Vue router template'," do you mean that you typed bombino into the terminal and selected the Vue-Router template, or something else? If you used git clone to the template or manually created the folder, neither would be necessary! Bombino is a CLI tool and will handle all this.

2) Does this happen for any other templates or is it only the Router one?

3) What OS are you using? Are you able to open a localhost to debug a panel, or were you affected by the recent document.registerElement is not a function bug that causes CEFClient to be needed for debugging?

I've just ran the template on my end and couldn't reproduce this, can you provide your repo?

[mark134340]

Hi Mark, can you clarify a few things:

1. By "created the project, cloned the 'bombino Vue router template'," do you mean that you typed bombino into the terminal and selected the Vue-Router template, or something else? If you used git clone to the template or manually created the folder, neither would be necessary! Bombino is a CLI tool and will handle all this.
2. Does this happen for any other templates or is it only the Router one?
3. What OS are you using? Are you able to open a localhost to debug a panel, or were you affected by the recent document.registerElement is not a function bug that causes CEFClient to be needed for debugging?

I've just ran the template on my end and couldn't reproduce this, can you provide your repo?

Thank you for your reply 1： I typed bombino into the terminal and Duplicated the Vue-Router template URL. 2：I've tried “bombino-quasar-plus”,received the same error. 3：I'm using Windows. Run npm run serve in the terminal at the project root,then in the index.html <script> window.require = require || cep_node.require; //this line of code reports an error "require is not defined" </script>

[Inventsable]

Are you launching localhost:8080 in a Chrome tab? I wasn't able to reproduce this until today when trying to do the same. If so, there's no need to use a Chrome window for displaying the panel unless you're trying to use a specific extension like Vue DevTools. The localhost in question is just for the index-dev.html's iframe src so the panel can have hot reloading -- at the point you run npm run serve, you just launch your host app and find your panel in Window > Extensions, then use the CEFClient provided on the Adobe CEP Resources repo (and the localhost port in your ./.debug file per host) to debug. Was this the issue?

[Inventsable]

Hey @mark134340 , going to close this unless further clarification is given because I assume the issue was opening in a Chrome browser.

As an aside, I've made all templates browser compatible out of the box (specifically the brutalism ones) with a note on the template readme about browser use.

[SteveLewisZA]

Hey there,

I seem to have run into this exact issue, I ran "bombino" command to create project with the "bombino-vue-router" template, ran "npm run serve" then opened "http://localhost:8080/" in the Chrome browser, it is showing as a blank page, and the console is showing the same error as the original poster ie: Uncaught ReferenceError: require is not defined

The extention appears in AE Window > Extensions, but clicking it does nothing

I've made no changes to the code from what wat initialized with the bombino command, my repo is: https://github.com/SteveLewisZA/modeck-ae

Guidance would be much appreciated! Steve

[Inventsable]

Hi @SteveLewisZA, the panels by default are setup so that you shouldn't run them in a Chrome window unless you follow the steps outlined in the Usage in Browser on the template readme.

The localhost:8080 is mostly for the Hot Module Replacement within an iframe of the panel in the index-dev.html file. I assumed most people would be coding within an Adobe app and not within a Chrome window since you don't have access to FS or scripting, so browser compatibility is opt-in

[Inventsable]

Just to clarify, these lines in the Vue config are what create that error:

https://github.com/SteveLewisZA/modeck-ae/blob/master/vue.config.js#L5-L6

If you comment them out then restart the server you should be able to code inside Chrome, but I feel coding inside Adobe itself feels better. Also of note is that you can either use the Panel parameters for theme, or import starlette and call starlette.initAs('AEFT', 'gradient', '0') to simulate the After Effects theme (third param is 0 - 100 darkest to lightest, but I believe is a string).

[Inventsable]

After git clone, npm install, and npm run serve I'm getting it on my machine:

[SteveLewisZA]

Oh I see, it still doesn't seem to be working for me in AE, commenting out those lines does make it appear in browser, and in AE it does appear in my Extentions menu, but clicking it does not open a panel and does not put a check next to it in the menu:

I have it install at \AppData\Roaming\Adobe\CEP\extensions\MoDeck-AE Wondering if that would cause any issue as the readme says: Recommended inside ../AppData/Roaming/CEP/extensions But when it's installed there it doesn't show up in AE at all

[Inventsable]

@SteveLewisZA Have you made any panels before? Is your computer set up to debug unsigned extensions? If not then any non-ZXP extension that doesn't have a valid certificate would not work for app security

[SteveLewisZA]

Ah I see, I've worked a lot with extendscript and Vue but I'm new to CEP, set up to debug unsigned extensions and it now works, thanks so much for the assistance!

[Inventsable]

No worries. Adobe doesn't really flag this to any one as being as important as it is so it's a common issue, just glad it turns out not being a problem with the templates.

Also notice that you're using a few Battleaxe tools over there, if you're interested you should check out Brutalism! Designed by Adam and built as a collaboration between us, as far as I know it's the only Adobe-specific design library out there and it makes panel dev with Vue a breeze.

Also also killer website you have, very impressive

[SteveLewisZA]

Thanks, this is awesome stuff I'll definitely be digging deeper, really glad to have found the work you guys are doing here as I'm already pretty deep into learning Vue to build out the web portion of a tool I'm working on, really great looking stuff and much appreciated!