My React is having some problems finding swc-react dependencies

Photoshop UXP Plugin API
1

I correctly installed the component via Yarn. However, it sends me warnings finding errors when searching for certain files, I’ll put them below.

ERROR in ./node_modules/@spectrum-web-components/picker/node_modules/@spectrum-web-components/overlay/sp-overlay.dev.js 2:0-84
Module not found: Error: Package path ./src/define-element.js is not exported from package C:\.......\node_modules\@spectrum-web-components\base (see exports field in C:\.....\node_modules\@spectrum-web-components\base\package.json)

And many others of this kind, like:
userFocusableSelector
fisrtFocusableSlottedIn

My question is: Could I have installed the wrong packages? Or do I have to install some more dependencies to be able to use them correctly?

It appears to be functions that are not present in the library, but should

2

I would suggest that you read this first, taking note of the supported components (sp-overlay is not one of them).
Once you’ve digested that I’d take a good look at the React SWC Starter. Personally, I found the starter readme to be the most helpful.

You can also check out this thread for more detail.

1 Like
3

I had to go back a few steps and start all over again. These articles helped me a lot, thanks!

1 Like
4

Yeah; it took me about a day and a half to cross reference the docs and the starter project and work it out; it’s not an easy workflow to document!
Let us know how you get on with it - happy to help

1 Like
5

I admit that not having as much experience with javascript and React makes things a little difficult.

But in this case I had to go back a few steps and stop using " import { Components } " and start using " " seem simpler. I still don’t quite understand the logic of " import { Components } ".

More precisely when importing via @swc-react or @spectrum-web-components.

But I thank the community, you and this forum that has helped me with all the issues.

6

Did you manage to get things working?

I’ll be honest, I understand import/export syntax and I still found implementing React Spectrum Components an uphill struggle!

7

Everything working perfectly now. I ended up using it in a simpler way. with the swc-react-starter work without import/export for some reason.

Here is my code (Without using import/export in the component):

<sp-picker>
    <sp-menu-item onClick={() => handleHeaderSelect('SB')}>SB</sp-menu-item>
    <sp-menu-item onClick={() => handleHeaderSelect('CON')}>CON</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item onClick={() => handleHeaderSelect('Alienware')}>Alienware</sp-menu-item>
    <sp-menu-item onClick={() => handleHeaderSelect('Gaming')}>Gaming</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item onClick={() => handleHeaderSelect('Outlet')}>Outlet</sp-menu-item>
    <sp-menu-item onClick={() => handleHeaderSelect('Experts')}>Experts</sp-menu-item>
</sp-picker>
8

UXP has a handful of built-in Spectrum components which are based on, but not the same as Spectrum Web Components.
The Kitchen Sink starter demos them.

9

Yes… I expected those helpful information in the documentation instead of a starter readme.md file. It is kind of hidden there.

1 Like
10

I’ve half-heartedly been drafting a guide, we’ll see if I can be motivated to finish it!