Using TypeScript to incorporate JS web assembly into your project

I have been attempting to incorporate wasm-clingo into my TypeScript React project. I tried creating my own .d.ts file for the project:

// wasm-clingo.d.ts
declare module 'wasm-clingo' {
  export const Module: any;
}

and importing it like this:

import { Module } from 'wasm-clingo';

However, when I try to console.log(Module), it displays undefined. What could be the mistake I made?

Additional Information:

Solution:

To resolve this issue, I did the following:

// wasm-clingo.d.ts
declare module 'wasm-clingo' {
  const Clingo: (Module: any) => Promise<any>;
  namespace Clingo {}
  export = Clingo;
}

and

import * as Clingo from 'wasm-clingo';

Referencing the source of this solution.

Answer №1

It seems like you've reached a solution that works for you, but I noticed that you're not utilizing any specific types in your code. Instead, you've simply declared Module as any, which means you're missing out on the benefits of TypeScript. In a similar scenario, I opted to use @types/emscripten, which offers comprehensive type definitions for web assembly modules compiled using emscripten.

To implement this, all you need to do is run:

npm install --save-dev @types/emscripten

Next, update your tsconfig.json file by adding emscripten to the types array. This will enable you to easily make calls like Module.ccall(...). If desired, you can rename Module to something more descriptive like Clingo = Module for clarity.

I hope this advice proves helpful to you! ;)

Answer №2

It seems that the problem lies in wasm-clingo exporting the module itself instead of a property which is expected by

import { Module } from 'wasm-clingo'
.

You can try the following:

import Clingo_ from 'wasm-clingo';
const Clingo: typeof Clingo_ = (Clingo_ as any).default || Clingo_;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Production environment experiencing issues with Stripe functionality due to element remaining mounted

When making a payment in development mode, everything goes smoothly. However, when I switch to production, I encounter the following error message: v3:1 Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element. Please e ...

Triggering multiple subscription functions in Ionic 3 NGRX when a single state change occurs

I have developed an Ionic 3 application that utilizes NGRX for state management purposes. The app is designed to connect to a device via BLE technology. Within my connection page, where the BLE device is connected, I have implemented the following code: ...

Send information through a form by utilizing a personalized React hook

I'm having difficulty understanding how to implement a hook for submitting a form using fetch. Currently, this is what I have. The component containing the form: const MyForm = (): ReactElement => { const [status, data] = useSubmitForm('h ...

What is the correct syntax for utilizing a variable in inline styles within ReactJS, specifically when working with the --i:0

            The question has been raised previously, but unfortunately, it was left unanswered in this thread. The variables play a crucial role in this piece of code as they are intended to be utilized in various CSS functions for animating them wi ...

Firestore Query sends data object to browser

When making a Firestore query, the browser is displaying [object Object],[object Object] instead of the expected output: router.get('/jobopportunities', async(req, res) => { var jobArray = []; const snapshot = await fireba ...

After attempting to follow a guide, I encountered a scenario where a view was returning None because the is_ajax function was not

After diving into the world of ajax, I encountered a puzzling issue that I can't seem to crack. My hunch is that it involves the comment_id versus the blog_id. (I was following this tutorial: https://www.youtube.com/watch?v=VoWw1Y5qqt8&list=PLKILt ...

Converting EDN data to a string and back in Clojure/ClojureScript

When working with JavaScript, one can convert a JavaScript data structure into a JSON string using the following code: JSON.stringify({somedata: { somesubdata: {}}}) Then, to parse it back into a JS data structure, you can use: var my_obj = JSON.parse(" ...

Disable and grey out the button while waiting for the Observable to broadcast successfully

component.html <button mat-raised-button color="primary" type="submit"> <mat-icon>account_box</mat-icon> <span *ngIf="!loading">&nbsp;&nbsp;&nbsp;Register</span> <span * ...

Converting a JavaScript dictionary into an array of documents: The ultimate guide

I have an object that looks like this: const obj = { "restaurant": 20, "hotel": 40, "travel": 60 } Is there a way to transform it into the format below? const newArray = [ { "category_name": "restaurant", "amount": 20 }, { "category_na ...

What are the steps to ensure that data retrieved from an API is accurately displayed in a table?

My current goal is to collect data from the crypto compare API and display it in a table format. Although I am able to generate the necessary elements and append them to the table body, I am facing an unusual issue. Each time I use a for loop to iterate th ...

Fulfill the promise to retrieve the value contained within

Is there a way to use TypeScript to call the Wikipedia API for retrieving a random page title and save it in a variable for later use? I am struggling with resolving promises as I keep getting ZoneAwarePromise returned. I'm new to both promises and Ty ...

Removing an element in Vue.js

Can someone help me with a Vue.js issue I'm having? I'm working on a quiz and I want to add a button that deletes a question when clicked. Here's what I've tried so far: deleteQuestion(index) { this.questions.splice(index, ...

In certain Express app files, the use of Sequelize modules may result in a return value of undefined

Objective - To implement a middleware-like callback in userHandler located in util.js for certain express routes in an express app, created using express-generator and sequelize-cli. Expected Outcome - Utilize the user model successfully in routes and use ...

positioning a window.confirm dialog box in the center of the screen

I'm currently facing an issue with a dialog box that I have implemented successfully. However, I can't seem to get it centered on the page: <Button variant="danger" onClick={() => { if (window.confirm('Delete character?')) handle ...

Resolving the Issue with onClick Events in Closures

Secrets of the JavaScript Ninja provides an interesting example: HTML <button id="test">Click me!</button> JavaScript var button = { clicked: false, click: function() { this.clicked = true; console.log("this:", this, ...

Harness the power of AngularJS by crafting your unique

Hey there! I'm having a bit of trouble figuring out why this isn't showing up. Both View1.html and View2.html are in the partials folder, so that's not the issue. Sometimes the screen is completely blank, other times I only see a Name: label ...

Is it possible for Monaco Editor to accommodate nested tokens?

I have configured a custom language in the monaco editor, with two root tokens: [/^\[?[e|E][r|R][r|R][o|O][r|R]\]?\s.*/, 'error'], [/\d{1,4}(-|\/|\.|:)\d{1,2}\1\d{1,4}/, 'time'], Using this ...

Fetching various data from MongoDB using NodeJS and presenting it in Jade(Pug) template

I am working with MongoDB collections and need to showcase them on my website, creating a dynamic page that updates automatically. Specifically, I am dealing with team members' information in the database. Here is an example of how my collections loo ...

Placing a new item following each occurrence of 'X' in React components

Currently, I am working with a React component that uses Bootstrap's col col-md-4 styles to render a list of items in three columns. However, I am facing an issue where I need to add a clearfix div after every third element to ensure proper display of ...

Tips for extracting parameters from a URL using Express JS in a custom manner

Recently, I set up a server using the express package and encountered an issue while trying to extract parameters from the URL in a specific format. The URL structure is as follows: (notice there's no '?' indicating parameters). I am lookin ...