io.js

HTML Panel Tips #19: CC2015.1 (CEP6.1) Node.js Fixes

Davide Barranca —  — 42 Comments

The latest release of Photoshop introduces, among the rest, a new version of the Common Extensibility Platform, CEP6.1. In turn, CEP6.1 is a major break in backward compatibility due to the way it manages Node.js. If you have an extension using Node.js, chances are that it’s now broken in Photoshop CC2015.1. Read along to know why, and how to fix it.

[UPDATE] With the release of Photoshop CC2015.1.2, the unified context has been brought back! Read the relevant section below to find out how to enable it.

Node.js is now io.js

Adobe has switched to the io.js branch. If you didn’t know, some Node maintainers forked the mainline and started working on io.js – this happened quite a while ago: in fact now the branches have merged back, and the versioning has changed too: Node is not anymore 0.12 or the like – we count like 5.1 (current version when I write this). Why did Adobe picked the older io.js is a question that yours truly cannot address.

Node.js is disabled by default

Due to security concerns, Node.js was by default enabled in CEP6.0 and prior versions – it’s now disabled, unless you add in the manifest.xml, in the <resources> tag the following:

Also, you need to explicitly enable Node in iframes too:

Node.js and Browser contexts are detached

[UPDATE] The unified context is back in the PS CC2015.1.2 update, but it’s disabled by default. In order to enable it, put this one in the manifest.xml:

What follows below still applies for previous version of Photoshop.


 

Due to the io.js move, Node.js and the Browser context don’t talk to each other anymore. This is a big pain in the ass, and, according to Adobe’s engineers, a unified context will be back in CEP7 (that should be released, if they keep the same pace, alongside with Photoshop CC2016, so many months from now).

What does the above mean? If you have a Node.js module and try to access jQuery $ object, or csInterface, or anything else defined in the Browser context (e.g. your main.js file), it will fail! So much fun.

Workaround: use the global window object as a bridge:

Chrome only for debugging

No way to use Safari anymore, only the Chrome Developer Tools.

That’s all folks

When/if I find something else pertinent to the CEP6.1 switch, I’ll update this post. If you do, please add in the comments below! Thanks.

Print Friendly
Share

42 responses to HTML Panel Tips #19: CC2015.1 (CEP6.1) Node.js Fixes

  1. Seriously, WTF Adobe…

    Is there any official announcement about this breaking change?

  2. Thank you for keeping up on this for everyone! Really appreciate it! Keep up the great work!

  3. Great Davide…
    Thanks for fast explanation.

  4. Thanks for the update, and for staying on top of all the crazy changes that Adobe puts out.

  5. Hi Davide,

    My app is written in AngularJS. I’m not using seperate files for my node.js code, it’s right inside my angularjs services.

    I’m getting the “Uncaught ReferenceError: require is not defined” error.

    Any hints on how to get things working again?

    • Hi Steven, is the manifest.xml updated with latest CEF params, and CSXS version is 6.0 in both places there?

    • Okay nevermind. Turns out you have to reboot the host app to make changes in the manifest. Restarting the extension itself wasn’t enough. The –enable-nodejs did the trick.

      Where did you find this information? Adobe is very silent about this

      • I have an angular app as well. Still no luck with adding the –enable-nodejs in the CEFParams. Do you build it in iojs or still node. I have my app building in 0.10.38. Any suggestions would be great!

      • Can you explicitly tell me what you did to get it working again? I added the “–enable-nodejs” parameter to my and I am still getting the require undefined error.

        Thanks,

        Alex

      • Forme, $window.require is breaking my build. What am i missing here?

      • FYI I had to change my “ExtensionManifest” version to “6.0” as well:

        +
        + Version=”6.0″>

    • Hi Steven,

      i’m also working on html illustrator plugins in angularJs and facing some issues while using angular like one of them is –

      1. Model do not update on change of (HTML Select) drop down.

      can you please help me out of this or is it working at your end.

  6. Can’t speak for the whole company, but the After Effects, Premiere Pro, and Prelude pre-release programs (and the developers in them) were notified of this change months ago.

    If you develop integration with / panels for Adobe products, ask the product teams to add you to their respective pre-release programs. Or apply here, ‘through the front door’: https://adobe.allegiancetech.com/cgi-bin/qwebcorporate.dll?idx=G23Q24

    I’d be happy to help anyone working on PPro/AE/Prelude panels who still has difficulties, after working through Davide’s helpful instructions, above.

    -bbb

    • Olav Martin Kvern December 5, 2015 at 11:16 PM

      Hi Bill,

      I’m on both the InDesign family and InDesign family SDK pre-release programs. There were no notifications of any change to CEP in either. In fact, I heard about it from Davide. I have not received any official notification from anyone at Adobe of this change.

      So…let’s just say some teams are better at letting their developers know about changes than others.

      For my extensions, adding –enable-nodejs to the manifest.xml file solves the problems. I’m helping others who have not been so lucky.

      Also, snooping around in the Adobe CC extensions, I note that the CC library extension’s index.html file features the following:


      window.nodeRequire = window.require

      Thanks,

      Ole

      • Olav Martin Kvern December 5, 2015 at 11:18 PM

        Colleagues,

        The two lines of HTML from the index.html file got munged. I’ll try that again:

        <!– rename require before loading requireJS, so we can access node modules –>
        window.nodeRequire = window.require

        Rather than trying to post them again, I urge you to just take a look at the file.

        Thanks,

        Ole

        • Thanks Ole, I had to change manually with their HTML safe counterparts (I will space them, otherwise I’m afraid WordPress will just parse them):
          & l t ;
          & g t ;
          The “require” thing is not new in CEP6.1, though, it’s been documented here for CEP5 and is for those who need to use RequireJS as well – which otherwise would conflict with the “require” in Node – or at least this is what I get it…

          • Olav Martin Kvern December 6, 2015 at 7:43 PM

            Hi Davide,

            Right, the Adobe code isn’t significant. I figured that out after I posted. I was just scanning through their CC extensions to try to see what had changed since previous versions, and jumped to a silly conclusion.

            Thanks,

            Ole

          • Fact is that CEP is so “delicate” that we’re always on the alert…

  7. So if you use node.js and Angular with ExtendScript for After Effects, should you also be applying these changes to your manifest.xml and app.js files? Thanks!

  8. You can only halfway use the Chrome Developer Tools now.

    When running an Adobe extension, the devtools scrolling ability is disabled/broken somehow. I put up more information about it here: https://github.com/Adobe-CEP/CEP-Resources/issues/35
    and as of now am still waiting for a response. Another user posted the same in another thread on the Github issues.

    If anyone knows a fix, I would love to hear it.

    • Workaround found here (apparently it’s an issue of CEF)

      • Yes, that was me that replied underneath him – the workaround isn’t working here.

        • The work-around definitely works. From CEP friend:

          I figured out a way, which is very counter-intuitive….

          What you need to do is:
          1. Open Chrome and connect to your extension’s debugging port, say localhost:8088
          2. Click the ‘three horizontal bars’ icon on the upper-right corner of Chrome, then More tools->Developer tools.
          3. Then in the console of the newly opened devtools panel, run:
          (function() {
          var styleElement = document.createElement("style");
          styleElement.type = "text/css";
          styleElement.textContent = "html /deep/ * { min-width: 0; min-height: 0; }";
          document.head.appendChild(styleElement);
          })();

          That’s it!

          The devtools panel in step 1 is the one for debugging your extension. The devtools panel opened in step 2 is the one for debugging the devtools panels opened in step 1. You run the code snippet in the second devtools panel to configure the first devtools panel…

          • Thanks for the detailed walkthrough Bruce!
            Do you happen to know how to let the (1st) devtools use Batarang (the devtools extension for debugging Angular)? In CEF it doesn’t show up, but in the (2nd) devtools it does – yet as you said, the 2nd is just for debugging the 1st one.

          • That would be why it was never working for me, Bruce – was never going to the More Tools > Developer Tools page. Didn’t even know about it!

            Thanks.

    • Hi!
      I have found an easier way to do that,
      I’m using the css injection workaround with a chrome extension (so I only have to do it once & forget about it!)
      – Install Styler – Chrome Web Store
      – Go to your debug page http://localhost:8001/
      – Click on Styler extension icon
      – Add “html /deep/ * { min-width: 0; min-height: 0; }”

      😉

  9. Thanks for this post Davide, and for the comments from Steven on the need to restart, and from Alex on the need to set the Manifest version. Together you ended several hours of confusion.

    No thanks to Adobe for quietly/silently introducing a backwardly incompatible change in a minor release which will break almost every existing HTML5 extension. Another in a seemingly endless stream of careless, and developer unfriendly moves from Adobe. Plainly they don’t care about developers other than as the fools who will continue to feed their marketplace, because there’s no realistic alternative in the professional design tools space.

  10. With the changes to the manifest, my extension which worked in CC 2014 and 2015 now only works in CC 2015.1

    Does this mean we have to release separate extensions for CC 2014/2015 and CC 2015.1? Because of the change of the CSXS version to 6.0?

  11. Hi,
    Adobe has released a cefclient executable here. It sounds promising, but I can’t make it work (if I paste there the URL that I usually point Chrome to, nothing shows – blank page).
    If you happen to be luckier, let me know!

  12. Hi,
    Thanks for the info. I have been spending hours trying to deal with the fact that __dirname / __filename are not working anymore with CEP 6.1(get reference error __dirname is underfined) all relative paths in the js file are relative to the Volumes folder.
    Relative paths in the manifest and html <script src=".. work correctly.
    $.filename in the jsx does not work even if I call an $.evalfile to an absolute path before calling the $.filename. The $.filename works only in the absolute path file but that is useless as I already know the path to that.
    In the meantime I have the script search 4 possible locations to try find itself.
    {HOME}/Library/Application Support/Adobe/CEP/extensions/{extensions-name}/js/main.js
    {HOME}/Library/Application Support/Adobe/CEP/extensions/{extensions-name}/{extensions-name}/js/main.js
    /Library/Application Support/Adobe/CEP/extensions/{extensions-name}/js/main.js
    /Library/Application Support/Adobe/CEP/extensions/{extensions-name}/{extensions-name}/js/main.js
    A real pain, and not very reliable (in case of multiple installations of different versions)

    Has anyone else come across this and come up with a solution?
    (Using ID 2015.2 on Mac)

    Regards

    Trevor

    • I had the same problem with __dirname, Trevor. Since the node and browser contexts are separate now, you can only access node variables (like __dirname) from inside node scripts, brought in with require().

      As a workaround, I just created a dirname.js file with this in it:
      module.exports.dirname = __dirname;

      Then in your code you can do this to get the value:
      var __dirname = require('./dirname.js');

      I hope that helps.

      • Hi James,

        This in not exactly working for me.
        I saved the dirname.js, I put it in a few locations, including the js folder that contains the main.js script but I keep on getting a message “Cannot find module ‘./dirname.js'” if I “hardwire” the dirname.js location i.e. “/Users/Trevor/Library/Application Support/Adobe/CEP/extensions/InDesign_Druckbogen_Vorschau/js/dirname.js” then var __dirname = require('./dirname.js').dirname; give’s me the correct path.

        I seem to have a problem referring to any relative paths from the main.js

        Any ideas?

        Trevor

      • Hi James,

        I figured out my problem with my relative paths so your method is working 100% now.

        Thanks

        Trevor

      • May I ask why you´re not using getSystemPath in order to get the extension´s root directory? It does return the same directory as __dirname without using nodejs, no?
        var csInterface = new CSInterface();
        csInterface.getSystemPath(SystemPath.EXTENSION);

        I hope this helps.
        Thomas

  13. Hi,

    Do you know if the latest CC 2015 13.6.1 update (http://blogs.adobe.com/aftereffects/2015/12/after-effects-cc-2015-13-6-1-bug-fix-update.html) has caused any further hiccups people should be looking out for?

    Thanks

  14. If I could hug you, I would. This saved so much hair pulling.

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> 

*
*