Skip to main content
Question

How to use the jszip in html?

  • March 17, 2024
  • 9 replies
  • 759 views
Nidhin_Kuttikkattu_Rajeevan

Hi I have a selected Figma node item’s as an array of image byte arrays in the ui. It is an html file. I have installed JSZIP via npm install jszip.
But when I try to refer jszip, it gives error.
I tried as below

Blockquote

<html>
<head>
  <title>Zip Images</title>
<script src="node_modules/jszip/dist/jszip.min.js"></script>
</head>
<body>
<script>
  function ui_f5_zipIt()
      {
        console.log(array_image_bytes)
        const zip = new JSZip(); ///THROW ERROR HERE

      }
</script>

Error is 
VM489:83 Uncaught ReferenceError: JSZip is not defined
    at ui_f5_zipIt (<anonymous>:83:21)
    at window.onmessage (<anonymous>:21:13)


Please note I am working in figma desktop

9 replies

jefflee
Figmate
  • jefflee
  • Figmate
  • 22 replies
  • March 19, 2024

You can’t directly use NPM modules in browser applications. This is true for any browser webapp, not just Figma plugins. You’ll need to use a bundler that combines NPM module source code with your code. See our guide to bundling here:

figma.com
Nidhin_Kuttikkattu_Rajeevan

I am already using Webpack

Nidhin_Kuttikkattu_Rajeevan

@tank666 ??

Nidhin_Kuttikkattu_Rajeevan

I am easily getting all the selections in Figma into converted image bytearray. I am using webpack based project. But when I try to initialze the jszip object, it gives compile error.

If it is not possible, can I send this Bytearray to a HTTP request? So that if another program is running in c# or java can access it locally? Basically I wish to save this image arrays to png images. Even if I am running Figma desktop, I think I am running the plugin in Figma server… Correct?

Nidhin_Kuttikkattu_Rajeevan

@Gleb could you please give a suggestion?

Luis_Abaladas

I am also trying to set jszip to a Figma plugin but unsuccessfully. I’m am running out of ideas on how to solve this and currently stuck.

I managed to select all images in the project and set the download (although only one is downloaded) — which is why I believe I need the jszip.

I suspect the problem might be in the tsconfig.json file.

jefflee
Figmate
  • jefflee
  • Figmate
  • 22 replies
  • March 21, 2024

It sounds like you’re trying to include JSZip inside the UI side of the plugin. You’ll want to make sure that you’re using HtmlWebpackPlugin to ensure that the NPM modules are being correctly bundled for the UI. Using a script tag that references node_modules won’t work.

Here’s an example of a Figma plugin that uses webpack and imports NPM dependencies (in this case, React) into the plugin UI code:

github.com
Nidhin_Kuttikkattu_Rajeevan

So are you suggesting if I use ui.tsx and try jszip inside that, it may work?

M

Hi @Nidhin_Kuttikkattu_Rajeevan, did you find a solution for this? I am facing same problem

Reply


Terms & ConditionsCookie settings

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