search

bodymovin / bodymovin-extension

Bodymovin UI extension panel
MIT License
286 stars 874 forks source link

errors when running CEF client #129

Open Bjorninn1 opened 2 years ago

Bjorninn1 commented 2 years ago

I have followed the installation instructions and when I run npm run start-dev inside the main folder it actually runs on port 3000 to make it run on port 8092 I had to do: PORT=8092 npm run start-dev but when I open the CEF window with localhost:3000 or localhost:8092 (when running there) I get the errors "cep_node" is not defined and "required is not defined".

See screenshot from the console in inspect element inside CEF client.

Screenshot 2022-08-08 at 23 44 06

I realised the node version I had was 17 so I changed it to 12 and also tried with version 8.6.0 ( CEP 9 should use 8.6.0 according to https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_9.x/Documentation/CEP%209.0%20HTML%20Extension%20Cookbook.md )

After each change of node version I deleted the node_modules folder and followed the instructions from the beginning again, but the same errors appear.

I should use CEP 9 right?

I was able to build the project and see it inside AE and I could change names of menus for example and those changes came through.

But the debugging is still missing for me because of these errors. I wanted to let you know it's not working out of the box to follow the instructions and run the project in CEF client. Could you maybe help me out or point me into the right direction to fix this? Thanks.

Bjorninn1 commented 2 years ago

Is it possible to debug using UXP developer tools? I see that software asks for manifest.json file I didn't see in the bodymovin project.

I got this to work finally, I deleted the bodymovin project from AE before starting the installation process. Now the only error is about howler.js which is something that has to do with audio and not important.

Before deleting the extension before starting installing, I had other errors and I had the following situation which now is not of importance but leave it here below:

I was able to clear all the errors except for the Uncaught TypeError: Cannot read property 'getHostEnvironment' of undefined error. Any idea what may be causing that error and what it actually means? Does this have something to do with the connection between the server I run in terminal and AE?

After doing the fix below I did the following:

  1. Quit AE
  2. Ran npm run build
  3. Moved the new build folder over to /Library/Application Support/Adobe/CEP/extensions and renamed it the same as the project
  4. opened AE and the extension and the panel loads, but now nothing happens when I click the settings button or the path button
  5. Reloaded the CEF client and checked inspect element and the getHostEnvironment was still there.

Fix I did for the require is not defined error, the cep_node is not found error and the Unexpected token < error: Added this to the index.html file:

`<script data-main="%PUBLIC_URL%/js/loadFiles" src="%PUBLIC_URL%/js/require.js" type="application/json"

`

`<script src="%PUBLIC_URL%/js/howler.js" type="application/json"

`

Created a folder called js under the root of the project and put inside it these files (downloaded a, b, c and d online and created number e): a. howler.js, b. fs.js c. path.js d. require.js e. loadFiles.js

then I put this code in loadFiles.js window.__fs = require("fs"); window.__path = require("path"); window.cep_node.require(__dirname + "/server/main.js");