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
1{2 "name": "", 3 "id": "", 4 "api": "1.0.0",5 "main": "dist/code.js",6 "capabilities": [],7 "enableProposedApi": false,8 "editorType": [9 "figma"10 ],11 "networkAccess": {12 "allowedDomains": [13 "*"14 ],15 "reasoning": "Do what I want",16 "devAllowedDomains": ["http://localhost:6069"]17 },18 "documentAccess": "dynamic-page"19}2021
webpack.config.js
1const path = require('path');2const webpack = require('webpack');34module.exports = (env, argv) => ({5 mode: argv.mode === 'production' ? 'production' : 'development',67// This is necessary because Figma's 'eval' works differently than normal eval8 devtool: argv.mode === 'production' ? false : 'inline-source-map',9 entry: {10 code: './src/code.ts' // This is the entry point for our plugin code.11 },12 module: {13 rules: [14 // Converts TypeScript code to JavaScript15 {16 test: /\.tsx?$/,17 use: 'ts-loader',18 exclude: /node_modules/,19 },20 21 ],22 },23 // Webpack tries these extensions for you if you omit the extension like "import './file'"24 resolve: {25 extensions: ['.ts', '.js'],26 },27 output: {28 filename: '[name].js',29 path: path.resolve(__dirname, 'dist'),30 },31});32
tsconfig.json
1{2 "compilerOptions": {3 "target": "es6",4 "lib": ["es6"],5 "strict": true,6 "typeRoots": [7 "./node_modules/@types",8 "./node_modules/@figma"9 ],10 "outDir": "./dist",11 "allowJs": true,12 "moduleResolution": "node",13 "sourceMap": true14 },15 "include": ["src/**/*.ts"]16}17
src/code.jts
1import {S3} from '@aws-sdk/client-s3'23(async () => {4 const s3 = new S3()5 6 ... 7