Skip to main content
Solved

Import JSON file in code.ts

Antoine_Zurcher

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

Best answer by Antoine_Zurcher

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>
View original

8 replies

Emile_Paffard-Wray

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

Antoine_Zurcher

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.

Emile_Paffard-Wray

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.

c5inco
  • c5inco
  • 7 replies
  • April 23, 2021

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.

c5inco
  • c5inco
  • 7 replies
  • April 23, 2021

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

Antoine_Zurcher

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>
c5inco
1 person likes this
  • c5inco
    c5inco
jakefleming

I’m having some problems importing a json file into code.ts as well. I can’t upload images in this post so I’ll try to describe via code blocks.

this line in code.ts:
import data from "./json_data.json";

throws this error:
error: Syntax error on line 1: Unexpected token at pAr (figma_app.min.js.br:3025) at async figma_app.min.js.br:3022

tsconfig.json file looks like this:
{ "compilerOptions": { "resolveJsonModule": true, "esModuleInterop": true, "moduleResolution": "node", "jsx": "react", "target": "es6", "lib": ["es6"], "typeRoots": [ "./node_modules/@types", "./node_modules/@figma" ] } }

I’ve also tried some of the suggestions above like using renaming to json_data.js with export default at the top with no avail.

Vincent_Spallek1
Chris91
2 people like this
  • Vincent_Spallek1
    Vincent_Spallek1
  • Chris91
    Chris91
Chris91
  • Chris91
  • 1 reply
  • September 21, 2022

+1

Same problem here.

after reading @c5inco 's and @Antoine_Zurcher 's answer i was wondering: is it really needed to have an UI to be able to load an json file? i was not planning on having an UI so far… 😕

thank you a lot

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