Marked(markdown parser and compiler) not work in figma sandbox

my code

install marked

npm install marked @types/marked
// This plugin will open a window to prompt the user to enter a number, and
// it will then create that many rectangles on the screen.

// This file holds the main code for the plugins. It has access to the *document*.
// You can access browser APIs in the <script> tag inside "ui.html" which has a
// full browser environment (see documentation).
import { marked } from 'marked';

const html = marked.parse('# Marked in Node.js\n\nRendered by **marked**.');
console.log(html);

// This shows the HTML page in "ui.html".
figma.showUI(__html__);

// Calls to "parent.postMessage" from within the HTML page will trigger this
// callback. The callback will be passed the "pluginMessage" property of the
// posted message.
figma.ui.onmessage = msg => {
  // One way of distinguishing between different types of messages sent from
  // your HTML page is to use an object with a "type" property like this.
  if (msg.type === 'create-rectangles') {
    const nodes: SceneNode[] = [];
    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }
    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }

  // Make sure to close the plugin when you're done. Otherwise the plugin will
  // keep running, which shows the cancel button at the bottom of the screen.
  figma.closePlugin();
};

got error

how to fix the error?

what is the reason for the error ?

{
  "name": "test2",
  "version": "1.0.0",
  "description": "Your Figma Plugin",
  "main": "code.js",
  "scripts": {
    "build": "tsc -p tsconfig.json",
    "watch": "npm run build -- --watch"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "@figma/plugin-typings": "*",
    "typescript": "*"
  },
  "dependencies": {
    "@types/marked": "^4.3.0",
    "marked": "^5.0.2"
  }
}

my tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6"],
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ]
  }
}

only tsc used

{
  "name": "test2",
  "id": "1235966160601492466",
  "api": "1.0.0",
  "main": "code.js",
  "capabilities": [],
  "enableProposedApi": false,
  "editorType": [
    "figma"
  ],
  "ui": "ui.html"
}

I want to use marked on the plugin backend, not the plugin ui

The default TS compiler can’t bundle libraries into a single file unfortunately, so you can’t use it when you need to use any libraries/frameworks in your code. You’ll need to use Webpack, Esbuild, Rollup or other bundlers to do this.

change to use Esbuild

{
  "name": "test2",
  "version": "1.0.0",
  "description": "Your Figma Plugin",
  "main": "code.js",
  "scripts": {
    "build": "esbuild code.ts --bundle --outfile=code.js",
    "watch": "npm run build -- --watch"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "@figma/plugin-typings": "*",
    "typescript": "*"
  },
  "dependencies": {
    "@types/marked": "^4.3.0",
    "esbuild": "0.17.19",
    "marked": "^5.0.2"
  }
}

run npm run build

got error

fixed.

correct :white_check_mark:

esbuild code.ts --bundle --target=es6 --outfile=code.js

wrong :x:

esbuild code.ts --bundle --outfile=code.js

refer to
https://esbuild.github.io/api/#target

esbuild default target is esnext

refer to esbuild - Content Types

Syntax transform Spread properties transformed when --target is es2018

Figma plugin backend (sandbox) only supports es6(es2015)

so we need change esbuild target to es6

1 Like