I get an error "cannot read property 'FormData' of undefined" when developing a plug-in for Figma using OpenAI API

Using “OpenAI”, I am developing a plug-in for Figma. However, the following error appears and OpenAI cannot be used. How can I resolve this?

TypeError: cannot read property ‘FormData’ of undefined

src/code.ts

import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: "API KEY",
});
const openai = new OpenAIApi(configuration);

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6"],
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ],
    "outDir": "./dist",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*.ts"]
}

package.json

{
  "name": "name",
  "version": "1.0.0",
  "description": "Your Figma Plugin",
  "main": "code.js",
  "scripts": {
    "build": "webpack",
    "watch": "npm run build -- --watch"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "@figma/plugin-typings": "^1.69.0",
    "openai": "^3.3.0",
    "ts-loader": "^9.4.4",
    "typescript": "^5.1.6",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4"
  }
}

That’s because you’re trying to access browser APIs in code.ts.

Move that code into your ui.ts and pass the response to code.ts via a postMessage and you’ll be golden.

Ran into this myself. code.ts only knows about the Figma API and nothing else.

thank you! It is solved!

1 Like