Skip to main content
Question

Is it possible to import the AWS client SDK into a plugin?

  • April 11, 2024
  • 1 reply
  • 228 views

I’m trying to use @aws-sdk/client-s3 in my Figma Plugin to upload an exported page as a PNG, but I’m receiving a “Unexpected token .” in the console when running the plugin. I think this happens when trying to instantiate the S3 client.

I assumed because this package can be included in the browser, it would be possible to import this into my Figma plugin, but maybe my assumption is wrong.

Here’s my setup:

manifest.json

{
  "name": "<redacted>",
  "id": "<redacted>",
  "api": "1.0.0",
  "main": "dist/code.js",
  "capabilities": [],
  "enableProposedApi": false,
  "editorType": [
    "figma"
  ],
  "networkAccess": {
    "allowedDomains": [
      "*"
    ],
    "reasoning": "Do what I want",
    "devAllowedDomains": ["http://localhost:6069"]
  },
  "documentAccess": "dynamic-page"
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => ({
    mode: argv.mode === 'production' ? 'production' : 'development',

// This is necessary because Figma's 'eval' works differently than normal eval
    devtool: argv.mode === 'production' ? false : 'inline-source-map',
    entry: {
        code: './src/code.ts' // This is the entry point for our plugin code.
    },
    module: {
        rules: [
            // Converts TypeScript code to JavaScript
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            
        ],
    },
    // Webpack tries these extensions for you if you omit the extension like "import './file'"
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
});

tsconfig.json

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

src/code.jts

import {S3} from '@aws-sdk/client-s3'

(async () => {
  const s3 = new S3()
 
  ...<redacted>

1 reply

Luke Novak
  • New Member
  • 1 reply
  • March 17, 2025

+1

I know this thread is a year old but were you ever able to resolve this library? Other dependencies don’t seem to have this issue. Could use some guidance here from someone who has a little more experience building plugins.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings