Need help getting started with TypeScript for Photoshop UXP

Photoshop UXP Plugin API
1

Hi everyone!

I’m new to UXP development and Javascript / Typescript in general. I’m looking for advice on how to set up my project to work with typescript.

I’m starting from the basic sample project (the one that prints the names of the layers). I followed this guide to get started.

I have node and npm working normally. I renamed my main file to main.ts and compiling using tsc main.ts --watch is working as expected.

My main issue seems to be coming from the Photoshop types module.

I installed types by running the command npm install --save-dev @types/photoshop

In my typescript file, I want to import ‘app’ by doing

import {app} from "photoshop";

Typescript doesn’t complain about this, but the following line is added to my .js file:

Object.defineProperty(exports, "__esModule", { value: true });

and the UXP console throws this error

uxp://uxp-internal/domjs_scripts.js:2 Uncaught ReferenceError: exports is not defined

for some context, my tsconfig has the follwing options:

"target": "ES6", 
"module": "commonjs", 
"typeRoots": [
      "node_modules/@types",
      "node_modules/uxp-types",
     ],
"esModuleInterop": true, 
"forceConsistentCasingInFileNames": true, 
"strict": true,
"skipLibCheck": true

I would greatly appreciate any guidance and am happy to provide more details :slightly_smiling_face:

TIA!

2

Hi! :wave: welcome to the forum!

:thinking: I thought we had an article about this, but it turns out we just have this code sample: uxp-photoshop-plugin-samples/typescript-webpack-sample at main · AdobeDocs/uxp-photoshop-plugin-samples · GitHub

Maybe @pklaschka can lend a hand?

3

Thank you @Erin_Finnegan ! Yes, I ended up using the Webpack sample as template and I was able to get things working.
I’m not sure if this is the right space for it, but there was an issue when packaging the web pack sample project. The source and output files in the web pack sample are inside the ‘src’ and ‘dist’ folders respectively. After digging around, I found that in order for the .ccx file to work I had to move those files out of the ‘src’ and ‘dist’ folders (essentially everything needs to be at the root level (?).

4

If you zip the contents of dist folder and change extention to ccx, it should work IIRC