Starting development of plugin based upon ps-react-starter template

Photoshop UXP Plugin API
1

We explore writing plugins based upon ps-react_starter template. The plugin is created in the selected folder and could be added & loaded in the UXP Developer Tool. But 2 empty panels are shown in Photoshop. How can the panel contents be shown?

2

Hi, I have the same problem. Just tested to create a UXP plugin using the React starter using the UXP Developer Tool. Just two empty panels are loaded. It looks like “index.js” is missing in the plugins folder. This is how I tested creating the React UXP Photoshop plugin using the starter:

UDT > Create Plugin > ps-react-starter
do “npm install” (get “deprecated” warnings and 6 severe vulnerabilities)
UDT > More > Advanced > change manifest.json folder to “…/plugin”
Load plugin in Photoshop: two empty panels called “Demo Panel” and “Demo Panel 2” are shown.

UDP > open Debugger, shows this error:

Uncaught Error: Failed to load script file: index.js
Failed to invoke the stat. File Path: /Desktop/tmp react uxp/plugin/index.js
at l (uxp://uxp-internal/webfs_scripts.js:2)
at s (uxp://uxp-internal/webfs_scripts.js:2)
at e.exports.readFileSync (uxp://uxp-internal/webfs_scripts.js:2)
at Object.readFileSync (uxp://uxp-internal/webfs_scripts.js:2)
at Object.readFileUrlSync (uxp://uxp-internal/domjs_scripts.js:2)
at e.exports._insertRemoteScript (uxp://uxp-internal/domjs_scripts.js:2)
at e.exports._checkScriptNode (uxp://uxp-internal/domjs_scripts.js:2)
at e.exports.appendChild (uxp://uxp-internal/domjs_scripts.js:2)
at e.exports.appendChild (uxp://uxp-internal/domjs_scripts.js:2)
at e.exports.appendChild (uxp://uxp-internal/domjs_scripts.js:2)

So it looks like “index.js” file is missing in the plugin folder?

P.S.:versions:
Photoshop App Version 23.5.0
UXP Version 6.2.1

3

Did you check the README on what needs to be done?

4

Thank you for your reply @Karmalakas , yes I did. However I think this paragraph of the README is wrong:

If the plugin hasn’t already been added to your workspace in the UXP Developer Tools, you can add it by clicking “Add Plugin…” and selecting dist/manifest.json. DO NOT select the manifest.json file inside the plugin folder.

Not sure if I’m missing something obvious, but there is no “dist” folder. The only “manifest.json” file is located in the “plugin” folder. Do you know if the “dist” folder needs to be created manually?

5

Not sure if you’re reading the doc from the end, but I think you’re completely missing the Install dependancies and Build process parts

1 Like
6

OK now it’s working, thanks for your replies. I initially skipped the build process, I thought that was only needed for production.

Does this mean I need to do “npm run build” every time I want to apply code changes in Photoshop? is there any way to “watch” the changes in Photoshop without needing to run build? (as with “normal” React development, or as vanilla JS UXP plugin UDT “watch” works).

7

I think it says it pretty clear in the Build process section:

  • yarn watch or npm run watch will build a development version of the plugin, and recompile everytime you make a change to the source files. The result is placed in dist.

UDT also loads basically already built version. For prod you only might want to minify and/or obfuscate it, but it’s pretty much the same version you will use while developing. At least that’s what I do. It also minimises the risk of noticing too late if something’s not working.

1 Like
8

Great, thank you, I got the watch working now for development.

UDT also loads basically already built version. For prod you only might want to minify and/or obfuscate it, but it’s pretty much the same version you will use while developing.

I see “npm run build” doesn’t minify and obfuscate the code. Do you use Webpack for that?

9

I do. Something like this

1 Like
10

Great link, thanks again for your help.

11

This is the thread that I checked before I ended up making my own thread.

In my particular case, I followed the readme.md as exactly as I could. I ended up getting several vulnerability warnings when I ran npm install, which effectively makes this plugin a non-starter for me, until I can figure out why I am getting the errors when running npm install.

I attempted running npm run build in three cases, deleting everything and starting with a fresh new folder with the downloaded files each time:

  • The case where I did not run npm audit fix or npm audit fix --force
  • The case where I ran npm audit fix
  • The case where I ran npm audit fix --force

This is the error I get when attempting to build:

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

In all cases, build attempts failed, a dist folder never showed up, and I am thus unable to run the plugin. I am running MacOS 13.1 Ventura.