Category: javascript

I am trying to set up Firebase in a React Native project using the Firebase Modular SDK (version 9+). However, I am encountering the following error:

Property ‘apps’ does not exist on type ‘(options: FirebaseAppOptions, name?: string | undefined) => FirebaseApp’.

I installed all the NPM packeges, made a .env file and changed the babel.config.js

Initialized Firebase in a utility file (firebase.ts

import { initializeApp, getApps, getApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { API_KEY, AUTH_DOMAIN, PROJECT_ID, STORAGE_BUCKET, MESSAGING_SENDER_ID, APP_ID } from '@env';

const firebaseConfig = {
  apiKey: API_KEY,
  authDomain: AUTH_DOMAIN,
  projectId: PROJECT_ID,
  storageBucket: STORAGE_BUCKET,
  messagingSenderId: MESSAGING_SENDER_ID,
  appId: APP_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export const firebaseAuth = getAuth(app);
export const firebaseFirestore = getFirestore(app);

Tried everything i could but i have no clue anymore.

I’m working on a simple web gallery with two modes: standard (alternating) and before and after slider mode. The goal is that when switching between these two modes with “w” key, the gallery should continue from the same image it was displayed, just with a different mode, the problem is when on image number 3 and 4 in standard mode and switching to the slider mode the images are black and have to go back to first two images but switching from first two images works, I assume it has to do something with slider overlaying two images over another, now when switching other way around when on first image pair in slider mode switching goes to first image, that’s good, but when switching on second pair it goes to after image of first image instead of 2nd before image

To recrate just create two folders named “1 before” and “1 after” put two jpg images in each folder named “1” and “2” put them into the same folder as html.

let mode = 'alternating'; // Current mode ('alternating' or 'slider')
let currentImageIndex = 0; // Keep track of the current color index across modes
const alternating = ["#FF5733", "#33FF57", "#3357FF", "#57FF33"]; // Color values for alternating mode
const slider = ["#FF5733", "#33FF57"]; // Color values for slider mode
const galleryImg = document.getElementById("galleryImg");
const beforeImg = document.getElementById("beforeImg");
const afterImg = document.getElementById("afterImg");
const sliderElement = document.querySelector(".slider");
const menu = document.getElementById("menu");

// Update the gallery colors based on the current mode and index
function updateGallery() {
    if (mode === 'alternating') {
        galleryImg.style.backgroundColor = alternating[currentImageIndex]; // Use the current index to set the color
    } else {
        // Use the current index for slider mode (index is shared)
        beforeImg.style.backgroundColor = slider[currentImageIndex]; // Swap before and after colors
        afterImg.style.backgroundColor = slider[currentImageIndex];
    }
}

// Toggle between alternating and slider modes
function toggleMode() {
    mode = mode === 'alternating' ? 'slider' : 'alternating'; // Toggle mode
    document.querySelector(".mode-alternating").style.display = mode === 'alternating' ? 'flex' : 'none';
    document.querySelector(".mode-slider").style.display = mode === 'slider' ? 'flex' : 'none';
    updateGallery(); // Ensure the same color continues in the new mode
}

// Navigate through colors while keeping index synced across modes
function navigate(next) {
    const length = mode === 'alternating' ? alternating.length : slider.length; // Use appropriate length
    currentImageIndex = (currentImageIndex + (next ? 1 : -1) + length) % length; // Update index cyclically
    updateGallery(); // Refresh gallery to reflect the updated index
    resetSlider(); // Reset slider for slider mode
}

// Show or hide the menu
function toggleMenu() {
    menuVisible = !menuVisible;
    menu.style.display = menuVisible ? 'block' : 'none';
}

// Update slider and after image clip based on mouse position
document.querySelector(".mode-slider").addEventListener('mousemove', e => {
    const clip = Math.min(Math.max(e.clientX / window.innerWidth * 100, 0), 100); // Percent position
    afterImg.style.setProperty('--clip', `${clip}%`); // Adjust after image clip
    sliderElement.style.left = `${clip}%`; // Move slider
});

// Reset slider to fully reveal after color
function resetSlider() {
    sliderElement.style.left = '100%'; // Reset slider to far right
    afterImg.style.setProperty('--clip', '100%'); // Reveal after color completely
}

// Keyboard controls for toggling modes and navigation
document.addEventListener('keydown', e => {
    if (e.key === 'w') toggleMode(); // Toggle mode
    if (e.key === 'ArrowRight') navigate(true); // Navigate to next color
    if (e.key === 'ArrowLeft') navigate(false); // Navigate to previous color
    if (e.key === 'r') toggleMenu(); // Toggle menu visibility
});

// Initialize the gallery on page load
updateGallery();

/* General page styling */
body {
  margin: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: sans-serif;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.after {
  clip-path: polygon(0 0, 0 100%, var(--clip, 100%) 100%, var(--clip, 100%) 0);
}

/* Shows part of after color */
.slider {
  position: absolute;
  width: 10px;
  background: #fff;
  cursor: col-resize;
  top: 0;
  bottom: 0;
  left: var(--clip, 100%);
  transform: translateX(-50%);
}

#menu {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  display: none;
}

<div class="fullscreen mode-alternating">
  <div id="galleryImg" style="background-color: transparent;"></div> <!-- Color for alternating mode -->
</div>
<div class="fullscreen mode-slider" style="display: none;">
  <div id="beforeImg" class="before" style="background-color: transparent;"></div> <!-- Before color in slider mode -->
  <div id="afterImg" class="after" style="background-color: transparent; --clip: 100%;"></div> <!-- After color in slider mode -->
  <div class="slider"></div> <!-- Draggable slider -->
</div>
<div id="menu">Menu: W - Toggle, R - Menu, Arrows - Navigate</div>

I’m following this tutorial which is as old as 2021:

https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react

But I got this error:

ERROR
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ModalHeader`.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ModalHeader`.
    at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:14142:24)
    at createFiberFromElement (http://localhost:3000/static/js/bundle.js:14153:12)
    at reconcileChildFibersImpl (http://localhost:3000/static/js/bundle.js:10250:336)
    at http://localhost:3000/static/js/bundle.js:10308:31
    at reconcileChildren (http://localhost:3000/static/js/bundle.js:11681:47)
    at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:11792:5)
    at beginWork (http://localhost:3000/static/js/bundle.js:12404:16)
    at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:7745:14)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:14989:93)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:14883:38)

I imported “bootstrap modal” in a file called “modal.js”:

Modal.js

import React, { Component } from "react";

import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Form,
  FormGroup,
  Input,
  Label,
} from "reactstrap";

export default class CustomModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeItem: this.props.activeItem,
    };
  }

  handleChange = (e) => {
    let { name, value } = e.target;

    if (e.target.type === "checkbox") {
      value = e.target.checked;
    }

    const activeItem = { ...this.state.activeItem, [name]: value };

    this.setState({ activeItem });
  };

  render() {
    const { toggle, onSave } = this.props;

    return (
      <Modal isOpen={true} toggle={toggle}>
        <ModalHeader toggle={toggle}>Todo Item</ModalHeader>
        <ModalBody>
          <Form>
            <FormGroup>
              <Label for="todo-title">Title</Label>
              <Input
                type="text"
                id="todo-title"
                name="title"
                value={this.state.activeItem.title}
                onChange={this.handleChange}
                placeholder="Enter Todo Title"
              />
            </FormGroup>
            <FormGroup>
              <Label for="todo-description">Description</Label>
              <Input
                type="text"
                id="todo-description"
                name="description"
                value={this.state.activeItem.description}
                onChange={this.handleChange}
                placeholder="Enter Todo description"
              />
            </FormGroup>
            <FormGroup check>
              <Label check>
                <Input
                  type="checkbox"
                  name="completed"
                  checked={this.state.activeItem.completed}
                  onChange={this.handleChange}
                />
                Completed
              </Label>
            </FormGroup>
          </Form>
        </ModalBody>
        <ModalFooter>
          <Button
            color="success"
            onClick={() => onSave(this.state.activeItem)}
          >
            Save
          </Button>
        </ModalFooter>
      </Modal>
    );
  }

}

The whole problem as it seems is in an outdated “modal”. What’s the solution to this?

I have a datetime-input in a HTML form with step=”1″. It correctly shows the seconds in the UI and when the user opens the picker, they can select seconds. However, when retrieving the value of this input with JavaScript, seconds are not retrieved if they are “00”.

Example:

<input type="datetime-local" id="creation-start" step="1" value="2025-02-12T09:05:00" name="creationDateStart">
<input type="datetime-local" id="creation-end" step="1" value="2025-02-12T09:05:22" name="creationDateEnd">

document.getElementById("creation-start").value // produces '2025-02-12T09:05'
document.getElementById("creation-end").value // produces '2025-02-12T09:05:22'

Is there some native HTML way to make the datetime-local input include the “00” seconds when getting the value?

Behavior is the same on both Chrome and Edge (both are version 132).

I went over existing questions about datetime-local, but most of them seem to be from a while back when seconds were not supported. The current datetime-local MDN docs seem to suggest seconds are supported.

One solution is to not show seconds at all HTML form input type datetime-local result string missing seconds when picker seconds set to zero. But in my case I have to show the seconds in the picker, because users want to be able to select seconds.

I can write JS when processing the value to check if seconds are present and add them if they are missing, but I’d like to avoid that, if possible.

How can one convert a Web API ReadableStream to a stream.Readable?

The is the reverse question of: How to convert a Node.js stream.Readable into Web API ReadableStream?.

I have three files:

App.svelte:

<script>
    import Component from "./Component.svelte"
    import {items} from "./store.js"
    
    $items.set("a", { name: "John", index: "a" })
    $items.set("b", { name: "Jack", index: "b" })
</script>

<h1>DIV each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div>Name: {item.name}</div>
    {/each}
{/if}

<h1>Component each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div><Component index={item.index} /></div>
    {/each}
{/if}

Component.svelte:

<script>
    import {items} from "./store.js"
    let {
        index = null,
    } = $props()

    let data = $state($items.get(index))
</script>

<div><input bind:value={data.name} /></div>

store.js:

import {get, writable} from "svelte/store";
import { SvelteMap } from "svelte/reactivity";

export let items = writable(new SvelteMap([]))

I wonder how to remain reactivity in SvelteMap items. When input value is changed, it should update in SvelteMap (as it is binded). I don’t know how to work with this kind of reactivity.

Playground here.

I’m trying to use the IMaskInput component from [email protected] and I want to restrict the input of negative numbers. While there are a few ways I can do this (such as setting the min=0 or always returning the absolute value of any input) I understand that there is a prop where you can define if signed numbers (aka the signed prop) can be allowed or not. Does anyone know how this should properly be used? Here is an example of my IMaskInput component:

import { IMaskInput } from "react-imask";

function MyComponent(props) {
  const [value, setValue] = useState(undefined);
  return (
    <IMaskInput
        className={props.className}
        data-testid={props.testId}
        id={props.fieldId}
        mapToRadix={["."]}
        mask={Number}
        max={props.max}
        min={props.min}
        padFractionalZeros={true}
        radix={"."}
        scale={2}
        signed={props.signed}
        thousandsSeparator={","}
        unmask={true}
        value={value !== undefined && value !== null && !Number.isNaN(value) ? value.toString() : ""}
        onAccept={(value: string) => {
          const newValue: number | undefined = parseFloat(value);
          setValue(newValue)
        }}
        {...props}
      />
  )
}

const myProps = {
  min: -(10**8),
  max: 10**8,
  fieldId: "value",
  testId: "value-test-id",
  signed: false, // This one should prevent the input of the "-" sign
}

I have the following codepen: https://codepen.io/roniyaniv/pen/emOxEbR (it’s the freeCodeCamp drum-machine).

I have everything working as expected, and all the tests pass.

However, the last test’s implementation left me puzzled. See lines 40-45 in the JS code. I include the lines here, but you may want to see the original code:

const drumMachineDisplay = document.getElementById("display");

const outputPadName = (key) => {
  const indexOfKey = drumPadKeyOrder.indexOf(key);
  const padName = drumPads[indexOfKey].id;
  
  // this works:
  document.getElementById("display").innerText = padName;  
  
  // this does not work:
  // drumMachineDisplay.innerText = padName;
}

I can’t figure out why the line that does not work is not working. I’m guessing it’s something about scope, but I’m not sure and can’t explain it. Can someone explain it to me in simple terms?

i run my vite app after 2 weeks and i got this error

$ vite --host

  VITE v6.0.11  ready in 609 ms

  ➜  Local:   http://localhost:5173/
  
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "../pkg"

    node_modules/lightningcss/node/index.js:16:27:
      16 │   module.exports = require(`../pkg`);
         ╵                            ~~~~~~~~

/home/asad/Desktop/96-news-hd/96-news-hd-frontend/node_modules/esbuild/lib/main.js:1476
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
node_modules/lightningcss/node/index.js:16:27: ERROR: Could not resolve "../pkg"
    at failureErrorWithLog (/home/asad/Desktop/96-news-hd/96-news-hd-frontend/node_modules/esbuild/lib/main.js:1476:15)
    at /home/asad/Desktop/96-news-hd/96-news-hd-frontend/node_modules/esbuild/lib/main.js:945:25
    at /home/asad/Desktop/96-news-hd/96-news-hd-frontend/node_modules/esbuild/lib/main.js:1354:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v23.7.0
error: script "dev" exited with code 1

info:

system : Linux Mint v22.1

node: v23.7.0

bun: 1.2.2

npm: 10.9.2

vite: 6.0.5

i tried every thing like upgrading node , changing package manager , deleting lock file and node_mondule folder and reinstall them. but cant solve it

I’m developing a Chrome extension (Manifest V3) and using ES6 modules in my content script (content.js). My code starts with:

However, when the extension loads on https://nkiri.com/, I get the following error in the console:

“Uncaught SyntaxError: Cannot use import statement outside a module”

I’ve tried:

• Specifying "type": "module" in my manifest’s content_scripts field (Manifest V3), but it still doesn’t work.

My question is: What is the best approach to use ES6 modules in a Chrome extension content script, and how can I resolve this error?

Environment Details:

• Chrome Extension using Manifest V3.

• Content script injected into https://nkiri.com/.

Any guidance or examples would be greatly appreciated!

I have a project using Tailwind v4 and Laravel Mix. Below is my HTML file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Skyblock Profile Viewer | Home</title>

    <link rel="stylesheet" href="dist/css/app.css" />

    <script src="dist/js/app.js" defer></script>
  </head>
  <body>
    <main
      class="min-h-screen bg-[url(dist/assets/minecraft-background.png)] bg-cover bg-center"
    >
      <section></section>
    </main>
  </body>
</html>

I am trying to use a custom background image however I keep getting the error:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):

Error: Can’t resolve ‘dist/assets/minecraft-background.png’ in ‘D:Codeskyblock-profile-viewersrccss’

If I set the background image (using the same path for the url) as an inline style, it works correctly.

I have no idea why this is broken as it was working earlier. My webpack.mix.js is below:

/* eslint-disable no-undef */
const mix = require("laravel-mix");

// Cleans up terminal output
mix.disableNotifications();

// Some file that Webpack is watching is continuously updating after TailwindCSS runs. This results in an infinite loop.
// I am not fully confident that I have identified the file, but excluding the below files from the watch list prevents a loop.
mix.webpackConfig({
  watchOptions: {
    ignored: /node_modules|dist|mix-manifest.json/,
  },
});

// Basic Mix setup
mix
  .js("src/js/app.js", "dist/js")
  .postCss("src/css/app.pcss", "dist/css", [require("@tailwindcss/postcss")])
  .copyDirectory("src/assets", "dist/assets");

The image itself is being copied from src/assets to dist/assets in this process.

Any idea why I keep getting this error? Thanks

I have attempted to move the .copyDirectory() into its own statement, and have it happen before the .postCss() is compiled, but nothing has resolved the issue thus far.

let objA = { name: “ram”, age: 30, city: “Noida” };
let objB = { name: “ram”, age: 30, city: “Noida” };

console.log(objA == objB) // false

I’m having a problem in my hybrid angular application, when starting the application on an angular 2+ page, the angular js pages don’t load, it only works if I refresh within an angular js page, then it loads normally, if I navigate to angular 2+ pages and return to the angular js pages they work correctly.

Versions used:
angular v18, angularjs

@Component({
  selector: 'app-angular-js',
  template: ''
})
export class AngularJSComponent implements OnInit, OnDestroy {
  constructor(
    private lazyLoader: LazyLoaderService,
    private elRef: ElementRef
  ) {}

  ngOnInit() {
    this.lazyLoader.load(this.elRef.nativeElement);
  }

  ngOnDestroy() {
    this.lazyLoader.destroy();
  }
}

Route

{
    matcher: isAngularJSUrl,
    component: AngularJSComponent,
    canActivate: [OperationKeyGuard]
}

AppModule

@NgModule({
  declarations: [AppComponent],
  imports: [...IMPORTS],
  providers: [...PROVIDERS],
  bootstrap: [AppComponent]
})
export class AppModule implements DoBootstrap {
  constructor(private readonly upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [MyAppJs], { strictDi: true });
  }
}

If anyone has been through this and can help me, I would be grateful in advance.

The issue i’m having is that I subscribed to a realtime, but while chattting when I get a new message it doesn’t automatically shows at the bottom.

import Message from "./Message";
import { useRef, useEffect } from "react";

/**
 * ConversationContent component for displaying the chat messages.
 * @param {Object} props - The component props.
 * @param {Array} props.messages - The list of messages.
 * @returns {JSX.Element} The ConversationContent component.
 */
function ConversationContent({ messages }) {
  const ref = useRef(null);

  useEffect(() => {
    ref.current.scrollIntoView({ behaviour: "smooth" });
  }, []);

  return (
    <div className="pt-3 h-[80vh] px-4 overflow-auto overflow-y-scroll  scrollbar-custom">
      {messages?.map((curMessage) => (
        <Message message={curMessage} key={curMessage.id} />
      ))}
      <div ref={ref}> </div>
    </div>
  );
}

export default ConversationContent;
I tried creating a div and used a ref to sroll into the view but it wasn’t working

I’m developing a game for cats with phaser 3.The game consists of a mouse that keeps moving in the screen and every time the cat touches it, it dies and then he comes from another direction and faster. Now, I’m developing a pause button but I need to make this button on a way that it only reacts if you hold it for 1 second, because otherwise the cat could accidentally touch the buttor an pause the game. Anyone knows how I could do that button ?

I didn’t try anything yet, i was searching online and couldn’t find anything helpful on phaser 3