Using require within index.html

Hello! I am trying to do the following:

const Airtable = require('airtable-node');

within my index.html file for a new tool but it is not working correctly. I was wondering if anyone else ran into an issue of using require within a script tag in an html file, if so what’s the fix? Thank you!

Hi @Emun13,
If you test your code within a normal safari web-browser, will you get the same error?
The Spatial Toolbox is 100% HTML compatible. It’s running on webkit.

Hi @valentin! I think it may be an issue with html itself. However, I was able to use other work arounds such as using fetch/xml to make patch/post/get calls.

Wonderful. Don’t hesitate to let us know if you run into any other roadblocks.

Hey @valentin, I am working a bit more on the airtable tool so that user can input their api key information on a separate txt file which I would read in through the airtable tool js file. However, when I looked up online on how to read from a txt file, it says I should try to use the fs module by doing const fs = require('fs'). Whenever I try this method, my airtable tool does not seem to work anymore and I believe it may have to do with using “require.” Do you happen to have any advice?

Do you try to use fs in the toolbox or the server? I assume its server. You can also use our settings API that already allows you to store and load settings. It might be a better mechanism. @ben can give more details on that. Let me know if it helps you.

@valentin So I am trying to edit the index.html for the airtable tool (located within the tools folder in the spatial core addon: and I wanted to incorporate some way where I can read in from a .txt file that could be stored in the main vuforia-spatial-edge-server folder so the user can type in their api key, base ID, etc. without having to go into the airtable’s index.html file. I tried to use fs in this index.html file but in order to use it I have to have fs = require('fs') but using require makes the tool not work as expected.

Hi @Emun13, using require in that context only works if the code is being run on a Node.js server. Since the tool’s index.html actually gets rendered within the frontend of the app, it isn’t inside a Node.js environment.

You’ll need to look at other javascript methods that work directly in a web browser, rather than a Node.js server.

The easiest way is if you actually save the apiKey in a very simple javascript file rather than a .txt file.

Try putting this in a file called apiKey.js:

const apiKey = 'TEST_API_KEY';

You can then include this in your index.html and use it directly:

<html lang="en">
    <title>Text Test</title>
    <script src="apiKey.js"></script>
    console.log('apiKey from javascript file: ' + apiKey);

If the file needs to be a .txt file, there are some less-direct ways of including it that may or may not work, so let me know if the javascript file works or not.

1 Like

@Emun13 the other option is to use a build tool like, which can bundle all of your dependencies (like airtable-node) into a single javascript file called bundle.js that you can include into your index.html.

This is how the lego robot motion path tool is built, for example

This worked perfectly, thank you!