How Do I Distribute a Text File With My Plugin and Read From It?

Hi,

this is my first Node.js/Typescript/Javascript project and everything is going fine, but I am not managing to add a file data.txt to my plugin and read from it in code.ts (data.txt contains some vector path data strings line by line).

The issue is (using npm run build -- --watch as my watch script) that I cannot import or require anything, as that’s either an Unexpected token import`` or a ReferenceError: 'require' is not defined.

Installing webpack and using webpack --watch as my watch script has solved this issue, but still, fs.readFileSync is TypeError: not a function.

Some more research has given me the impression that I am not to read from a local file using a client side javascript-script (I am sure I did not express this correctly), but how am I to bundle some data with my Figma plugin?

While this surely is a pure Javascript-Question, all my research has led to nowhere since I have difficulties transferring the context of the solutions I come across to the Figma plugin context, which is why I am asking in this forum.

Thank you very much for your help!

Thanks for a very detailed explanation of the issue you are having! Congrats: you are on a right path. Indeed, you need to bundle everything into a single file. Check out examples here using different bundling tools: Libraries and bundling | Plugin API (I personally prefer esbuild to webpack). Also I’m not sure if the config from these examples includes the ability to bundle txt files but if it doesn’t, google for something like “webpack import txt as string” or something along those lines.

1 Like

Thank you very much for the swift reply, this was very helpful!

Best wishes!

Hi @Ruben9 the linked bundling documentation helps, but doesn’t specifically show how to resolve the require issue w/ fs. I am facing the same problem. Could you share what you did to solve your problem? Thanks!

You can’t use fs. You have to bundle resources you want to use into the plugin.

1 Like