Category: javascript

The MDN docs on importKey don’t seem to provide a way to remove or delete a key once it is no longer needed. Since the function name includes the term “import”, which may suggest some degree of permanence, is explicit action needed to delete the key? Will the key get garbage collected once it goes out of scope?

I have created a simple component library in React with Javascript. The intention is that I can use it locally. So I called a button I created my library(just a simple button). But I keep getting the following error message in the console: “`App.jsx:5 Uncaught SyntaxError: The requested module ‘/@fs/C:/Users/davym/Documents/HetDomeinUI/dist/index.js’ does not provide an export named ‘default’ (at App.jsx:5:8)`. Did I probably put something wrong in my package.json in the library?

the 3 screenshots are from my library.

Componententer code here
Export in index.jsenter code here
Package.jsonenter code here
ProjectStructureenter code here

I’ve used this import statement in mine headproject: import BasicButton from "hetdomeinui";

also used this: import {BasicButton} from "hetdomeinui" But it didnt work either.

I have created a simple progress bar in HTML using JavaScript. The animation of this progress bar works correctly when the page is refreshed, but I want it to restart from the beginning once it completes and repeat indefinitely in a loop. However, the repetition and restart are not working properly and are not executing.

  const progressBar = document.getElementById('progressBar');

  function startProgressBarAnimation() {
progressBar.classList.remove('active');

setTimeout(() => {
  progressBar.classList.add('active');
}, 100);
  }

  startProgressBarAnimation();

  progressBar.addEventListener('transitionend', () => {
progressBar.style.transition = 'none';

progressBar.style.transform = 'translateX(100%)';
setTimeout(() => {
  progressBar.style.transition = 'transform 5s linear';
  startProgressBarAnimation();
}, 10);
  });

.progress-bar-container {
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff0008, #fad0c4, #ffecd2);
  transform: translateX(100%);
  transition: transform 5s linear;
}

.progress-bar.active {
  transform: translateX(0);
}

<div class="progress-bar-container">
  <div class="progress-bar" id="progressBar"></div>
</div>

while running npm start the application working perfectly, but running the npm test gets the below error

 TypeError: (0 , _ToastComponent.showToast) is not a function

      20 |         } = error;
      21 |         if (response && msg) {
    > 22 |             showToast(msg, "toast toast-danger", "alert", true, getToastTimeLimit());
         |                      ^
      23 |         } else {
      24 |             showToast("Internal server error!", "toast toast-danger", "alert", true, getToastTimeLimit());
      25 |         }

my jest-setup.js file is

import '@testing-library/jest-dom';

and my package.json is

{
  "name": "test-ui",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "start": "vite",
    "test": "jest",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.25.9",
    "@trimble-oss/modus-icons": "^1.15.0",
    "@trimble-oss/modus-react-components": "^0.36.0-react18",
    "@trimbleinc/modus-react-bootstrap": "^1.2.4",
    "axios": "^1.7.7",
    "date-fns": "^4.1.0",
    "express": "^4.21.1",
    "gulp": "^5.0.0",
    "jwt-decode": "^3.1.2",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.4",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.8.3",
    "@testing-library/dom": "^9.3.4",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^14.3.1",
    "@vitejs/plugin-react": "^3.1.0",
    "babel-jest": "^27.5.1",
    "babel-loader": "^8.0.6",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "jest": "^27.5.1",
    "jest-css-modules-transform": "^4.4.2",
    "vite": "^4.5.5"
  }
}

and my code which shows the error is

import http, { getRefreshToken } from "./httpService";
import { showToast } from "../components/common/ToastComponent";
import { showSpinner } from "../components/common/SpinnerComponent";
import { getToastTimeLimit } from "../properties/properties";
import { loadConfig } from "../utils/util";

export async function getAccessToken(username, password) {
    const { hostName } = await loadConfig();
    try {
        const response = await http.post(`${hostName}/test/test`, { username, password });
        console.log("Login successful :-)");
        return response;
    } catch (error) {
        const {
            response: {
                data: { msg },
            },
            response,
        } = error;
        if (response && msg) {
            showToast(msg, "toast toast-danger", "alert", true, getToastTimeLimit());
        } else {
            showToast("Internal server error!", "toast toast-danger", "alert", true, getToastTimeLimit());
        }
        showSpinner(false);
        throw error;
    }
}

The test file code which throws a error is

test("calling the api end point for a invalid input", async () => {
    const checkLoggedInSpy = jest
      .spyOn(http, "checkLoggedIn")
      .mockReturnValue(true);
    renderComponent();

    axios.post.mockRejectedValue({
      response: {
        data: {
          msg: "Invalid username or password",
        },
      },
    });

    const usernameInput = screen.getByPlaceholderText("Username");
    const passwordInput = screen.getByPlaceholderText("Password");
    fireEvent.change(usernameInput, { target: { value: "test" } });
    fireEvent.change(passwordInput, { target: { value: "test" } });

    await waitFor(() => {
      const loginButton = screen.getByTestId("login-btn");
      fireEvent.click(loginButton);

      expect(axios.post).toHaveBeenCalledWith(expect.any(String), {
        username: "test",
        password: "test",
      });
    });

    checkLoggedInSpy.mockRestore();
  });

I have tried with AI, but it is asking me to mock the function, but it suppose to run to increase the coverage

In my project I use Summernote editor but it doesn’t have any image management plugin like TinyMCE or CKEditor.

My web application has a set of articles that users can edit. I would like to have a feature that allows the user to add images to the text area while editing an article in Summernote. However, these images need to be uploaded to the server. Roxy Fileman does this very well so I would like to integrate it.

Can anyone suggest how to implement this?

Since I can’t use the standard image insertion dialog, I want to implement it through a separate button:

//My button
var RoxyButton = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: '<i class="fa fa-child"/>',
    tooltip: 'Insert image',
    click: RoxyFilemanDialog
  });

  return button.render(); // return button as jquery object
}

This is what the settings configuration for Summernote will look like:

toolbar: [
  ['mybutton', ['roxy']],
],
buttons: {
    roxy: RoxyButton
},

When I press my button, the dialog function should be triggered:

// Summernote
function RoxyFilemanDialog@(callback, value, type){    
    $.ajax({
        cache: false,
        type: "GET",
        url: "@Url.Action("CreateConfiguration", "RoxyFileman")",
        success: function (data, textStatus, jqXHR) {
            var roxyFileman = '@Url.Content("~/lib/Roxy_Fileman/index.html")'; 

//There should be a call to the function to open a dialog in Summernote...
{...
           
            $.ajax({
                title: 'Roxy Fileman',
                url: roxyFileman,
                width: 850,
                height: 650,
                plugins: "media",                
            });
}
            return false;
        },
        error: function (jqXHR, textStatus, errorThrown) {
            ...
        }
    });
}

But it seems that Summernote does not have an API for opening a custom dialog window and embedding your functions into it.

Or maybe I’m digging in the wrong direction and the implementation should be completely different?

Can anyone suggest how to implement this?

I have several radar charts that are created in response to a set of questions. Each plot has a different number of data points, dependent on the number of questions. I currently create the plot based on the answer I got in:

Changing eChart Options based on number of indicators on radar chart

That, however, results in creating multiple if length===n statements, one for each number of data points. I’d like to use some sort of for statement to generate the right number of points on the plot by appending additional lines of:

{ name: area_name[n], max: max, color:'black' },

where n is the next point number.

I’ve tried several for loops but can’t seem to get it to wwork.

Sample code for 10 data points:

  if (length === 10) {
setTimeout(function (){
  const newIndicator = [
  { name: area_name[0], max: max, color:'black',
  axisLabel: {
    color: 'black',
    show: true,
    interval: 0,
    showMinLabel: false,
  },},
  { name: area_name[1], max: max, color:'black' },
  { name: area_name[2], max: max, color:'black' },
  { name: area_name[3], max: max, color:'black' },
  { name: area_name[4], max: max, color:'black' },
  { name: area_name[5], max: max, color:'black' },
  { name: area_name[6], max: max, color:'black' },
  { name: area_name[7], max: max, color:'black' },
  { name: area_name[8], max: max, color:'black' },
  { name: area_name[9], max: max, color:'black' },
  ];

  const newData = [
  {
    axisLabel: {
      show: true,
      interval: 0
    },
    value: area_scores,
    areaStyle: {
      color: overall_color,
      opacity: 0.5
    },
    label: {
      show: true,
      formatter: function (params) {
        return params.value;
      }
    }
  },
];

  
  myChart.setOption({
radar: { indicator: newIndicator },
series: [{ data: newData }]
 option && myChart.setOption(option);
});},)};

I’m trying to build a card navigation feature in JavaScript where clicking on a card displays its content in a hiddenCard element, and I can navigate between cards using left and right arrow buttons.

Selecting Cards and the Hidden Card:

var cards=document.querySelectorAll(".card");

var hiddenCard=document.querySelector(".card_hidden")

var currntIndex=0;

Adding Click Event to Each Card:

for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener("click", function () {
    currntIndex = Array.from(cards).indexOf(this);

    var image = this.querySelector("img");
    var title = this.querySelector(".title p");

    hiddenCard.innerHTML = `
      <p>${title.textContent}</p>
      <img src=${image.src}> 
      <i class="fa-solid fa-arrow-left pre"></i>
      <i class="fa-solid fa-arrow-right next"></i>
    `;

    hiddenCard.style.display = "block";

    console.log(hiddenCard);

    arrows();
  });
}

Adding Navigation with Arrows:

function arrows() {
  document.querySelector(".pre").addEventListener("click", function () {
    if (currntIndex > 0) {
      currntIndex--;
      showIndex(currntIndex);
    }
  });

  document.querySelector(".next").addEventListener("click", function () {
    if (currntIndex < cards.length - 1) {
      currntIndex++;
      showIndex(currntIndex);
    }
  });
}

Updating the Hidden Card:

function showIndex(currntIndex) {
  var imagIndex = cards[currntIndex].querySelector("img");
  var titleIndex = cards[currntIndex].querySelector(".title p");

  hiddenCard.innerHTML = `
    <p>${titleIndex.textContent}</p>
    <img src=${imagIndex.src}> 
    <i class="fa-solid fa-arrow-left pre"></i>
    <i class="fa-solid fa-arrow-right next"></i>
  `;
}

The hiddenCard displays correctly when I click on a card. However, when I use the arrow buttons, the hiddenCard content doesn’t update, or the navigation doesn’t work as expected.

I encountered an issue while using the Error Lens extension in Visual Studio Code. When I try to use the “Copy Problem Message” command, I get the following error popup:

Steps to Reproduce:

Make sure you have the ErrorLens extension installed in VSCode.
Try using the “Copy Problem Message” command.

System Information:

VS Code version: 1.96.2

Error Lens version: 3.22.0

OS: Windows 11

Attempts to Fix:

Restarted VS Code.

Reinstalled the Error Lens extension.

Questions:
Any idea what could be causing this? Thanks for the help.

Hi my java script file looks like this

import $ from 'jquery';

$(function(){
    $(".main #subMain").on("click", function(e){
        e.preventDefault();
        var block = $("div.next").parents(".head").first();
        block.find(".main_styles").attr("hidden", false);
        block.insertAfter(".footer-section");
        $([document.documentElement, document.body]).animate({
            scrollTop: $("div.next").offset().top
        }, 1000);
    });
}); 

I tried writing jest test case like this loading the html and calling the the function but the error is with invoking the jquery function

require('../file_name.js');

describe("Test helppage", () => {
    test("testing ", () => {
        return new window.Promise((done) => {

            document.body.innerHTML = `<div class="main"><div id="subMain"></div></div><div class="head" >
    <div  class="main_styles" hidden>
        <div class="next">Text
         </div>
    </div>
</div><div class="footer-section"></div>`;
            const onDomContentLoadedCallback = async () => {
                
              
                ($('.main #submain')).trigger('click');
                
                document.removeEventListener("DOMContentLoaded", onDomContentLoadedCallback);
                done();
            };

            document.addEventListener("DOMContentLoaded", onDomContentLoadedCallback);
            document.dispatchEvent(
                new Event("DOMContentLoaded", {
                    bubbles: true,
                    cancelable: true,
                })
            );

        });
    });
});

Any solutions in how to invoke this jquery function will be helpful.Thanks!!

I am using javascript and node express with async/await. So there is only one thread/process running, but the way it executes is not straightforward.

Asynchronous methods may request rows from an sqllite database. I am using this npm package.
https://www.npmjs.com/package/sqlite

If simply opening and closing the database inside the async methods, like this

async function request() {
    var db = await sqlite.open({
        filename: "filename.db",
        mode: sqlite3.OPEN_READONLY,
        driver: sqlite3.Database
    })
    //-- do something, like this
    const stmt = await db.prepare("SELECT 1");
    const rows = await stmt.all();
    await stmt.finalize();
    //-- then close
    await actualDb.close();
}

This throws “SQLITE_BUSY” errors. So I made functions like this to open/close the database:

var inUse = false;

function timeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function openDb() {
  while (inUse) {
    await timeout(50)
  }
  inUse = true;
  return await sqlite.open({
    filename: "filename.db",
    mode: sqlite3.OPEN_READONLY,
    driver: sqlite3.Database
  })
}

async function closeDb(db) {
  await db.close();
  inUse = false;
}

And then call these functions to open/close the database. But this only allows one async method to use the database at a time, while other requests need to wait. I think it might be possible to allow several “threads” to share the database with reference counting somehow, but don’t know exactly how to do it.

I am developing a Chrome extension that uses chrome.identity.getAuthtoken API – to handle Google OAuth 2.0 authentication.

1. In Chrome browser it’s working fine.

2. However, this API is not supported in the Microsoft Edge browser (link here). So as per suggestions in multiple forums, I am trying to use chrome.identity.launchWebAuthFlow API to handle Google OAuth 2.0 authentication for Microsoft Edge.

   But the chrome.identity.launchWebAuthFlow API is not working & is returning

   Error 400: redirect_uri_mismatch

I couldn’t find any documentation or discussion explaining this behavior on Edge or other Chromium-based browsers.
m questions-

Q1. Is there a specific configuration required in the Google Cloud Console to support other Chromium-based browsers (like Edge) when using Chrome.identity.launchWebAuthFlow?
Q2. Does Edge handle chrome.identity.launchWebAuthFlow differently, causing it to reject the redirect_uri?
Are there any known limitations or workarounds for this issue in Chromium-based browsers other than Chrome?

I setup this node export server on our server. We followed the below steps while setting the server

Setup Steps

1. git clone https://github.com/highcharts/node-export-server.git
2. git checkout 7f5d512fe565632d2da32afbdc38662d7bf8fdef (for version 2.1.0)
3. edited lib/server.js
   from

  req.on("close", function () {
    connectionAborted = true;
  });

to

 req.socket.on("close", function () {
    connectionAborted = true;
  });

as the connection was getting closed.

4. used node version 20.4.0 and provided env variables as:

export HIGHCHARTS_USE_MAPS=YES
export HIGHCHARTS_USE_GANTT=YES
export HIGHCHARTS_VERSION=8.0.0
export ACCEPT_HIGHCHARTS_LICENSE=YES
export HIGHCHARTS_USE_STYLED=YES
export OPENSSL_CONF=/etc/ssl

Also, we tried using 9.2.2 version of highcharts.

5. npm install

6. npm link

7. highcharts-export-server –enableServer 1 –logLevel 4 –allowCodeExecution 1

Actual behaviour

When using POST with input

{
    "type": "image/png",
    "scale": 2,
    "globalOptions": "{colors: ["rgba(39,26,136,0.7)","rgba(241,203,93,0.7)","rgba(234,70,62,0.7)","rgba(114,189,85,0.7)","rgba(77,147,23,0.7)","rgba(163,151,243,0.7)"],lang: {thousandsSep: ','}}",
    "infile": "{chart: {renderTo: 'test me',height: 400,width: 600},exporting: { sourceWidth:950,sourceHeight:300,enabled:false,allowHTML: true,sourceWidth: 400,sourceHeight: 400,scale: 1},credits: {enabled: true},title: {text: ''}}",
    "callback": "function (chart) {chart.renderer.rect(0, 0,400,400, 8).attr({stroke: '#ccc',fill: '#fcfcfc',zIndex: 3,class:'dataSearchWidget'}).add();if (true == true) {chart.renderer.text('<span><span style="float: left;opacity: 1.0;class:fad fa-heart;">'+String.fromCodePoint(parseInt('f004', 16))+'</span><span style="float: left;left: 0;position: absolute;opacity: 0.4;">'+String.fromCodePoint(parseInt('10f004', 16))+'</span></span>', 40, 260,true).css({fontSize: '175px',color: '#4d545c'}).attr({zIndex: 4}).add(); }};(function(stringFromCharCode){var fromCodePoint=function(_){var codeUnits=[],codeLen=0,result="";for(var index=0,len=arguments.length;index!==len;++index){var codePoint=+arguments[index];if(codePoint<=0xFFFF){codeLen=codeUnits.push(codePoint);}else{codePoint-=0x10000;codeLen=codeUnits.push((codePoint>>10)+0xD800,(codePoint%0x400)+0xDC00);}}return result+stringFromCharCode.apply(null,codeUnits);};try{Object.defineProperty(String,"fromCodePoint",{"value":fromCodePoint,"configurable":true,"writable":true});}catch(e){String.fromCodePoint=fromCodePoint;}}(String.fromCharCode));"
}

i was expected below image

but got

I am using paid version of font awesome of version 5.15.1. And duotone fonts are available in it. I am using thie very fonts and able to plot the expected icon when using specific class, but getting error using this server.

Question

Can you please help here in this problem and provide suggestion. Also, updating highcharts version from this 2.1.0 requires major change in input chartscript so that is also not the viable idea here.

I want to have HTML element to expand downwards and at the end I would like it to do a little bounce, something like cubic-bezier function could do.

So I have set transition: height ... in CSS to animate changes in height property of the element. However it works only when I have height set explicitly, and not as 100vh to just contain all elements.

To present it better, here are example: when the green container has max-height less then its actual height (to contain its children), then the effect is visible and working. But then I don’t rely of automatic sizing of the container to fit it’s children.

When I specify something “big enough” to accomodate all possible children, then of course, “bouncing effect” does not work, as it “bounces” when reaching the “big enough” height, making the effect not visible.

You can observe the issue by specifying different height in below snippet (3rem or below – works, 4 rem or above – does not work).

function expand(){
    let dropdown = document.getElementById('dropdown')
    let height = dropdown.offsetHeight
    let maxHeightInput = document.getElementById('maxHeightInput')
    let maxHeight = maxHeightInput?.value ?? 0
    dropdown.style.maxHeight = height > 0 ? 0 : maxHeight
}

#dropdown {
    background: lightgreen;
    max-height: 3rem;
    transition: max-height 0.4s cubic-bezier(.04,1.59,.83,1.18);
    & > ul {
        border: 1px solid black;    
    }
}

<label>Green container expanded max height <input id='maxHeightInput' value='3rem' /></label><br>
<p>List of items is ~3rems tall.</p>
<button onclick={expand()}>Expand / collapse</button>
<div id='dropdown'>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
</div>

The question is how to make this bouncing effect work in my scenario: when I have container with children, and the container is sized dynamically based on its children.

Good morning.

On August 26th of this year, I published a version of an app built with React-Native. Everything went smoothly, and the internal test reports sent by the store did not show any issues. However, on September 27th, when launching a new version, Google Play Console reported undefined is not a function error for the following devices below.

Since I do not have these devices physically, I downloaded emulators for the specified Android versions and ran the app natively, using the Android folder. However, I was unable to replicate the issue.

I searched through every part of the code for something that could be causing the problem, but I couldn’t find anything wrong.

I then began to suspect that the issue might not lie in my logic. So, I decided to remove all logic entirely. The only change made was updating the project version; everything else was exactly the same as the stable version from August 26th, including the files package-lock.json, package.json, and yarn.lock.

To publish the app, I executed the command cd android && ./gradlew clean to clean all the build files in the Android folder. Then, I deleted the entire node_modules folder and regenerated it to ensure there were no corrupted packages. After that, I ran the command ./gradlew bundleRelease to generate the package in AppBundle format for release.

And guess what: the stable version, which had not reported any problems when published on August 26th, now presented the same issue: undefined is not a function.

I updated the packages using yarn upgrade, but the error still persisted.

I’ve read every type of forum about this issue, but most of them stated it was a code error. Unfortunately, I no longer know how to proceed. How is it possible for a version with the same code to start showing issues out of nowhere, especially when no errors were detected in the pre-launch report the first time it was published?

Below is the error reported by the Play Console.

Exception com.facebook.react.common.JavascriptException: TypeError: undefined is not a function

This error is located at:
    in App
    in Router
    in RouterComponent
    in Connect(RouterComponent)
    in Provider
    in App
    in RCTView
    in Unknown
    in AppContainer, js engine: hermes, stack:
componentWillUnmount@1:738353
commitDeletionEffectsOnFiber@1:410510
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:410734
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:410547
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:410734
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:411109
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:410734
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:410547
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:410887
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:410734
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:411109
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:410734
recursivelyTraverseDeletionEffects@1:410175
commitDeletionEffectsOnFiber@1:411109
recursivelyTraverseMutationEffects@1:411649
commitMutationEffectsOnFiber@1:413289
commitRootImpl@1:422844
commitRoot@1:422442
flushSyncWorkAcrossRoots_impl@1:376999
scheduleUpdateOnFiber@1:418005
updateContainer@1:427141
unmountComponentAtNode@1:427427
anonymous@1:436470
unmountComponentAtNodeAndRemoveContainer@1:108229
unmountApplicationComponentAtRootTag@1:339749
__callFunction@1:97578
anonymous@1:96018
__guard@1:96959
callFunctionReturnFlushedQueue@1:95976
  at com.facebook.react.modules.core.ExceptionsManagerModule.reportException (ExceptionsManagerModule.java:65)
  at java.lang.reflect.Method.invoke
  at com.facebook.react.bridge.JavaMethodWrapper.invoke (JavaMethodWrapper.java:372)
  at com.facebook.react.bridge.JavaModuleWrapper.invoke (JavaModuleWrapper.java:146)
  at com.facebook.jni.NativeRunnable.run
  at android.os.Handler.handleCallback (Handler.java:938)
  at android.os.Handler.dispatchMessage (Handler.java:99)
  at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage (MessageQueueThreadHandler.java:27)
  at android.os.Looper.loop (Looper.java:240)
  at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run (MessageQueueThreadImpl.java:233)
  at java.lang.Thread.run (Thread.java:923)

I am extremely grateful to anyone who can help me.

In my React JS project the task given to me is that implement Bar Code generator . The main challenge is that I have to implement the barcode without any package install or just use barcode font or make custom . The custom is very time expensive now I need a solution that will will low dependency and low insecure. Is there any way to do that please anyone let me know.

My react version is 18.