Custom widget builder: import declarations may only appear at top level of a module

Ask for Help
1

Hi there,

I’m trying to create a custom widget with the “Custom widget builder” (CWB). I’d like to use an external library but I cannot find how to do that properly without having the following error : SyntaxError: import declarations may only appear at top level of a module.

For example I’m trying to use the FakerJS library with the following CDN.

Is that possible with the CWB or do I need to host my source code?

Thanks in advance for your help!

2

Here is a minimal example that should hopefully get you started https://docs.getgrist.com/qABh8z92L9eb/Widget-tester?utm_id=share-doc


<html>

<head>

<script src="https://docs.getgrist.com/grist-plugin-api.js"></script>

</head>




<body>

<div style="font-family: sans-serif; padding: 1em;">

<h2>Custom widget builder</h2>

<p id="email"></p>

</div>




<script type="module">

    import { faker } from "https://cdn.jsdelivr.net/npm/@faker-js/faker@10.4.0/+esm";




    document.getElementById("email").textContent = faker.internet.email();

</script>

</body>

</html>
3

Hi @David_Fabijan thanks a lot!

I thought I tried this in my numerous trials but apparently not..

So the only way is to get the JavaScript code in a <script type="module"> below the HTML? No way to get is separated in the JS tab from the Custom Widget Builder?

4

Actually I’m not really all that good with widget building. But it seems that for the widget builder you do always put the imported library into the html part. Take a look at the ABC widget which is one of the nicer impelemented ones for more insight.

5

Yes that’s exactly what I’m trying to do but with FakerJS it doesn’t work. I don’t get why with some libraries it works and some it doesn’t.
Because I’ve already succeeded to do that with D3.js for example (with this widget)

Example in Custom Widget Builder that does not work:

HTML

<html>
<head>
  <script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@faker-js/faker@10.4.0/dist/index.min.js"></script>
</head>
<body>
  <div style="font-family: sans-serif; padding: 1em;">
    <h2>Custom widget builder</h2>
    <p id="email"></p>
  </div>
</body>
</html>

JS

grist.ready({ requiredAccess: 'none' });
grist.onRecords(table => {});
grist.onRecord(record => {});

document.getElementById("email").textContent = faker.internet.email();

Result

When I click on “Preview” I get the following errors:
Uncaught SyntaxError: import declarations may only appear at top level of a module index.min.js:7:1
Uncaught ReferenceError: faker is not defined index.html:17:10

May it comes from the way the library is coded?

6

I’ll be honest I don’t know exactly what’s going on here :slight_smile: But with some AI help I’m coming up with the concept that (this particular version of) faker is ESM-only so you’’re required to use it with the module approach. Older versions of faker (and most other libraries) work with the global approach.

7

Should the requiredAccess be set to ‘none’ when working with Faker? To be able to access a document/table/other widget, my impression is that requiredAccess should be set to any of the other two access levels: full or only to the currently selected widget. It may be that you don’t have access to the part where Faker is declared. Try changing requiredAccess to some other value, like ‘full’.

8

Oh I liked your idea but unfortunately it doesn’t work!
I’ve changed the requiredAccess to full but still the same error.
I’ve tried several versions from oldest ones to more recent and still the same error.

9

Hi @Heloise_Ouvry ,

Custom widget build injects your JavaScript code as a plain <script> tag . The faker library is targeting the server environment, and from what I see it only ships in ESM module format, so it is meant to be used in a server environment, with a bundler or a module script tag.

To use such library with custom widget builder (btw: I’m very interested what is your use case, as this library is mainly designed for tests), you shouldn’t the JS tab. Instead, you should just build your widget in the HTML tab where you have a full control the source code yourself, exactly as @David_Fabijan did in his example.

10

Hi @jarek thanks a lot for your insightful input!

Then I should be careful about what kind of library I’m using and how it is shipped indeed.

My idea with this library was to create a fake data generator. I haven’t looked very deeply so far :wink: