Skip to main content
Solved

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


jk2K
  • New Participant
  • 14 replies

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 ?

Best answer by jk2K

fixed.

correct ✅

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

wrong ❌

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

View original

6 replies

Gleb
  • Power Member
  • 4706 replies
  • May 14, 2023

jk2K
  • Author
  • New Participant
  • 14 replies
  • May 14, 2023
{
  "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"
}

jk2K
  • Author
  • New Participant
  • 14 replies
  • May 14, 2023

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


Gleb
  • Power Member
  • 4706 replies
  • May 14, 2023

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.


jk2K
  • Author
  • New Participant
  • 14 replies
  • May 17, 2023

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


jk2K
  • Author
  • New Participant
  • 14 replies
  • Answer
  • May 17, 2023

fixed.

correct ✅

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

wrong ❌

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


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