Error on <sp-button/> in React app

Photoshop UXP Plugin API
, , , ,
1

All tags I tried (<sp-action-button/>, <sp-picker/>, <sp-detail/>, etc…) seem to work fine, but not <sp-button/>. As soon as I add it, on panel load I get this

{
  _message: "Plugin is not permitted to launch external applications. Valid manifest entry is required.",
  _name: "Security Error",
  stack: "Security Error: Plugin is not permitted to launch … G (uxp://uxp-internal/domjs_scripts.js:2:112600)"
}

Any ideas?
What manifest entry is missing? One of permissions? Where do I find that list of available permissions?

API v2, manifest v5, Ps 23.0.0, Win10

1 Like
2

That looks like a bug… what React code are you using for sp-button?

3

Not sure I understand what you mean :thinking: I just try to add <sp-button>Some label</sp-button> or <sp-button><span>label</span></sp-button>, but always same error

4

@kerrishotts , now tried to add a link and I get exact same message. Neither <a/> nor <sp-link/> works. What I might be doing wrong?

{
    "_message": "Plugin is not permitted to launch external applications. Valid manifest entry is required.",
    "_name": "Security Error"
    "stack": "Security Error: Plugin is not permitted to launch external applications. Valid manifest entry is required.
    at new <anonymous> (uxp://uxp-internal/platformjs_scripts.js:1:4114)
    at Object.<anonymous> (uxp://uxp-internal/platformjs_scripts.js:1:4040)
    at r (uxp://uxp-internal/platformjs_scripts.js:1:129)
    at e.exports.<anonymous> (uxp://uxp-internal/platformjs_scripts.js:1:3550)
    at Object.<anonymous> (uxp://uxp-internal/domjs_scripts.js:2:659391)
    at n (uxp://uxp-internal/domjs_scripts.js:2:129)
    at Object.ClassTypeFn (uxp://uxp-internal/domjs_scripts.js:2:655364)
    at s (uxp://uxp-internal/domjs_scripts.js:2:45565)
    at Object.getClassByElementName (uxp://uxp-internal/domjs_scripts.js:2:46034)
    at G (uxp://uxp-internal/domjs_scripts.js:2:112600)"
}
5

Tried to add <sp-button/> again, but now inside a dialog. Got this :frowning:

image
image987×1093 33.8 KB

Didn’t notice issues with <sp-action-button/> or other spectrum tags apart mentioned in this topic

6

So I took part of manifest from Alchemist and added this to mine:

  "requiredPermissions": {
    "launchProcess": "request"
  },

<sp-button/> now works like a charm. Also <sp-link/> is now fine, but it shows a dialog requesting permissions. What the value should be instead of request for link to open without that dialog popping up?

That’s exactly what I was talking about during meetup when mentioned missing docs and constantly just guessing how one thing or the other should be done :frowning:
cc: @heewoo

Until there’s a better solution, marking this as one, even if I get this on a link click:

image
image1051×229 29.8 KB

7

Hi @Karmalakas, you shouldn’t be needing to include that in the manifest to have anchors or buttons show up. I’ll log a bug against UXP, but is there a chance you can provide us with a small plugin that reproduces this issue?

8

Adobe’s React starter plugin
Change manifest version to 5 and it won’t work. You need

  "requiredPermissions": {
    "launchProcess": "request",
    "allowCodeGenerationFromStrings": true
  },

Without allowCodeGenerationFromStrings you get one error and after adding it you get the <sp-button/> error until you add launchProcess

9

I don’t think that with this you can publish in Marketplace.

10

Without this, panel also doesn’t load with manifest v5. Even React Starter plugin from Adobe.
If I change manifest to v4, I get different error still (can’t check exactly what it is - not at my PC now)

11

I’ll note that at the moment you can’t submit Manifest V5 plugins to the marketplace anyway. That support is coming soon. That’s why there’s not a lot of docs on this.

allowCodeGeneration from strings shouldn’t be required to use any sp-button at all; I’ll have to take a look at this. If so, it’s a bug, and we’ll get it fixed.

Requiring launchProcess is also a bug, and we’ll address that soon.

1 Like
12

If I change to v4, panel wouldn’t load and I get:

Exception while invoking panel method on Plugin Id: com.[...].dev, Panel Id: Panel1, Entrypoint: create, TypeError: attachment.appendChild is not a function
    at e.exports.show (PanelController.tsx?9754:41)
    at Object._runPanelEntryoint (uxp://uxp-internal/pluginmanager_scripts.js:1)
    at Object._dispatchPanelEvent (uxp://uxp-internal/pluginmanager_scripts.js:1)
    at Object._executeMessage (uxp://uxp-internal/pluginmanager_scripts.js:1)
    at Object.didFinishLoading (uxp://uxp-internal/pluginmanager_scripts.js:1)
    at Object.loadMainFile (uxp://uxp-internal/pluginmanager_scripts.js:1)
    at Object.loadDefaultMainFile (uxp://uxp-internal/pluginmanager_scripts.js:1)
    at bootstrap (uxp://uxp-internal/pluginmanager_scripts.js:1)

Related script

        create() {
            root = document.createElement('div')
            root.className = 'root'

            ReactDOM.render(component, root);
            core.suppressResizeGripper({"type": "panel", "target": id, "value": true});

            return root
        },

        show(node: HTMLElement) {
            if (!root) {
                controller.create()
            }

            if (!attachment) {
                attachment = node;
                attachment.appendChild(root)
            }
        },

Even if I remove requiredPermissions, I get exact same error.
Then if I change API version to 1, I get same error plus

Plugin is using a deprecated apiVersion of 1. Please update the plugin to apiVersion 2

If I leave manifest v5 and bundle the dist version, allowCodeGenerationFromStrings is not needed and plugin works as expected, so this is required only for development. launchProcess is still needed though - dist version won’t load without it

13

So to fix this I had to check if appendChild() is available:

                attachment = node;

                if (typeof(attachment.appendChild) === 'function') {
                    attachment.appendChild(root)
                } else {
                    attachment.target.appendChild(root)
                }