Figma Support Forum

Import JSON file in code.ts

Hi,

I am trying to import a JSON file to my code.ts file but it does not work. I am trying to load the JSON this way:

const data = require("C:/Users/Administrateur/Downloads/example_1.json");

Where example_1.json looks like:
{
“fruit”: “Apple”,
“size”: “Large”,
“color”: “Red”
}

But I get the following error in the console of Figma:

ReferenceError: exports is not defined
at Proxy.eval (/file/YHp4UvwlZfU65BKOOnMnDV/PLUGIN_73_SOURCE:40)
at Object.eval (eval at createScopedEvaluatorFactory (blob:https://www.figma.com/f61f62e1-6843-4c14-9beb-bc45dca43550:1), :8:16)
at blob:https://www.figma.com/f61f62e1-6843-4c14-9beb-bc45dca43550:9
at blob:https://www.figma.com/f61f62e1-6843-4c14-9beb-bc45dca43550:9
at realmEvaluate (blob:https://www.figma.com/f61f62e1-6843-4c14-9beb-bc45dca43550:9)
at eval (eval at createCallAndWrapError (blob:https://www.figma.com/f61f62e1-6843-4c14-9beb-bc45dca43550:1), :1:615)
at Realm.evaluate (blob:https://www.figma.com/f61f62e1-6843-4c14-9beb-bc45dca43550:1)
at t.RealmsVm.evalCode (figma_app.7c9d3b9597f11149fb4ceeea484c16e1.min.js.br:613)
at t.RealmsVm.evalTopLevelCode (figma_app.7c9d3b9597f11149fb4ceeea484c16e1.min.js.br:613)
at figma_app.7c9d3b9597f11149fb4ceeea484c16e1.min.js.br:1157

I tried many possible ways to import a JSON file (as described here: https://mariusschulz.com/blog/importing-json-modules-in-typescript) but it does not seem to work.

How can I import my JSON file ?

Thanks

It says in the tutorial you referenced:

Let’s assume we have a Node application written in TypeScript

This assumption is false when developing a Figma plugin as it runs in a browser-like environment. (I’m not sure how many different setups are possible for TypeScript compilation so it might be that require can still be made to work for the plugin, but it’s not how you would normally do it AFAIK).

I think instead you will want to have code that uses ECMAScript modules like so:
import data from "/pathname/file.json"

and this option in your TypeScript config: "resolveJsonModule": true

(You probably want to put your JSON file in the same directory where you are writing your code too btw rather than getting it from the local Downloads folder).

Hope that works

Unfortunately, it still does not work after trying everything you recommended. Would there be another way than JSON to import local data into my plugin code ?

PS: the data I am trying to import is from a pandas dataframe in Python.

One hack you can try is to turn the JSON file into a JavaScript file by adding export default at the top of the file and renaming it to be a JS file. Then you can just do import data from "./data" where you’ve renamed your “data.json” to “data.js”.

You can definitely import JSON so I suspect the issue is with your TypeScript config or other config, if you post the error messages here I can have a look but otherwise the above approach should work.

Not sure this helps, but I think you can use webpack in some way to have multiple files but ultimately the plugin only uses one bundled file through ui.html: Bundling with Webpack · Figma Developers.

And I think webpack has loaders for JSON.

I think you may also have to include the JSON or JS file in a script tag in ui.html so that code.ts can see it in the Figma sandbox. I get that notion from looking at this basic Figma UI library: GitHub - thomas-lowry/figma-plugin-ds: A small lightweight design system for use in Figma Plugins

Thanks for your reply. I actually got it working by using this in ui.html:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('get_the_file').click()">Choose file</button>
<input type='file' id="get_the_file" style="display:none">

<script>
document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var json_data = JSON.parse(content); // Array of Objects.
    parent.postMessage({ pluginMessage: { type: 'send-data', json_data } }, '*')
  };
  fileread.readAsText(file_to_read);
});
</script>