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>