Category: javascript

Category Added in a WPeMatico Campaign

Preloaded object not preloading in Electron

To make a long story short, I had a working script which had a “vers” object preloaded (in the way the electron tutorial told me to) and then had properties of the vers object displayed in HTML via my renderer. Somewhere along the line for some unknown reason my code went haywire, my BrowserWindow turned into browserwindow and some ipcMains turned into ipcmains all in my main.js script, for that reason when also the vers object was suddenly gone in my renderer.js Uncaught ReferenceError: vers is not defined I assumed it was also a capitalization mistake, but for the life of me I can’t find it. I’ve cross checked every bit of code related to the preloader file and it’s all exactly as in the tutorial. VS code even autocompletes vers.chrome() for example, but when running the program it just returns an error in the console.

Code below (I’ve left out irrelevant code, ask me to add more if need be):
main.js:

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        minwidth: 800,
        minheight: 600,

        resizable: true,
        frame: false,
        webpreferences: {
            preload: path.join(__dirname, "preload.js"),
            nodeintegration: true,
        },
    });

    win.loadFile("index.html");
};

preload.js:

const { contextBridge } = require("electron");

contextBridge.exposeInMainWorld("vers", {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
});

renderer.js:

const information = document.getElementById("info");

information.innerText = `This app uses:n Chrome (v${vers.chrome()}),n
Node.js (v${vers.node()}),n
and Electron (v${vers.electron()})`;

index.html

<body>
<div id="info"></div>
</body>
<script src="./renderer.js></script>

As I said I’ve tried to look for any capitalization mistakes (to no avail). I’ve tried to turn off any parts in my renderer.js which references vers which did make the issue go away (but without the functionality of vers ofc). I’ve crosschecked with the original tutorial, the only difference I have is that my object is called vers instead of versions (I did that to make sure I didn’t get confused between the versions in the preload and the versions that would be used in renderer). I also checked online if I could find the answer but I could only find things related to “require” not being defined, nothing like what I have. Hope any of you can find the issue, thanks in advance!

How to download a protected pdf file from source

How do I download a protected PDF file inside this source

I want to download a protected PDF file that appears on the site, but it cannot be downloaded. When searching for the source, there is this link. What should I delete or modify so that I can download it? The file is for a systems analysis course, and I want to save the files

srs=
“https://documentcloud.adobe.com/view-sdk/3.0.2_3.1.9-aa40a2cb/iframe.html?locale=en-US&msi=9710011198101451009945118105101119&parent=https%3A%2F%2Flearning.bakkah.com%2Fen%2Fuser%2Fpreview-content%2F188”

Auth.js: way to get oauth permission to manage youtube user playlist in providers/google

When using auth.js in my sveltekit application:

Google({
    clientId: GOOGLE_CLIENT_ID, 
    clientSecret: GOOGLE_CLIENT_SECRET, 
})

I am able to get users name/email, on oauth user acknowledge that my app would have access to account name/email.

I would like to know if there is a option to request more permissions for example view/edit permision to youtube playlists. My application would like to give user ability to manage their youtube playlists.

I enabled YouTube Data API v3 to my project and added https://www.googleapis.com/auth/youtube.force-ssl and https://www.googleapis.com/auth/youtube to OAuth consent screen.

Adding

authorization: { params: { scope: "openid email profile https://www.googleapis.com/auth/youtube.force-ssl" } },

will result in error when user selects the gmail account.

I would appreciate any help.

phpvms JS Button not doing anything?

Our simbrief JS Button is not working.

We have followed every step of this, and its not working on my end.
https://github.com/vangelisb/Simbrief
The button does nothing.
I have a valid API Key.

Its getting really frustrating for my partner and i running this site to making it work.
please help us!

<input type="button" onclick="simbriefsubmit('https://vswa./index.php/SimBrief', <?= $formid ?>);" style="font-size:14px" value="Generate Flight Plan">

This is the copy of the button

TypeError: Could not parse content as FormData with Remix-run and AWS S3 file upload

I am currently working on a project where I’m trying to parse FormData and handle file uploads to AWS S3 using Remix-run’s parseMultipartFormData and a custom upload handler. I’ve run into a roadblock, however, as I consistently encounter the error: TypeError: Could not parse content as FormData. Here is the code I am working with:

    export const action = async ({request}: ActionArgs) => {
    const composedUploadHandler = composeUploadHandlers(s3UploadHandler, createMemoryUploadHandler());
    const formData = await parseMultipartFormData(request, composedUploadHandler);
    const project: ProjectFormFields = {} as ProjectFormFields;

    const fileFields = [
        'referencesAttachments',
        'documentsAttachments',
        'artworkAttachments',
        'marketingAttachments',
        'investmentAttachments'
    ];

    fileFields.forEach(fileField => {
        const fileJsons = formData.getAll(fileField);
        const files = fileJsons.map(
            (str) => JSON.parse((str as unknown as string) ?? "{}") as {name: string, fileUrl: string}
        );
        project[fileField] = files.map(file => file.fileUrl);
    });

    formData.forEach((value, key) => {
        if (typeof value === 'string' && !fileFields.includes(key)) {
            project[key] = value;
        }
    });

    try {
        const { result, message, status } = await putProjectForm(project);

        return redirect("/", {
            headers: {
                "Set-Cookie": `message=${message}; Path=/;`,
            },
        });

    } catch(error) {
        console.error('There was an error with the form submission', error);
    }

    return null;

     const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
            const requiredFields = [
                "projectName",
                "blockchain",
                "supply",
                "mintPrice",
                "mintDate",
                "twitterLink",
                "emailContact",
                "description",
                "teamSummary",
                "teamMembers",
                "references",
                "documents",
                "artwork",
                "marketing",
                "allowlist",
                "investment",
            ];
        const newErrors = {...initialErrors};
        let $form = event.currentTarget;
        let formData = new FormData($form);

        requiredFields.forEach(field => {
            if (!projectForm[field as keyof ProjectFormState]) {
                newErrors[field] = true;
            }
        });

        if (Object.values(newErrors).some(value => value)) {
            setErrors(newErrors);
            return;
        }

        // Object.entries(projectForm).forEach(([key, value]) => {
        //     if (value instanceof File) {
        //         formData.append(key, value, value.name);
        //     } else {
        //         formData.set(key, value);
        //     }
        // });
        Object.entries(projectForm).forEach(([key, value]) => {
            if (value instanceof File) {
                formData.append('files', value as Blob, value.name);
            } else {
                formData.set(key, value);
            }
        });

        submit(formData, {
            method: $form.getAttribute("method") as HTMLFormMethod ?? $form.method,
            action: $form.getAttribute("action") ?? $form.action,
        });
    };

    // Initialize S3 client
const s3 = new S3();

// Define the function to stream the upload to S3
const uploadStreamToS3 = ({ Key, Body, Bucket, ContentType }: AWS.S3.Types.PutObjectRequest) => {
    const pass = new PassThrough();
    return {
        writeStream: pass,
        promise: s3.upload({ Bucket, Key, Body: pass, ContentType }).promise(),
    };
};

export const s3UploadHandler: UploadHandler = async ({ name, filename, data, contentType }) => {
    const fileFields = [
        'referencesAttachments',
        'documentsAttachments',
        'artworkAttachments',
        'marketingAttachments',
        'investmentAttachments'
    ];

    if (!fileFields.includes(name)) {
        return undefined;
    }

    const id = uuidv4();
    const filePath = `${id}/${name}`;

    const bucketName = process.env.PDF_BUCKET_NAME;
    if (!bucketName) {
        console.error("Bucket name not defined in environment variables");
        throw new Error("Bucket name not defined in environment variables");
    }

    // Stream upload file to S3
    const stream = uploadStreamToS3({ Key: filePath, Body: data, Bucket: bucketName, ContentType: contentType });
    await writeAsyncIterableToWritable(data, stream.writeStream);
    const uploadedFile = await stream.promise;

    // Public URL to the file
    const fileUrl = uploadedFile.Location;

    // Return a stringified JSON object
    return JSON.stringify({
        name,
        fileUrl
    });
};

    export const putProjectForm = async (project: ProjectFormState) => {
    const id = uuidv4();
    const formType = 'project';

    const projectData = {
        id,
        formType,
        ...project
    };

    try {
        await ddb.put({
            TableName: process.env.DYNAMO_TABLE_NAME as string,
            Item: projectData,
        }).promise();

        return { result: 'success', message: 'Data saved successfully', status: 200 };
    } catch (error) {
        console.error(error);
        throw new Error('Error saving data');
    }
};

The error seems to originate from the line where I call parseMultipartFormData. I’ve confirmed that the request object being passed to parseMultipartFormData is correct and that the FormData being passed from the frontend is correctly formatted. Additionally, I’ve made sure to use the ‘multipart/form-data’ enctype in my form.

Is there something I’m missing that’s causing this error? How can I correctly parse the FormData to avoid this issue? I appreciate any insight anyone can provide.

Approach to select features via attribute property values in OpenLayers 7.3?

I’m using OpenLayers 7.3, and am trying to select features of a GeoJSON vector layer based on attribute values. Have tried using the Select Class with filters, but haven’t been able to get it to work. I just need to run some preset queries from button above the map, for example, select all with “[fid] > 5”:

var selectAttributes = new Select({
  layers: [VectorLayer],
  filter: new GreaterThan({propertyName: 'fid', expression: 5}),
});

Is there a way to do this? Have read about approaches from earlier OL versions but haven’t found anything that works well. I’ve tried the very nice ol-ext Select control which gives me hope this type of selection is possible at 7.3, but I can’t use a control and just need to have something that allows the user to run and see the results of the selection from a single button push. Thanks for any help.

Accessing Data from Existing Chrome Extensions in My Own Extension

I know how to code but am new to coding chrome extensions. I found other extensions that already do most of what I’m trying to achieve, so I was wondering if there was a way that I could access their data within my extension without having to modify the other extension??

I got a generic understanding of how to edit/make extensions but am not super well-versed with it. Any other tips would also be appreciated.

React hook form controller render return [Function Anonymous] instead of array of data

I need the value from skillsInput to be an array but whenever I try to check the data from Detail it shows that skills return [Function Anonymous] not the actual data even though when I log the items (value: items) from SkillsInput it shows the array of data that has been inputed

the defaultValue is worked, it shows [] when skills are empty then it shows [Function Anonymous] when I add a new value on SkillsInput

the error on Detail is shown as

skills must be a array type, but the final value was: null (cast from the value [Function anonymous]).
If “null” is intended as an empty value be sure to mark the schema as .nullable()

Detail.js

const schema = yup.object().shape({
  skills: yup
    .array()
    .min(1, "at least one skill needed")
    .typeError("dev: typeError")
    .required("required"),
})
export default function Detail() {
const { control, handleSubmit, setValue, getValues } = useForm({
    mode: "onBlur",
    resolver: yupResolver(schema),
  });
return(
  <View>
    <SkillsInput name="skills" control={control} />
  </View>
)}

SkillsInput.js

const schema = yup.object().shape({
  name: yup.string().required("Required"),
  duration: yup.string().required("Required"),
});

export default ({
  name = "skills",
  control: parentControl,
  defaultValue = [],
}) => {
  const [selectedIndex, setIndex] = React.useState("");
  const { control, handleSubmit, reset, setValue, getValues, setError } =
    useForm({
      mode: "onBlur",
      resolver: yupResolver(schema),
    });
  const renderForm = ({
    field: { onChange: setItems, value: items },
    fieldState: { error },
  }) => {
    const onSubmit = () => {
      const name = getValues("name");
      const duration = getValues("duration");
      const newItem = { name, duration };
      if (!selectedIndex) {
        const isExist = items.some((item) => item.name.toLowerCase() === name.toLowerCase());
        if (isExist) {
          setError("name", {
            type: "manual",
            message: "Skill has been inputed",
          });
          return;
        }
        setItems((prevItems) => [...prevItems, newItem]);
      } else {
        const isExist = items.some(
          (item, idx) => item.name.toLowerCase() === name.toLowerCase() && idx !== +selectedIndex
        );
        if (isExist) {
          setError("name", {
            type: "manual",
            message: "Skill has been inputed",
          });
          return;
        }
        setItems((prevItems) =>
          prevItems.map((item, idx) =>
            idx === +selectedIndex ? newItem : item
          )
        );
      }
      clearInput();
    };
    const clearInput = () => {
      setIndex("");
      reset({
        name: "",
        duration: "",
      });
    };
    const ListItemIcon = (props, item, index) => {
      return (
        <>
          <IconButton
            {...props}
            icon="pencil"
            onPress={() => {
              setValue("name", item.name);
              setValue("duration", item.duration);
              setIndex(String(index));
            }}
          />
          <IconButton
            {...props}
            icon="delete"
            onPress={() => {
              const filteredItems = items?.filter(
                (_, currentIndex) => currentIndex !== index
              );
              setItems(filteredItems);
              clearInput();
            }}
          />
        </>
      );
    };
    return (
      <ModalInput
        label="Skills"
        textVal={
          items?.length >= 1 ? `${items.length} skill` : undefined
        }
        error={error}
      >
        <AppTextInput
          name="name"
          label="Skill"
          placeholder="Skill"
          autoCorrect={true}
          control={control}
        />
        <AppPicker
          name="duration"
          label="Time"
          placeholder="Time"
          items={[
            { value: "< 1 year" },
            { value: "1 - 3 year" },
            { value: "> 3 year" },
          ]}
          control={control}
        />
        <Button
          labelStyle={styles.btnSubmit}
          mode="contained"
          onPress={handleSubmit(onSubmit)}
          color={Colors.blue500}
        >
          Edit
        </Button>
        <FlatList
          keyExtractor={(_, i) => String(i)}
          data={items}
          contentContainerStyle={styles.contentFlatList}
          renderItem={({ item, index }) => {
            return (
              <List.Item
                style={styles.listItem}
                title={item.name}
                description={item.duration}
                right={(props) => ListItemIcon(props, item, index)}
              />
            );
          }}
        />
      </ModalInput>
    );
  };
  return (
    <Controller
      name={name}
      control={parentControl}
      defaultValue={defaultValue}
      render={renderForm}
    />
  );
};

Here is the data that I get when I log SkillsInput items

Array [
  Object {
    "duration": "> 3 year",
    "name": "test",
  },
  Object {
    "duration": "1 - 3 year",
    "name": "test2",
  },
]

How can I use Google Maps to AstroJS?

I was trying to add Google Maps to my AstroJS project in a .astro file. Still, it wasn’t possible, I tried to use the Javascript official Google tutorial, but it didn’t work for me, mainly because the script to include maps generated some issues and finally it didn’t works.

Could you help me, please?

Inject a web component with Chrome Extension using Stencil

Im using stencil as my web components library to inject components to websites using chrome extension content script, Im injecting the needed scripts, But on some sites like bard.google.com
Im getting a TrustedType Error Unhandled Promise rejection: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment. ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML seems that stencil script is using innerHTML which is legit but I cant find a way to pass it.

  1. Tried to implment window.trustedTypes.createPolicy didnt worked
  2. Tried to use a stencil/webpack plugin to import the components to the extension and render them using the plugin but the plugin is depracted and not suitable to webpack 5 (my extension is bundled using webpack 5)

why in my code addEventlistener needs 2 click to work and display alert

just new with javascript coding. I have written a simple to-do-list everything seems working fine except that the eventListener button Click of function CheckAddBtn() does not work the 1rst time but only works and show the expected alert window after 2 clicks. Below code would be very gratefull if someone can help and explain
thanks a lot

—————————-HTML Part——————

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/todolist.css">
    <script src="todolist.js" defer></script>
    <title>todolist</title>
</head>
<body onload="addList()">
    <div class="container" id="container2">
        <div class="row">
             <input type="text" class="todolist" id="todolist2" placeholder=" Add your text here"/>
             <label for="todolist2">Pls Enter List To Do</label>
             <button type='button' id='btn' class="btn" onclick="addList()">Add</button>
        </div>
        
        <div class="todolistcontainer" id="todolistcontainer2">
            <ul class="listingtodo" id="listingtodo2">
              
            </ul>
        </div>
    </div>

    
</body>
</html>

—————————————-Javascript Part——————-

const Btn = document.getElementById('btn')
const listBox = document.getElementById('listingtodo2')
const CheckBox = document.getElementsByClassName('checkbox')
const inputText = document.getElementById('todolist2')
let i = 0
var clicked = false
inputText.value =''  




function AddRemoveList(){  
    listBox.addEventListener('click', function(e){
        if (e.target.tagName === 'INPUT'){e.target.parentElement.classList.toggle('checked')
        SaveTasks()
    } else if (e.target.tagName === 'SPAN'){e.target.parentElement.remove(), false}
    SaveTasks()
    })
    }

function CheckAddBtn(){
    Btn.addEventListener('click', function ChkClick(){
        clicked = true}
    )
}

function SaveTasks(){
    localStorage.setItem('data', listingtodo2.innerHTML)

}

function ShowTaskAgain(){
    listingtodo2.innerHTML = localStorage.getItem('data')
}

AddRemoveList() 

function addList(){
    SaveTasks()
    CheckAddBtn() 
    
    if (inputText.value ==='' && clicked === true){
        {alert('pls add a todo thing')
        clicked = false
        return}
    } 
  
    else if (inputText.value !=''){
        i++
        let li = document.createElement('li');
        li.innerText = inputText.value
        listBox.appendChild(li);
        li.classList.add('thelists')

        let checkBox = document.createElement('input') 
        checkBox.setAttribute('type','checkbox')
        checkBox.setAttribute('id','Createdcheckbox' + i)
        li.appendChild(checkBox)
        checkBox.classList.add('checkbox')

        let cross = document.createElement('span')
        cross.innerHTML = '&#10006'
        li.appendChild(cross)
        cross.classList.add('removecross')
        inputText.value =''  
    }  
    SaveTasks()
}

ShowTaskAgain()

—————————————-css Part——————

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body{
    background: cadetblue;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    height: 100vh;
}


div.container{
    box-shadow: 5px -5px 15px 5px rgba(14, 75, 45, 0.6);
    position: relative;
    display: block;
    user-select: none;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    height: 450px;
    width: 550px;
    border-radius: 5px;
    background: rgba(249, 249, 247, 0.5);
    overflow: auto;
       
}

div.container .row{
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    height: 450px;
    width: 550px;
    border-radius: 5px;
    background: rgba(249, 249, 247, 0.5);
}

div.container .row>input{
    position: absolute;
    top: 10%;
    left: 0%;
    width: 375px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 5px;
}

div.container .row .btn{
    position: absolute;
    cursor: pointer;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    top: 10%;
    left: 385px;
    width: 70px;
    height: 30px;
    outline: none;
    border-radius: 5px;
    background: rgba(255, 185, 0, 1);
    transition: background 300ms ease-in-out;
}

div.container .row .btn:hover{
    
    background: rgb(155, 115, 4);
}

div.container .row >input::placeholder{
    color: rgba(0, 0, 0, 0.3);
  
}

div.container .row > label{
    position: absolute;
    left: 0px;
    top: 35px;
}

div.container .todolistcontainer{
    position: absolute;
    top: 40%;
    left: 10%;
    width: 450px;
    border-radius: 5px;
    height: auto;
    background: rgba(49, 94, 209, 0.8);
    
}

div.container .row{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 450px;
    height: auto;
}

div.container .todolistcontainer .listingtodo{
    display: block;
    word-wrap: break-word;
    word-break: break-all;
    height: auto;
    width: auto;
    list-style-type: none;
    
}

.checkbox{
    
    position: absolute;
    right: 412px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 15px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    appearance: none;
    background-color: antiquewhite;
}

.checkbox:checked{
    background-image: url(../image/checksign.jpg);
    background-position: center;
    background-size: cover;
}

.checked{
    text-decoration: line-through;
}

.thelists{
    border: 2px solid white;
    padding-bottom: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    margin-left: 28px;
    margin-right: 10px;
    width: auto;
    height: auto;
    line-height: 1.5em;
}

.removecross{
    position: absolute;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 15px;
    object-fit: fill;
    vertical-align: middle;
    line-height: 20px;
    left: 460px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(199, 211, 208, 0.7);
}

.removecross:hover{
    background: rgba(127, 134, 132, 0.7);
    transition: background 300ms ease-in-out;
}

Why is the checkbox not updating visually after using jQuery to uncheck it when clicking ‘No’ on a modal box?

I am trying to uncheck input checkbox in jquery when i click No button of modal box and check it I click Yes button .

$('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
      if ($(this).is(':checked')) {
        var $n = noty({
          text: 'Please provide relevant complementary information about .....',
          modal: true,
          layout: 'center',
          type: 'neutral',
          buttons: [{
            addClass: 'btn btn-default',
            text: 'Ok',
            onClick: function($noty) {
              $(this).prop("checked","checked");
              $noty.close();
            }
          },
           {
             addClass: 'btn btn-default',
             text: 'No',
             onClick: function ($noty) {
                $(this).removeAttr('checked');
                $noty.close();
              }
            }]
        });
        // Focus on "OK" button
        $n.$buttons.find('#button-0').first().focus();
        return false;
      }
    });

I can see in developer tool the checked is added(checked = “checked”) when clicking yes and hidden when clicking no, but in the UI the checking mark is not updating.

I tried $(this).prop("checked","checked");
and $(this).prop("checked",true);
and also $(this).attr("checked",true);
in Yes button, but without success .

Expo AV – I have a video within a view, and I want it to take up the entire space

I have a video in React Native using Expo AV. It must be stored within a View, but the View is taking up a chunk of the space on the screen, and I would like the video to take up the full amount of space. How do I make this happen?

Ideally, I would like the play button to be centered in the video, and the container surrounding the video to be removed. I cannot seem to figure this out! I have attached an image and added my code below.

Thanks for your help!

enter image description here

Here is my code:

  return (
    <View style={styles.container}>
      <Video
        ref={video}
        style={styles.video}
        source={require("./assets/big_buck_bunny.mp4")}
        useNativeControls={false}
        volume={1.0}
        resizeMode={ResizeMode.COVER}
        isLooping={false}
        onPlaybackStatusUpdate={status => setStatus(() => status)}
      />
      <TouchableOpacity style={styles.buttons} onPress={() => status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()}>
        {status.isPlaying ? (
          <>
            <AntDesign style={styles.icons} name="pause" size={50} color="white" />
          </>
        ) : (
          <>
            <AntDesign style={styles.icons} name="caretright" size={50} color="white" />
          </>
        )}
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    flex: 1,
    alignSelf: 'stretch',
  },
  buttons: {
    transform: [{ translateY: -200 }],
  },
  icons: {
    color: 'white',
  }
});

‘Property doesn’t exist’ error with imported module in Svelte

I want to use big.js or decimal.js to perform accurate calculations of decimal numbers in my basic Svelte app. To test it, I have imported the module in my App.svelte file:

import Decimal from "../node_modules/decimal.js/decimal.mjs";
import Big from "../node_modules/big.js/big.mjs";

However, when I create a Big object and use its built-in functions, I get an error in my IDE (Visual Studio Code), but the code works as expected in the console:

let myNumber = 3.2;
let secondNumber = new Big(myNumber).div(2);

Error: Property 'div' does not exist on type 'Big'

How can I get my IDE to recognise imported objects from modules? To clarify, I am not using typescript.