How to create a gem with rails 7 that packs javascripts for other projects to import

I’m upgrading my projects to rails 7. With esbuild, my projects works fine currently.

But I have lots of custom javascripts which could not be found in npm packages.

Since many projects needs these javascripts, I want to create a gem to pack them up.

My final goal is to simply add this code to my projects:

Gemfile:

gem 'my_js_lib'

application.js:

...
import 'my_js1';
import 'my_js2';
...

that I could use my own packed js libraries without copying them to each project.

When page reloads the active will disappear

I am try to add active class when user clicks the nav item. The class will be applied and when the page will redirect to another page the class will be disappered.

HTML

 <section id="sidebar">
        <a href="#" class="brand">
            <i class='bx bxs-smile'></i>
            <span class="text">Admin</span>
        </a>
        <ul class="side-menu top">
            <li class="active btn">
                <a href="index.php">
                    <i class='bx bxs-dashboard'></i>
                    <span class="text">Dashboard</span>
                </a>
            </li>
            <li class="btn">
                <a href="adminstration.php">
                    <i class='bx bxs-shopping-bag-alt'></i>
                    <span class="text">Adminstraion</span>
                </a>
            </li>
        </ul>
    </section>
    <!-- SIDEBAR -->

JS

const allSideMenu = document.querySelectorAll('#sidebar .side-menu.top li a');

allSideMenu.forEach(item=> {
    const li = item.parentElement;

    item.addEventListener('click', function () {
        allSideMenu.forEach(i=> {
            i.parentElement.classList.remove('active');
        })
        li.classList.add('active');
    })
});

The issue I’m facing is the active class will be removed when the page reloads. How to fix this issue?
Thanks in advance

How can I stop the debugger from closing immediately? (JS in VS2022)

I’m learning Javascript and using Visual Studio 2022 to run my program. I’ve used VS2022 for C++, but never for Javascript. Unlike for C++, the debugger for JS closes immediately after finishing. How can I prevent that from happening? I need to be able to see my console.log() statements being printed.

I’ve been putting a console.log() statement at the end with a breakpoint, which worked, but I’m hoping there’s a cleaner solution.

Create auto switching tab with Elementor

I’ve been trying to create a custom tab with elementor. I’ve taken two column container . The first column has a custom css class name of “tab-wrap” and the other column has a class name “content-wrap” . I have three icon list with a class name “tab” in the tab-wrap container. On the other column, I have three inner containers with a class name “box” for my content. The first inner container has another class name”first box”.I have used this code to make the custom tab. It automatically switches to the next and the correspondent content changes at the same time. but when other tabs are active, the first tab content is always visible. It is supposed to be hidden when the other tabs are active. please someone help me to solve this. Thansk in advance.

<script>
 
jQuery(document).ready(function ($) {
    let index = 0;
    let delay = 5000;
    let $tabs = $('.tab-wrap .tab');
    let $contents = $('.content-wrap .box');
    let interval = setInterval(rotate, delay);

    // Show the content of the first tab initially
    $contents.hide(); // Hide all content boxes initially
    $contents.filter('.first-box').show(); // Show the content box corresponding to the first tab initially

    $tabs.each(function (i) {
        $(this).click(function () {
            if (index !== i) {
                index = i;
                switchElement();
            }
        });
    });

    function rotate() {
        index++;
        if (index >= $tabs.length) {
            index = 0;
        }
        switchElement();
    }

    function switchElement() {
        $tabs.removeClass('active');
        let $tab = $tabs.eq(index);
        $tab.addClass('active');

        // Hide the content of the first tab before switching
        $contents.filter('.first-box').hide();

        $contents.hide(); // Hide all content boxes
        $contents.eq(index).delay(300).fadeIn(300);
    }
});




</script>
.tab::after {
  content: '';
  display: block;
  border-bottom: 3px solid #c41230;
  transform: scalex(0);
  transition: transform 0ms ease-out;
}
.tab.active::after {
  transform: scalex(1) !important;
  transform-origin: 0% 50% !important;
  transition: transform 5000ms ease-in;
  background: #000 !important;
}

.first-box{
    display: block !important;
}
.box{
    display: none;
}

enter image description here

Algolia docSearch

I need to implement Algolia DocSearch into my docusaurus project. I have got the api key and api id from the algolia. But facing challenges on what to do next. Please guide me the steps that I should follow next.

I have completed the frontend structure of the search box but not sure how to add data. How can we implement the search functionality? Do we need to send our complete data to algolia or to add some indexing, I am not sure.

How to insert a persistent div without obscuring content in a Chrome extension?

I am developing a Chrome extension where a content script, written in React (with TypeScript), inserts a div at the bottom of the window. This div spans the entire width of the window and is intended to serve as a persistent notification bar. However, I’m encountering an issue where the div obscures content on various websites, despite trying several methods to prevent this.

I’m looking for a way to ensure this div is always visible and doesn’t interfere with the page’s content, no matter the site. Here’s a simplified version of my current code:

const MyNotificationDiv = () => (
  <div style={{position: 'fixed', bottom: 0, left: 0, width: '100%', zIndex: '1000'}}>
    {/* Content */}
  </div>
);

export default MyNotificationDiv;

I’d greatly appreciate any advice on how to make this div coexist peacefully with all types of web content or if there’s a better approach to displaying a persistent bar in a Chrome extension.

Thank you in advance!

Here are the approaches I’ve attempted:

  • Using position: fixed with z-index: I’ve tried fixing the div to the bottom of the window and adjusting the z-index, but it still overlaps with some page elements.

  • Adding margin-bottom or padding-bottom to the body: I’ve attempted to push the content up, but the dynamic nature of some sites makes this unreliable.

  • Inserting the div at the top of the page: I’ve also tried placing the div at the top, but this hasn’t resolved the issue either.

In Javascript, when I type a word after a colored html tag, the typed word also gets colored like the tag by mistake. How to avoid it?

When i try to write immediately after a colored tag, then the next word is colored too. The word also gets colored if I use the space after the tag. However, the word following the tag should not be colored, because I only specified the red color of ["DIV", "H1", "P", "<", ">", "/"].

enter image description here

How can I avoid text coloring after red tags? (consider that Example1 and 2 is just an example text and that in the future I will add other tags with different colors). I would like the words typed after the html tags to be black as specified in the css, where #editor is with color: black

html

  <div id="editor" contenteditable="true" oninput="showPreview();" onchange="changeColor();">&lt;h1>This is a Heading&lt;/h1>   
    &lt;p>This is a paragraph.&lt;/p>
  </div>
    
    <h3>PREVIEW</h3>
    <div class="preview-area">
      <iframe id="preview-window"></iframe>
    </div>

css

#editor {
  width: 456px;
  height: 267px;
  padding: 10px;
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}
.statement {
  color: rgb(212, 42, 42);
}

javascript

function applyColoring(element) {
    var keywords = ["DIV", "H1", "P", "<", ">", "/"];

    var newHTML = "";
    // Loop through words
    str = element.innerText;
    (chunks = str
        .split(new RegExp(keywords.map((w) => `(${w})`).join("|"), "i"))
        .filter(Boolean)),
        (markup = chunks.reduce((acc, chunk) => {
            acc += keywords.includes(chunk.toUpperCase())
                ? `<span class="statement">${chunk}</span>`
                : `<span class='other'>${chunk}</span>`;
            return acc;
        }, ""));
    element.innerHTML = markup;
}

// CHANGE COLOR
function changeColor() {
    var editor = document.getElementById("editor");
    applyColoring(editor);

    // Set cursor position to the end of text
    var child = editor.children;
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(child[child.length - 1], 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    editor.focus();
}

function showPreview() {
var editorContent = document.getElementById("editor").innerText;
var frame = document.getElementById("preview-window");


// Create a data URL with the HTML content
var dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(editorContent);

// Set the iframe src attribute to the data URL
frame.src = dataURL;
}
changeColor()

showPreview()

Delete item from js array

I have this array and I’m trying to delete a site from it but it’s not working. I know the function is called because I have added an alert to it and it alerted.

I removed some functions from the post just to make it shorter. But I have one function that removes ites from the array and it works great. It’s just deleting a site by siteid that doesn’t work for some reason.

[
      {
        "siteId": "9843598",
        "items": [
          {
            "catNum": 9418956196,
            "title": "This is item 1",
            "qty": 1
          }
        ]
      },
      {
        "siteId": "89419111",
        "items": [
          {
            "catNum": 1231654351,
            "title": "This is item 2",
            "qty": 1
          },
          {
            "catNum": 9418956196,
            "title": "This is item 1",
            "qty": 1
          }
        ]
      }
    ]

function deleteSite(quoteCart, siteId) {
    try {
      quoteCart = quoteCart.filter((site) => site.siteId !== siteId);
      console.log("Filtered array:", quoteCart); // Check the filtered array

      updateCartDisplay();
      openWindowWithArrayContents();
    } catch (error) {
      console.error("Error in deleteSite:", error);
    }
  }

If I pressed delete on site # 9843598 I would expect the

[

  {

    "siteId": "89419111",

    "items": [

      {

        "catNum": 9418956196,

        "title": "This is item 1",

        "qty": 1

      },

      {

        "catNum": 1231654351,

        "title": "This is item 2",

        "qty": 1

      }

    ]

  }

]

shifting from employee column jan column takes time like 8 to 10 sec

I have a written a code for data entry in that my employee dropdown has 3000 values when i search employee by typing and when i select the name it displays in column then when i click shift to move to the next column it take time delay like upto 10 sec. pls guide me to resolve the issue .
i will post the code below

i tried this code

    < template >
        <
        v - layout >
        <
        v - app - bar color = "#044b93" >
        <
        template v - slot: prepend > < /template> <
        v - app - bar - title >
        <
        div >
        <
        div class = "text" > WLWF < /div> <
        div class = "text-decoration-overline" >
        Pioneering Mobility
    for 15 Years and Beyond
        <
        /div> <
        /div> <
        /v-app-bar-title>
    
        <
        template v - slot: append >
        <
        router - link to = "/home" >
        <
        v - btn class = "nav-link"
    color = "white" > Home < /v-btn> <
        /router-link> <
        /template> <
        /v-app-bar> <
        v - main >
        <
        v - container fluid >
        <
        v - col cols = "3"
    md = "4" >
        <
        v - text - field v - model = "picode" > < /v-text-field> <
        /v-col> <
        DxDataGrid: key = "gridKey"
    id = "gridContainer": data - source = "concatenatedEmployeeKeysArray": allow - column - reordering = "true": show - borders = "true"
    key - expr = "ID"
    @editing - start = "logEvent('EditingStart')"
    @init - new - row = "logEvent('InitNewRow')"
    @row - inserting = "logEvent('RowInserting')"
    @row - inserted = "logEvent('RowInserted')"
    @row - updating = "logEvent('RowUpdating')"
    @row - updated = "logEvent('RowUpdated')"
    @row - removing = "logEvent('RowRemoving')"
    @row - removed = "logEvent('RowRemoved')"
    @saving = "logEvent('Saving')"
    @saved = "logEvent('Saved')"
    @edit - canceling = "logEvent('EditCanceling')"
    @edit - canceled = "logEvent('EditCanceled')" >
        <
        DxPaging: enabled = "true" / >
        <
        DxEditing: allow - updating = "true": allow - deleting = "true": allow - adding = "true"
    mode = "row" / >
    
        <
        DxColumn: width = "400"
    data - field = "ID"
    caption = "Employee" >
        <
        DxLookup: data - source = "concatenatedKeyArray"
    display - expr = "concatenatedKey"
    value - expr = "ID"
    ref = "productLookup" / >
        <
        /DxColumn>
    
        <
        DxColumn data - field = "month1"
    caption = "JAN" / >
        <
        DxColumn data - field = "month2"
    caption = "FEB" / >
        <
        DxColumn data - field = "month3"
    caption = "MAR" / >
        <
        DxColumn data - field = "month4"
    caption = "APR" / >
        <
        DxColumn data - field = "month5"
    caption = "MAY" / >
        <
        DxColumn data - field = "month6"
    caption = "JUNE" / >
        <
        DxColumn data - field = "month7"
    caption = "JULY" / >
        <
        DxColumn data - field = "month8"
    caption = "AUG" / >
        <
        DxColumn data - field = "month9"
    caption = "SEP" / >
        <
        DxColumn data - field = "month10"
    caption = "OCT" / >
        <
        DxColumn data - field = "month11"
    caption = "NOV" / >
        <
        DxColumn data - field = "month12"
    caption = "DEC" / >
        <
        /DxDataGrid> <
        br / >
        <
        v - row >
        <
        v - col cols = "6" >
        <
        v - btn @click = "submitData"
    color = "primary" > Submit < /v-btn> <
        /v-col> <
        /v-row> <
        /v-container> <
        /v-main> <
        v - dialog width = "500"
    v - model = "dialogfinal"
    persistent >
        <
        template v - slot: activator = "{ props }" >
        <
        v - btn v - bind = "props"
    text = "Open Dialog" > < /v-btn> <
        /template>
    
        <
        template v - slot: default = "{ }" >
        <
        v - card >
        <
        v - card - text class = "text-decoration-overline1" >
        Allocations created Successfully <
        /v-card-text>
    
        <
        v - card - actions >
        <
        v - spacer > < /v-spacer>
    
        <
        v - btn text = "Close"
    @click = "closeform()" > < /v-btn> <
        /v-card-actions> <
        /v-card> <
        /template> <
        /v-dialog> <
        /v-layout> <
        /template> <
        script >
        import axios from "axios";
    const API_BASE_URL = "http://localhost:8055";
    import {
        DxDataGrid,
        DxColumn,
        DxEditing,
        DxPaging,
        DxLookup,
    } from "devextreme-vue/data-grid";
    export default {
        components: {
            DxDataGrid,
            DxColumn,
            DxEditing,
            DxPaging,
            DxLookup
        },
        data() {
            return {
                gridKey: 1,
                searchInput: "",
                employee: [],
                concatenatedKeyArray: [],
                selectedEmployee: null,
                picode: "",
                events: [],
                propArray: [],
                employeeArray1: [],
                fullNameAndIpnArray: [],
                prdoctid: "",
                allocemp: [],
                uniqueempIds: [],
                concatenatedEmployeeKeysArray: [],
                dialogfinal: false,
                concatenatedKeysArray: [],
                uniqueConcatenatedKeysArray: [],
            };
        },
    
        methods: {
            logEvent(eventName) {
                this.events.unshift(eventName);
            },
            clearEvents() {
                this.events.value = [];
            },
            submitData() {
                this.checkSameValues();
                const columnSums = {};
                const columns = [
                    "month1",
                    "month2",
                    "month3",
                    "month4",
                    "month5",
                    "month6",
                    "month7",
                    "month8",
                    "month9",
                    "month10",
                    "month11",
                    "month12",
                ];
    
                columns.forEach((column, index) => {
                    columnSums[`month${index + 1}`] =
                        this.concatenatedEmployeeKeysArray.reduce((sum, employee) => {
                            return sum + (parseFloat(employee[column]) || 0);
                        }, 0);
                });
                const resultArray = [];
                const productValues = this.concatenatedEmployeeKeysArray.map(
                    (employee) => employee.ID
                );
                const currentYear = new Date().getFullYear();
                console.log(productValues);
    
                this.concatenatedEmployeeKeysArray.forEach((employee, empIndex) => {
                    columns.forEach((column, index) => {
                        const month = index + 1;
                        const prdId = this.prdoctid;
                        const empId = productValues[empIndex];
                        const year = currentYear;
                        const allocationpc = parseFloat(employee[column]) || 0;
    
                        const entry = {
                            empId,
                            prdId,
                            year,
                            month,
                            allocationpc
                        };
                        resultArray.push(entry);
                    });
                });
                const allocmMap = new Map();
                this.allocemp.forEach((item) => {
                    const key = `${item.empId}_${item.prdId}_${item.year}_${item.month}`;
                    allocmMap.set(key, item);
                });
                const mergedArray = resultArray.map((item) => {
                    const key = `${item.empId}_${item.prdId}_${item.year}_${item.month}`;
                    const allocItem = allocmMap.get(key);
                    const mergedItem = {
                        …
                        item,
                        …allocItem
                    };
                    if (mergedItem.id === undefined) {
                        delete mergedItem.id;
                    }
                    if (item.allocationpc !== undefined) {
                        mergedItem.allocationpc = item.allocationpc;
                    }
    
                    return mergedItem;
                });
                const endpoint = `${API_BASE_URL}/allocation`;
    
                axios
                    .post(endpoint, mergedArray)
                    .then((response) => {
                        console.log("success", response);
                        this.concatenatedKeysArray = mergedArray.map((item) => {
                            const empId = item.empId;
                            const concatenatedItem = this.concatenatedKeyArray.find(
                                (concatItem) => concatItem.ID === empId
                            );
    
                            if (concatenatedItem) {
                                return concatenatedItem.concatenatedKey;
                            }
    
                            return null;
                        });
    
                        this.uniqueConcatenatedKeysArray = […new Set(this.concatenatedKeysArray), ];
    
                        this.dialogfinal = true;
                    })
                    .catch((error) => {
                        console.error("Error:", error);
                    });
            },
            closeform() {
                this.$router.push({
                    path: "/home",
                });
            },
            checkSameValues() {
                const productValues = this.concatenatedEmployeeKeysArray.map(
                    (employee) => employee.ID
                );
                const sameValues =
                    productValues.length > 1 &&
                    productValues.every((value) => value === productValues[0]);
    
                if (sameValues) {
                    this.snackbarproduct = true;
                } else {
                    console.log("different values");
                }
            },
            parseRouteData() {
                this.propArray = JSON.parse(
                    this.$route.query.rowData || "{}",
                    (key, value) => {
                        if (key === "pidtcode") {
                            this.picode = String(value);
                        }
                        if (key === "id") {
                            this.prdoctid = String(value);
                        }
                        return value;
                    }
                );
            },
            fetchEmpData() {
                axios
                    .get(`${API_BASE_URL}/employee`, {})
                    .then((response) => {
                        console.log("API Response:", response.data);
                        this.concatenatedKeyArray = response.data.map((response) => {
                            const {
                                id,
                                firstName,
                                lastName,
                                ipn
                            } = response;
                            const fullName = `${firstName} ${lastName}`;
                            const concatenatedKey = `${fullName} - ${ipn}`;
    
                            return {
                                concatenatedKey,
                                ID: id,
                            };
                        });
                    })
                    .catch((error) => {
                        console.error("Error:", error);
                    });
            },
            fetchAllocProduct() {
                axios
                    .get(`${API_BASE_URL}/allocation/product/${this.prdoctid}`, {})
                    .then((response) => {
                        console.log(response.data);
                        this.allocemp = response.data;
    
                        this.uniqueempIds = […new Set(response.data.map((item) => item.empId)), ];
    
                        return Promise.all(
                            this.uniqueempIds.map((empId) =>
                                axios.get(`${API_BASE_URL}/employee/${empId}`)
                            )
                        );
                    })
                    .then((responses) => {
                        this.concatenatedEmployeeKeysArray = responses.map((response) => {
                            const {
                                id,
                                firstName,
                                lastName,
                                ipn
                            } = response.data;
                            const fullName = `${firstName} ${lastName}`;
                            const concatenatedKey = `${fullName} - ${ipn}`;
    
                            const allocationData = this.allocemp.filter(
                                (item) => item.empId === id
                            );
    
                            const monthAllocations = allocationData.map(
                                (allocation) => allocation.allocationpc
                            );
    
                            return {
                                concatenatedKey,
                                ID: id,
                                empId: id,
                                …monthAllocations.reduce((acc, val, index) => {
                                    acc[`month${index + 1}`] = val;
                                    return acc;
                                }, {}),
                            };
                        });
                        this.gridKey += 1;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
        },
    
        created() {
            this.parseRouteData();
            this.fetchEmpData();
            this.fetchAllocProduct();
        },
    }; <
    /script>
    
    <
    style >
        .text - decoration - overline1 {
            color: black;
            font - size: 14 px;
            font - family: system - ui,
            "Segoe UI",
            "Open Sans",
            "Helvetica Neue",
            sans - serif;
        } <
        /style>
     

Problems with closures

function asyncFunction(value, callback) {
    setTimeout(function () {
        console.log(value);
        callback();
    }, 1000);
}

for (let i = 0; i < 5; i++) {
    asyncFunction(i, function () {
        console.log(i);
    });
}

The output of this code is
0
5
1
5
2
5
3
5
4
5

I didn’t figure out why there was 0 1 2 3 4 output.
Why is the output in setTimeout different from the output in callback?
And hope to be explained by the following code comparison

for (var i = 1; i <= 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i);
}

How to put png image over openstreemap map in wix site that the png image will be integral part of the map?

first in general:

I want to put a weather radar image with clouds over openstreetmap map of my country.
this is the png image the radar image:

radar image

and this is how it looks like in the Israeli official meteorologist official website:
it’s not openstreemap but the image is part of the map and i can zoom in/out.

this is the same concept I want to make in my wix site:

png image on map

and after zoom in:

png image on map

this is the Israeli official weather website so you can see what I mean by adding the image to the map the idea: https://ims.gov.il/he/RadarSatellite

and this is my wix website, there is nothing much on the site then the openstreemap map and the image: https://chocolade13091972.wixsite.com/chocolade-imagine

In wix I uploaded to my site png image and then with html and javascript I can add openstreemap map to my site and then i can drag over the png image the problem is when i publish my site the image is overlay above the map and it’s not part of the map.

the result is for example when I zoom in/out the image is not zooming in/out with the map.
that’s why I need to make somehow that the png image will be part of the map and yet to make the png a bit transparent so if I zoom in a lot I will see the map a bit through the image.

this is the code for adding the openstreemap map to the wix site using the embed html in wix and also this code take the png image and try to make it integral part of the map:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Map with PNG Image</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
   <style>
      body, html, #map {
         height: 100%;
         margin: 0;
      }
   </style>
</head>
<body>
   <div id="map"></div>

   <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
   <script>
      var map = L.map('map').setView([32.00718, 34.81487], 10);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      // Define the bounds of your image (latitudes and longitudes)
      var bounds = [[32.00718, 34.81487], [33, 39.7]];

      // Create an image overlay and add it to the map
      var imageUrl = 'https://static.wixstatic.com/media/f7ee46_b3c10d0bb92644aaa9ef18bfbb3df0ee~mv2.png';
      var imageBounds = bounds;

      L.imageOverlay(imageUrl, imageBounds).addTo(map);
   </script>
</body>
</html>

but the result is not even close to the original png image and not as it should be on the map:

image on map and the image is part of the map but the image is not fitting as it should be

and if I zoom out in my wix website to see my country you can see the clouds of the radar png image somewhere far on the right.

the png image is not positioned on the map as it should be

my problem is first how to make the image to be an integral part of the map? maybe the code I provided here is doing the job.

but the most problem is how to put the image to fit my country Israel? same as in the official website they did.

Detecting if a device is an Android

I want to be able to detect if the device my React app is running on is an Android. I have tried the two implementations below, but whenever I open the developer tools, the check is fooled and thinks the computer is an Android device. Is there a way around this?

import { UAParser } from "ua-parser-js";

export function isAndroidDevice() {
  const parser = new UAParser();
  const uaResult = parser.getResult();
  return !!uaResult.os.name?.includes("Android");
}
  const isAndroidDevice = () => {
    const userAgent = navigator.userAgent.toLowerCase();
    return userAgent.includes('android');
  };

Component ‘RCTView’ re-registered direct event ‘topClick’ as a bubbling event

`react native 0.73.1

node 20.10.0

NMapsMap 3.17.0

I installed nmap using npm i https://github.com/zerocho/react-native-naver-map

It runs normally on Android devices, but builds on ios simulator, but the following error occurs

Component 'RCTView' re-registered direct event 'topClick' as a bubbling event

RCTModuleConstantsForDestructuredComponent
RCTUIManager.m:1533
moduleConstantsForComponentData
__28-[RCTUIManager getConstants]_block_invoke
__NSDICTIONARY_IS_CALLING_OUT_TO_A_BLOCK__
-[__NSDictionaryM enumerateKeysAndObjectsWithOptions:usingBlock:]
-[RCTUIManager getConstants]
-[RCTUIManager constantsToExport]
-[RCTModuleData gatherConstantsAndSignalJSRequireEnding:]
-[RCTModuleData exportedConstants]
facebook::react::RCTNativeModule::getConstants()
facebook::react::ModuleRegistry::getConfig(std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::react::JSINativeModules::createModule(facebook::jsi::Runtime&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::react::JSINativeModules::getModule(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&)
facebook::react::JSIExecutor::NativeModuleProxy::get(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&)
facebook::jsi::DecoratedHostObject::get(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&)
facebook::hermes::HermesRuntimeImpl::JsiProxy::get(hermes::vm::SymbolID)
hermes::vm::JSObject::getComputedWithReceiver_RJS(hermes::vm::Handle<hermes::vm::JSObject>, hermes::vm::Runtime&, hermes::vm::Handle<hermes::vm::HermesValue>, hermes::vm::Handle<hermes::vm::HermesValue>)
hermes::vm::CallResult<hermes::vm::HermesValue, (hermes::vm::detail::CallResultSpecialize)2> hermes::vm::Interpreter::interpretFunction<false, false>(hermes::vm::Runtime&, hermes::vm::InterpreterState&)
hermes::vm::Runtime::interpretFunctionImpl(hermes::vm::CodeBlock*)
hermes::vm::Runtime::runBytecode(std::__1::shared_ptr<hermes::hbc::BCProviderBase>&&, hermes::vm::RuntimeModuleFlags, llvh::StringRef, hermes::vm::Handle<hermes::vm::Environment>, hermes::vm::Handle<hermes::vm::HermesValue>)
facebook::hermes::HermesRuntimeImpl::evaluatePreparedJavaScript(std::__1::shared_ptr<facebook::jsi::PreparedJavaScript const> const&)
facebook::hermes::HermesRuntime::evaluateJavaScriptWithSourceMap(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::hermes::HermesRuntimeImpl::evaluateJavaScript(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::jsi::RuntimeDecorator<facebook::jsi::Runtime, facebook::jsi::Runtime>::evaluateJavaScript(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::jsi::WithRuntimeDecorator<facebook::react::(anonymous namespace)::ReentrancyCheck, facebook::jsi::Runtime, facebook::jsi::Runtime>::evaluateJavaScript(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::react::JSIExecutor::loadBundle(std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)
facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1::operator()(facebook::react::JSExecutor*)
decltype(std::declval<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1&>()(std::declval<facebook::react::JSExecutor*>())) std::__1::__invoke[abi:v160006]<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1&, facebook::react::JSExecutor*>(facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1&, facebook::react::JSExecutor*&&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1&, facebook::react::JSExecutor*>(facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1&, facebook::react::JSExecutor*&&)
std::__1::__function::__alloc_func<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1, std::__1::allocator<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1>, void (facebook::react::JSExecutor*)>::operator()[abi:v160006](facebook::react::JSExecutor*&&)
std::__1::__function::__func<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1, std::__1::allocator<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$_1>, void (facebook::react::JSExecutor*)>::operator()(facebook::react::JSExecutor*&&)
std::__1::__function::__value_func<void (facebook::react::JSExecutor*)>::operator()[abi:v160006](facebook::react::JSExecutor*&&) const
std::__1::function<void (facebook::react::JSExecutor*)>::operator()(facebook::react::JSExecutor*) const
facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8::operator()() const
decltype(std::declval<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8&>()()) std::__1::__invoke[abi:v160006]<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8&>(facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8&>(facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8&)
std::__1::__function::__alloc_func<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8, std::__1::allocator<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8>, void ()>::operator()[abi:v160006]()
std::__1::__function::__func<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8, std::__1::allocator<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$_8>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()[abi:v160006]() const
std::__1::function<void ()>::operator()() const
facebook::react::tryAndReturnError(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::tryFunc(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1::operator()() const
decltype(std::declval<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>()()) std::__1::__invoke[abi:v160006]<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&)
std::__1::__function::__alloc_func<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1, std::__1::allocator<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1>, void ()>::operator()[abi:v160006]()
std::__1::__function::__func<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1, std::__1::allocator<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()[abi:v160006]() const
std::__1::function<void ()>::operator()() const
invocation function for block in facebook::react::RCTMessageThread::runAsync(std::__1::function<void ()>)
__CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__
__CFRunLoopDoBlocks
__CFRunLoopRun
CFRunLoopRunSpecific
+[RCTCxxBridge runRunLoop]
__NSThread__start__
_pthread_start
thread_start


clean build folder
rm -rf node_modules
rm -rf package-lock.json
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install
pod install

It all didn’t work`