I’ve been creating a react native component library since a month now, and I think it’s ready to be posted as a package on npm. So I pushed it on github, I npm publish, everything’s fine.

To publish it, I replaced my index.ts:

// index.ts
import createRComps from 'Base.tsx';

export default createRComps; // That's the only object I need to export because it calls the others from itself

I also tried to use create-react-native-library on another copy of this repo, which didn’t get any more success.

Now, I create another react native project to test my new library : I install my library with npm i react-native-ready-comps, add some of my lib’s code in it :

export default function App() {
  const RComps = createRComps();  // my lib's main function

  return (
    <RComps.Title bold>Hello world !</RComps.Title>    // one of my lib's components
  );
}

But when I launch it with metro (npx react-native run-android && npx react-native start), I get this error :

 ERROR  TypeError: Cannot read property 'createNode' of null, js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

I know it comes from my lib, but I didn’t encoutered this problem when I was working on it. Maybe did I miss something when publishing it ?

Can you please explain me what I did wrong ? And if you have resources on how to export a react native component library, I’dd be glad if you shared them ! Everything I found on Google/Stack couldn’t help me.

Thanks a lot !

PS : here is the repository of my library, if you want to see the code. As soon as it’s a project problem, I cannot create a minimal reproducible example…

(very weak level in frontend)

I basically follow this tuto :
https://youtu.be/CdDXbvBFXLY
the coder uses a code slightly different that what we have now on Google Platform, instead of

<script async
    src="https://maps.googleapis.com/maps/api/js?keyYOURKEY&callback=initMap">
</script>

she uses

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&map_ids=YOURMAPID&callback=initMap&v=weekly"
    defer
  ></script>

Anyway, doesn’t work for me.

Now on the Google documentation they mention Map Id’s feature only on the function Initmap.
https://developers.google.com/maps/documentation/get-map-id

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

here is my test page. It actually doesn’t display my custom map, only the reel Google map, because of the coordinates I put in :
https://eostation.xyz/

<script> function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 69.4865, lng: 88.3972 },
        zoom: 13,
        mapID: '6c69da475e7f7301'
      });
      let marker = new google.maps.Marker({
      position: talnakh,map: map});
}

I don’t really understand what is a InitMap

In other words, I need the correct syntaxe to call my custom map and not Google map.
When I say “custom map”, i don’t mean a map with markers, i don’t mean a trail of landmarks done on Google Map, I’m talking about a fictionnal map, for a game, using GoogleMap API.

Thank you

I have a variable called jQuery331047472578992701741 in the global scope, and I’m trying to figure out where it comes from

I tried this answer https://stackoverflow.com/a/45486030/61327 but it shows only the jQuery variable and not the one with numbers on it

How can I figure out where the jQuery331047472578992701741 variable is coming?

I’m having an issue with the Google Maps Javascript API where it fails to zoom in on a point because it is passing back the error in the title. I checked previous questions, and they say that this is an issue with using a deprecated version of the MarkerClusterer.js, but it was working fine until yesterday at the latest.

The function in question that’s throwing the error is below, the specific line is noted by comment.

google.maps.event.addListener(this.map_, 'zoom_changed', function() {
    // Determines map type and prevent illegal zoom levels
    var zoom = that.map_.getZoom();
    var minZoom = that.map_.minZoom || 0;
    var maxZoom = Math.min(that.map_.maxZoom || 100,
                         that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom);  //HERE
    zoom = Math.min(Math.max(zoom,minZoom),maxZoom);

    if (that.prevZoom_ != zoom) {
      that.prevZoom_ = zoom;
      that.resetViewport();
    }
  });

Naturally, this means that that.map_.mapTypes[that.map_.getMapTypeId()] is returning undefined, but no idea what to do about that.

I access the library by link, which is below. Is there a way to acquire the version that was up and running a few days ago, since that version wasn’t failing (as far as we know)?

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

I have tried other links to different versions, including the rawgit that was linked in this thread. I have also tried manually definiing maxZoom in the options as has been suggested by other threads, but none of the suggestions have solved the problem.

            var mcOptions = {
                
                styles: clusterStyles,
                maxZoom: 15
                
            };

            markerCluster = new MarkerClusterer(map, markers,mcOptions);

I would like to programmatically simplify the following named imports and assignments in order to avoid repetition and was wondering if there is a way to do this with the help of a loop.

What I have at the moment:

import { globalLocale } from './i18n'

let locale, dateLocale

if (globalLocale === 'de-DE') {
  const { dateDeDE, deDE } = await import('node_module')

  locale = deDE
  dateLocale = dateDeDE
} else if (globalLocale === 'fr-FR') {
  const { dateFrFR, frFR } = await import('node_module')

  locale = frFR
  dateLocale = dateFrFR
} else {
  const { dateEnUS, enUS } = await import('node_module')

  locale = enUS
  dateLocale = dateEnUS
}

Is it possible to summarize the above with the help of a loop like this:

import { globalLocale } from './i18n'

let locale, dateLocale

const locales = {
  'de-DE': ['deDE', 'dateDeDE']
  'fr-FR': ['frFR', 'dateFrFR']
  'en-US': ['enUS', 'dateEnUS']
}

for (const lang in locales) {
  if (Object.prototype.hasOwnProperty.call(locales, lang)) {
    if (globalLocale === lang) {
      const { [locales[lang][0]]: currentLocale, [locales[lang][1]]: currentDateLocale  } = await import('node_module')

      locale = currentLocale
      dateLocale = currentDateLocale
    }
  }
}

I want to create summary box like for example sales order summary box. In that box I have to show these fields. How we can create this design? Please Help!

field1

field2

field3

field4

field5

field6

field7

Total

I’m trying it with this one, but sometimes the .click() just automaticly does the command not waiting for actual click.

var x = 0; 

if ($('#business').click() && (x = 0)) {
  $('#business').css('height', '500px');
  x = 1;
} else if ($('#business').click() && (x = 1)) {
  $('#business').css('height', '100px');
  x = 0;
}

I can resize it with the below code, but unfortunately dont know how to change back on click again.

$('#business').click(function(){
  $('#business').css('height', '500px')
})

This little situation in JavaScript was driving me crazy. The contents of the SQL string are unimportant. However, the line I commented as [1] simply was not executing. Other lines after it were executing. I tried to power past the problem by duplicating the line in case there was something happening of the form “this line casts a shadow on the line after it”. No help. The debugger would not stop for single stepping on lines [1] or [2] and condition and values were coming up undefined.

  var temp = sqlConditionFromChoices(spec)
  var sql = `
  SELECT teams.name FROM teams
  JOIN events ON events.hometeamuuid = teams.id
  `
  [condition, values] = temp  // [1]
  [condition, values] = temp  // [2]

Solution: Add a couple of semicolons.

  var temp = sqlConditionFromChoices(spec)
  var sql = `
  SELECT teams.name FROM teams
  JOIN events ON events.hometeamuuid = teams.id
  `;
  [condition, values] = temp;  // [1]
  [condition, values] = temp  // [2]

All lines executed. But why? Can someone explain what hidden rule was allowing the SQL line to devour the lines following? Does it have something to do with backquoted strings?

I’m not sure what I am doing wrong, I checked also most other similar questions on Stack Overflow, but nothing seem to work for me.

I’m trying to get bootstrap 5.2.3 javascript to work to get a dropdown menu. I’m trying to do this with using importmaps, which looks like the easiest way (I tried also with esbuild with no success).

here’s my import maps (bootstrap comes from jsdelivr as I understand the version on yarn has troubles with popper):

pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/lib/index.js"

here’s my app/javascript/application.js:

import "@hotwired/turbo-rails"
import "controllers"
import "popper"
import "bootstrap"

here’s my relevant part from app/views/layouts/application.html.erb

  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
  <% if Rails.env.development? %>
  <%= javascript_include_tag "hotwire-livereload", defer: true %>

here’s my app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js

here’s the relevant html header as generated by this configuration:

  <link rel="stylesheet" href="/assets/application-340caa07ce1bbb3e424a11977f38b20d7ad5bcd57480d126430e8962eb772287.css" data-turbo-track="reload">
  <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-43b3188fdbcd45d694dc59d1f446d56b6a7895097320f451e1f8b34080dfcd63.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js",
    "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.js",
    "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/lib/index.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/current_link_controller": "/assets/controllers/current_link_controller-370b5b9f12a48b3c3c34f79e6d2782d26737770d0459437000dd110a50aead36.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
  }
}</script>
<link rel="modulepreload" href="/assets/application-43b3188fdbcd45d694dc59d1f446d56b6a7895097320f451e1f8b34080dfcd63.js">
<link rel="modulepreload" href="/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js">
<link rel="modulepreload" href="/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js">
<script src="/assets/es-module-shims.min-606ae9c3279013fe751cee30f719a592f759e705edb66496812f3d9dbce3d850.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
  <script src="/assets/hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js" defer="defer"></script>

my gemfile contains:

# Use Sass to process CSS
gem 'bootstrap', '~> 5.2.3'
gem 'sassc-rails', '2.1.2'

I also don’t understand why bootstrap and popper seem to be bundled in the application.css, rather than being listed in the includes.

I’m trying to animate a div with a translate3D, it’s working perfectly everywhere except on webkit-mobile where the property is well interpreted but the div goes directly to the endpoint without any delay.

I tried to use the webkit transition property without any difference and the debugger is telling me that everything should work.

Please tell me you know how to solve this

JS duration is around 1000ms

function setTransform(x, y, deg, duration) {
    current.style.transform = `translate3d(${x}px, ${y}px, 0) rotate(${deg}deg)`
    likeText.style.opacity = Math.abs((x / innerWidth * 2.1))
    likeText.className = `is-like ${x > 0 ? 'like' : 'nope'}`
    if (duration) {
      current.style.transition = `transform ${duration}ms`
      current.style.webkitTransition = `transform ${duration}ms`
      // debugger;
    }
}

CSS of the “current” element

.card {
    position: absolute;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: #f1f1f1;
    border-radius: 10px;
    user-select: none;
    cursor: pointer;
    overflow-y: scroll;
    touch-action: none;
    flex-direction: column;
}

I am trying to get the width of an element to be able to set width of another element EXACTLY as big as the first one. The problem I am facing is that different broswers seem to give me different results, no matter the method I am using.

Basically I have an input field which I want to set to the size of the selected option. I use the following JS which fundamentally works fine:

var inputFields = document.querySelectorAll(".my-input-field");

// Resize on change
inputFields.forEach(function(element) {
    element.addEventListener("change", function() {
        resizeSelect(element);
    });
});

function resizeSelect(sel) {
    let tempOption = document.createElement('option');
    tempOption.textContent = sel.options[sel.selectedIndex].textContent;

    let tempSelect = document.createElement('select');
    tempSelect.style.visibility = "hidden";
    tempSelect.style.position = "fixed"
    tempSelect.appendChild(tempOption);

    sel.after(tempSelect);
    sel.style.width = (parseInt(window.getComputedStyle(tempSelect).width) - 25) + 'px';
    tempSelect.remove();

}

In this case I use window.getComputedStyle(tempSelect).width to get the width which gives me 201px in Firefox and 196px in Edge (I haven’t tried more browsers yet). Where is this difference coming from?

I also tried to use tempSelect.offsetWidth and tempSelect.getBoundingClientRect()['width] with the same result.

Is there a browser independent solution that gives me the exact width of an element?

**I wonder how can I run the emit in the App.vue file if all of the input fields of a multistep form are filled? I’ve written the logic but I can’t get the final block displayed in the end when all of the fields are filled.

https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Button.vue

<template>
  <button class="btn" @click="submit">Submit</button>
</template>

<script>
export default {
  methods: {
    submit() {
      if (
        this.firstName !== "" &&
        this.lastName !== "" &&
        this.paymentAmount !== "" &&
        this.accountNumber !== ""
      ) {
        this.$emit("final");
      } else {
        alert("please fill the required fields");
      }
    },
  },
};
</script>

<style scoped>
.btn {
  padding: 10px 30px;
}
</style>

**

I load a video to webGL:

  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

The video has a part with alpha=0.0 but rgb != 0.0 (for next blending).
Inside the shader I see rgb = 0.0.
Where were the colors discarded and who did it?

video in format .webm with codec VP8.

I have multi-select dropdown with 3000 tasks loaded from a database. Many tasks can be assigned to a user and I want to have the option ‘Select all’, but the front end is the easy part.

My Laravel database structure is the following:
I have a table with all of the tasks and a table named user_has_task where I insert every assigned task of the user. Then I use global scopes to filter the tasks accessible by the user.

But the question is what approach should I use – I can insert all 3000 tasks as new records in the user_has_task (imagine having 100 users who all have access to every task, the table will become very big 100*3000 = 300000 records) or I could insert some specific single record that tells the code that this user has access to every task (but this way I will lose the ability to remove specific assigned tasks from the user (imagine assigning 3000 tasks but you want to removed 1 of the tasks from this user))

I’m struggling with something about WebSockets and I can’t figure out why.

A bit more context

On this page, there is a Web Socket that is called “notify.bubble.is” that is provided by Bubble, a no-code tool that allows you to build web applications without code.

Existing Web Socket

I’d like to listen to the messages coming from the server (and especially one that is “has-last-change-flusk-privacy…”) and intercept them.

The problem

I tried several things in order to listen to this WebSocket :

• Writing function ‘onmessage’ on the window.WebSocket object to log the message into the console (did not work)
• Creating a new WebSocket and connect it to the same address as the existing one (wss://notify.bubble.is) but it receives no messages
• Overriding prototype of window.WebSocket object to rewriting the ‘onmessage’ function (did also not work)
• Adding an EventListener to the document with event ‘onmessage’ but it receives no messages

So I’m a bit confused…
I’m 99% sure there is a way to fetch these messages, and I think you guys could have wonderful and maybe out-of-the-box ideas (or maybe it’s very easy and I’m just so bad)!

If you need more details, more info, or anything… just ask and I’ll answer as soon as I can.
Thanks, guys! 🙂