Category: javascript

Im coding an app for Android using React Native in Expo, and I think I have found an impossible task.

I have succesfully removed/hidden the “Bottom Navigationbar” for Android devices and even set a custom color. BUT, everytime on every single MODAL Component in the app it overrides my design and the Bottom Navigationbar reappears and also to the default THEME of the user.

I have sat with this for a week and I see many people with the same problem on Stack Overflow, Reddit and other forums.

TRY IT YOURSELF and see if you can come up with a solution!

Here you can see an example of my settings, as you can see we do not have a navbar at the bottom UNTIL a Modal appears and overrides our app.js

withoutmodalwithmodal

If you want an example of the Modal:

 <Modal
    animationType="fade"
    transparent={true}
    visible={showDisableNotificationsModal}
    onRequestClose={() => setShowDisableNotificationsModal(false)}
  >
    <View style={styles.modalOverlay}>
      <View style={styles.modalContent}>
        <Text style={styles.modalTitle}>Disable Notifications</Text>
        <Text style={styles.modalMessage}>
          Are you sure you want to disable notifications?
        </Text>
        <View style={styles.modalDivider} />
        <View style={styles.modalButtonContainer}>
          <TouchableOpacity
            style={styles.modalButton}
            onPress={() => setShowDisableNotificationsModal(false)}
          >
            <Text style={styles.modalButtonText}>Cancel</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalButton}
            onPress={() => {
              toggleNotifications(); // Actually disable
              disableNotifications();
              setShowDisableNotificationsModal(false); // Close modal
            }}
          >
            <Text style={[styles.modalButtonText, { color: "#F53769" }]}>
              Disable
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  </Modal>

I am doing an exercise. I am having an issue accessing an object array’s members. I have the following object array declaration:

const dishData = [
{
name: "Italian pasta",
price: 9.55
},
{
name: "Rice with veggies",
price: 8.65
},
{
name: "Chicken with potatoes",
price: 15.55
},
{
name: "Vegetarian Pizza",
price: 6.45
},
]

I am trying to access each member of the object array within a for loop. My following code will not complie:

dishData.forEach(dish) => {
var finalPrice;
if (taxBoolean == true) {
finalPrice = dishData(dish).price * tax;
}
else if (taxBoolean == false) {
finalPrice = dishData(dish).price;
}
else {
console.log("You need to pass a boolean to the getPrices call!");
return;
}
console.log("Dish: ", dishData(dish).name, "Price: $", dishData(dish).finalPrice);
}

}

When I use dishData(dish).price, I mean to access the price property for that loops iterantion of dishData.

Can anyone help me out?

I am trying to create a pixel painting project using HTML, CSS, and JS. I am having trouble with the painting mechanics.

expected result:

mousedown –> being able to move mouse and paint using mouseover –> mouseup (stop painting)

I originally did this:

for (let i = 0; i <= pixels.length; i++) {
    pixels[i]?.addEventListener("mouseover", () => {
        pixels[i].setAttribute("style", "background: black");
        console.log("painting");
    })

}

and this works when the mouse is over the canvas. but this doesn’t include the mousedown/mouseup mechanic. so, I tried this:

try 1:

if (mouseDown) {
    pixels.forEach(pixel => {
        pixel.style.background = colorSelector.value;
        pixel.addEventListener("mouseover", function coloring(event) {
            pixel.style.background = colorSelector.value;
            if (!mouseDown) {
                pixel.removeEventListener("mouseover", coloring);
            }
        })
    })
}

try 2:

pixels.forEach(pixel => {
    if (mouseDown) {
        //to color the first pixel clicked
        pixel.style.background = colorSelector.value;
        pixel.addEventListener("mouseover", function coloring(event) {
            pixel.style.background = colorSelector.value;

            if (!mouseDown) {
                //remove the coloring if the mouse button is up
                pixel.removeEventListener("mouseover", coloring);
            }
        })
    }
})

But none seem to work. I have checked the mouseDown and it works so I am not sure why it doesn’t execute.

I’m encountering an issue with my PostCSS configuration in my project. When I try to run my development server, I receive the following error message:Failed to load PostCSS config: module is not defined in ES module scope
Context:
I have a postcss.config.js file that I am using to configure PostCSS.
My project is set up to use ES modules (I have “type”: “module” in my package.json).
I am using Node.js version 22.13.0
My project is built with [insert framework or build tool, e.g., React, Vite

Steps Taken:
I checked my package. Json and confirmed that it includes “type”: “module”.
I attempted to rename my Post CSS config file to postcss.config.cjs to use CommonJS syntax, but I still encounter issues.
I verified that all required dependencies are installed.

What could be causing this error, and how can I resolve it? Are there specific changes I need to make to my PostCSS configuration or project setup to ensure compatibility with ES modules?

Thank you for your help!

I started a small project in react + webpack in which I tried to use the components proposed by Semantic UI, here, I set up a small search form which contains an icon proposed by Semantic UI, but at the time of the build of my application, the icon does not load and the error message below appears:

error icon

after several searches I modified the .gitattributes file :

gitattributes file

I also modified the webpack file:

const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

const port = 8080;

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  module: {
    rules: [
      // Styles for SCSS files
      {
        test: /.(scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 2,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              implementation: require('sass'),
            },
          },
        ],
      },
      // Styles for CSS files
      {
        test: /.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      // Fonts and assets
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
      },
    ],
  },

  devServer: {
    historyApiFallback: true,
    static: path.resolve(__dirname, '../dist'),
    static: {
      watch: {
        ignored: /node_modules/,
      },
    },
    open: true,
    compress: true,
    hot: true,
    port,
  },
});

The problem persists in spite of everything. Any ideas? ^^

I am currently working on a pokemon team builder. The issue I have is the following:

On my SelectedTeamBanner component I have an effect that should check if user has any team stored on localStorage. If the user doesn´t have any team on localStorage it should create only one team and save it on localStorage:

import { PokemonTeam } from '../../../../domain/teamMemberEntities';
import useWeavileStore from '../../../../globalContext/WeavileStore';
import { useDefaultTeam } from '../../hooks/useDefaultTeam';
import { BannerMember, SelectedTeamName, TeamTypesDropdown } from './';

import '../../styles/selectedTeamBanner.css';

export const SelectedTeamBanner = () => {

    const { getDefaultTeam } = useDefaultTeam();
    const selectedTeam: PokemonTeam | null = useWeavileStore((state) => state.selectedPokemonTeam);
    
    /* Faulty effect */
    useEffect(() => {
        const asyncEffectWrapper = async () => {            
            await getDefaultTeam(); 
            /* I don´t know if there is any point on awaiting this promise
             but not awaitng it neither fixed the issue */
        }
        asyncEffectWrapper();
    }, []);

    return (
        <section className="selected-team-banner">
            {/* This component renders before useEffect finishes causing to selectedTeam to be undefined
            That is why all nodes check if selectedTeam is undefined before rendering*/}
            {
                selectedTeam && <SelectedTeamName />
            }
            {
                selectedTeam?.teamMembers
                && selectedTeam.teamMembers.map((member, index) => (
                    <BannerMember member={member} key={index} />
                ))
            }
            <TeamTypesDropdown />
        </section>
    );
}

getDefaultTeam is the function that based on checkIfUserHasTeams result decides what to do:

import { PokemonTeam } from "../../../domain/teamMemberEntities";
import useWeavileStore from '../../../globalContext/WeavileStore';
import { createNewTeamRequest } from "../api/nonLoggedUsers";
import { checkIfUserHasTeams, storePokemonTeam } from "../helpers/nonLoggedUser";

export const useDefaultTeam = () => {

    const changeSelectedTeam = useWeavileStore((state) => state.changeSelectedTeam);     
    const changeSelectedMember = useWeavileStore((state) => state.changeSelectedPokemon);

    const getDefaultTeam = async(): Promise<PokemonTeam> => {
        const result: PokemonTeam | null = checkIfUserHasTeams();
        
        if (result !== null) return result;
        else {
            const response = await createNewTeamRequest(TeamType.INDIVIDUAL); // Server side works fine
            if (response.status === 201) {
                const firstTeam: PokemonTeam = storePokemonTeam(response.data);
                changeSelectedTeam(firstTeam);
                changeSelectedMember(firstTeam.teamMembers[0]);      
                
                return firstTeam;
            } 
            else throw new Error("Error creating default first pokemon " + response.statusText);
        };
    }

    return { getDefaultTeam };
    
};

checkIfUsersHasTeams() is meant to search items on localStorage looping between 0 and 14.
If it finds one, then return the JSON parsed as PokemonTeam, if not then return null to create a new team on server side.

/* Items in localStorage saves using a numeric key between 0 and 14 */

export const checkIfUserHasTeams = ():  PokemonTeam | null => {

    for(let i: number = 0; i < 15; i++) {
        const storedItem = localStorage.getItem(i.toString());
        
        if(storedItem !== null) {
            const parsedItem: PokemonTeam = JSON.parse(storedItem);
            return parsedItem;
        }  
    }

    return null;
}

And finally, the function that stores the team on localStorage:

import { PokemonTeam } from '../../../../domain/teamMemberEntities/PokemonTeam';
import { getAllTeamsLocalStorage } from "./getAllTeamsLocalStorage";

export const storePokemonTeam = (argTeam: PokemonTeam): PokemonTeam => {

    /* This code is to give the team a default name */
    if (!argTeam.name || argTeam.name === undefined || argTeam.name === '') {
        const allTeams: PokemonTeam[] = getAllTeamsLocalStorage();

        const unamedTeamsNumber: number = allTeams.filter(team => team.name.startsWith("Unamed")).length;
        argTeam.name = `Unamed${unamedTeamsNumber + 1}`;
    }

    /* teams are stored on localStorage using a key between 0 and 14 */
    for (let i: number = 0; i < 15; i++) {
        if (localStorage.getItem(i.toString()) === null) {
            argTeam.id = i;
            localStorage.setItem(i.toString(), JSON.stringify(argTeam));
            return JSON.parse(localStorage.getItem(argTeam.id.toString())!) as PokemonTeam;
        };
    }

    throw new Error("Already stored 15 teams"); 
}

The problem is that React StrictMode is causing to run twice the effect and for whatever reason the checkIfUserHasTeams function is returning twice null, causing to create two teams on localStorage instead of one (Removing StrictMode made the code work fine)

I would like a solution that doesn´t imply removing StrictMode. I am using Zustand for global context. None of the issues I have found on StackOverflow helped me with this problem.

I would like to close the calander, if the user clicks again on the input field.
Do you know a good way to realise that?

const picker = new easepick.create({
    element: document.getElementById('datepicker'),
    css: [
    'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
    ],
    calendars: 2,
    grid: 2,
    plugins: ['LockPlugin','RangePlugin'],
    LockPlugin: {
    minDate: new Date(),
    },
    RangePlugin: {
    tooltip: true,
    startDate: new Date(),
    endDate: new Date('2027-12-31'),
    locale: {
        one: 'day',
        other: 'days',},
    },    
});

Thank you in advance for your help!

I’m building a DApp on the Polygon testnet (the new Amoy network) using MetaMask, ethers.js, and a Solidity smart contract. Whenever I try to call my startMaintenance() function (or several others) from my React frontend, I get an immediate error:

code: -32603
message: "Internal JSON-RPC error."

No revert reason is returned—even though I added try/catch and error decoding with interface.parseError(…). Here’s what I’ve confirmed so far:

1. Role Checks: I’m calling this as a technician account. In theory, my contract’s onlyTechnician check should pass.
2. Asset Status: The asset is set to “Broken,” so the require(status == ‘Broken’) check should pass too.
3. Gas / Funds: I have plenty of test MATIC in the technician’s wallet for gas.
4. ABI & Address: My ABI is up to date, and the contract address is correct on the Amoy testnet.
5. No Detailed Revert Data: The node or MetaMask is just returning the generic “Internal JSON-RPC error” with no additional info.
   I’ve also checked block explorers for a transaction log, but sometimes the TX isn’t even appearing. Has anyone seen this before on Polygon testnets or had the node fail to pass back revert messages? Any ideas on how to coax out the real error reason or confirm where the transaction is failing?
   This is the function involved in the error:

try {
  const tx = await assetManagerContract.startMaintenance(asset.id, startComment);
  await tx.wait();
  alert("Maintenance started!");
} catch (error) {
  console.error("Error handleStartMaintenance:", error);
  // tried to decode revert data, but all I get is the -32603 internal error
}

function startMaintenance(uint _id, string memory startComment) public onlyTechnician {
    require(_id < nextAssetId, "Asset does not exist");
    require(!assets[_id].isDeleted, "Asset is deleted");
    require(keccak256(bytes(assets[_id].status)) == keccak256(bytes("Broken")),
        "Asset must be broken to start maintenance"
    );
    // ...
    assets[_id].status = "Under Maintenance";
    assets[_id].technician = msg.sender;
    emit MaintenanceStarted(_id, msg.sender);
}

in odoo 18, after a successful database migration from odoo 16, in the CRM application, inside the default kanban-view, i get this error when i click on a lead to get its form-view :

UncaughtPromiseError > OwlError
Uncaught Promise > An error occured in the owl lifecycle (see this Error's "cause" property)

Occured on localhost:8078 on 2025-04-06 08:35:01 GMT

OwlError: An error occured in the owl lifecycle (see this Error's "cause" property)
    Error: An error occured in the owl lifecycle (see this Error's "cause" property)
        at handleError (http://localhost:8078/web/assets/6/debug/web.assets_web.js:9567:35)
        at App.handleError (http://localhost:8078/web/assets/6/debug/web.assets_web.js:13964:20)
        at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10475:30)
        at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
        at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
        at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
        at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
        at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
        at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
        at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)

Caused by: TypeError: Cannot read properties of undefined (reading 'disconnect')
    at MoveNodePlugin.destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:131906:35)
    at Editor.destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:121094:24)
    at Wysiwyg.<anonymous> (http://localhost:8078/web/assets/6/debug/web.assets_web.js:145711:41)
    at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10471:28)
    at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
    at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
    at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
    at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
    at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)
    at ComponentNode._destroy (http://localhost:8078/web/assets/6/debug/web.assets_web.js:10466:23)

It’s the first time I’m working with ThreeJS on a “more complex” model. After Exporting the OBJ from blender into glb format and import it into my project it works fine – positioning is good and I can add Decals. But when moving or rotating the model the decal position stays but the projection is not “on surface” of the model.

Current state:

const helmet = new Helmet(
    logoTexture,
    new THREE.Color(0x0C072D),
    new THREE.Vector3(0, 10, 0)
);
scene.add(await helmet.generate())

import * as THREE from 'three';
import {GLTFLoader} from "three/addons/loaders/GLTFLoader";

const loader = new GLTFLoader();
import {rotationHelper} from "./utils.js";
import {DecalGeometry} from "three/addons/geometries/DecalGeometry";

export class Helmet {

    logoTexture;
    position;
    rotation;
    color;
    texture;
    isLogoFacingRight;
    shouldMirrorLogo;

    constructor(logoTexture = "", color = new THREE.Color(0xffffff), position = new THREE.Vector3(0, 0, 0), rotation = new THREE.Euler(0, 0, 0), isLogoFacingRight = false, shouldMirrorLogo = false) {
        this.logoTexture = logoTexture;
        this.position = position;
        this.rotation = rotation;
        this.color = color;
        this.texture = null;
        this.isLogoFacingRight = true;
        this.shouldMirrorLogo = false;
    }

    /**
     *
     * @param pos       object          {x,y,z} coordinates unit based for placement in the scene
     * @param rot       object          {x:radiant, y:radiant, z:radiant}
     * @param color     THREE.color     like: THREE.Color(0xffffff)
     * @param texture   THREE.texture   generated via TextureLoader
     * @param isLogoFacingRight bool    True if the Logo image shows to the right
     * @param shouldMirrorLogo  bool    True if the Logo should be mirrored on the opposite side of the helmet
     */
    generate() {
        return new Promise(async (resolve, reject) => {

            // Texturen vorladen
            const metalStrapsTexture = await this.#safeLoadTexture('../models/helmet/helmetFootball_metalStraps_baseColor.png');
            const strapTexture = await this.#safeLoadTexture('../models/helmet/helmetFootball_strap_baseColor.png');

            loader.load(
                './models/helmet/helmetFootball.glb',  // Passen Sie den Pfad entsprechend an
                (gltf) => {
                    const model = gltf.scene.children[0];

                    if (this.logoTexture) {
                        this.#createDecals(model);
                    }

                    model.traverse((node) => {
                        ...
                    });


                    // Optional: Position anpassen
                    model.position.set(
                      this.position.x, 
                      this.position.y, 
                      this.position.z
                    );

                    // Rotation anpassen (falls nötig)
                    model.rotation.set(
                        this.rotation.x,
                        this.rotation.y,
                        this.rotation.z
                    );

                    model.updateMatrix();
                    model.updateMatrixWorld(true); // Erzwingt vollständige Matrixaktualisierung nach rotation


                    resolve(model);
                },
                // Ladefortschritt
                (progress) => {
                    console.log('Lade: ', (progress.loaded / progress.total * 100) + '%');
                },
                // Fehlerbehandlung
                (error) => {
                    console.error('Fehler beim Laden des Modells:', error);
                    reject(error);
                }
            );
        });
    }

    async #createDecals(model) {

        const texture = await this.#safeLoadTexture(this.logoTexture);
        if (!texture) {
            console.log("No Logo Texture found")
            return;
        }

        const targetNode = model.getObjectByName('helmetFootball_4');

        if (!targetNode) {
            console.log("No target for decal found")
        }

        const boundingBox = targetNode.geometry.boundingBox;

        const boundingBoxHelper = new THREE.Box3Helper(boundingBox, 0xff0000); // Rot als Farbe
        targetNode.add(boundingBoxHelper);

        // Decal-Parameter
        const decalSize = new THREE.Vector3(8, 8, 8); // Anpassen je nach Logogröße
        const decalOrientation = new THREE.Euler(0, rotationHelper(90), 0);
        const yPosition = (targetNode.geometry.boundingBox.min.y + targetNode.geometry.boundingBox.max.y) / 2 + 5;


        // Decal-Positionen (links und rechts)
        const decalPositions = [
            new THREE.Vector3(targetNode.geometry.boundingBox.max.x, yPosition, 0),
            new THREE.Vector3(targetNode.geometry.boundingBox.min.x, yPosition, 0)
        ];


        decalPositions.forEach((position, index) => {

            // Helfer zur Viasualisierung der Position
            const helperBox = new THREE.Mesh(
                new THREE.BoxGeometry(8, 8, 8), // Größe der Hilfsbox (x, y, z)
                new THREE.MeshBasicMaterial({
                    color: 0x00ff00, // Grüne Farbe
                    wireframe: true  // Nur Drahtgitter-Ansicht
                })
            );
            helperBox.position.copy(position);
            targetNode.add(helperBox);

            // Decal-Geometrie erstellen
            const decalGeometry = new DecalGeometry(
                targetNode,
                position,
                decalOrientation,
                decalSize
            );

            // Decal-Material
            const decalMaterial = new THREE.MeshBasicMaterial({
                map: texture,
                transparent: true,
                depthTest: true,
                opacity: 1
            });

            // Decal-Mesh erstellen
            const decalMesh = new THREE.Mesh(decalGeometry, decalMaterial);

            // Zum Ziel-Mesh hinzufügen
            targetNode.add(decalMesh);
        });
    }

    #safeLoadTexture(path) {
        return new Promise((resolve, reject) => {
            const textureLoader = new THREE.TextureLoader();
            textureLoader.load(
                path,
                (texture) => resolve(texture),
                undefined, // onProgress
                (error) => {
                    console.warn(`Texture not found: ${path}`, error);
                    // Fallback-Textur oder null zurückgeben
                    resolve(null);
                }
            );
        });
    };
}

As far as i understand it creates the decal projection based on another / the old position and then moves it to the right position? If that is the case how could I solve that?

See the correct placement and projection if the model position is set to 0,0,0:

Sidenote: the meshes are unstyled because with the way I export it now somehow the mesh titles where not implemented.

thanks for your hints.

There seems to be a difference between MIME types on macOS and Windows when using FormData for file uploads.

Windows users are complaining that the file upload doesn’t work and the validation error that comes back is:
“Validation failed (current file type is application/octet-stream, expected type is text/tab-separated-values)”

I’m scratching my head because when I check MDN it seems like the FormData API should be compatible with all browsers, but it’s not behaving the same across operating systems.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

There’s clearly a difference in the Content-Type

Edge macOS

------WebKitFormBoundary3WUJCpBdz1ohAJza
Content-Disposition: form-data; name="transactions"; filename="testdata.tsv"
Content-Type: text/tab-separated-values


------WebKitFormBoundary3WUJCpBdz1ohAJza--

Edge Windows:

------WebKitFormBoundaryACGjxE52TKrSKr1F
Content-Disposition: form-data; name="transactions"; filename="testdata.tsv"
Content-Type: application/octet-stream


------WebKitFormBoundaryACGjxE52TKrSKr1F--

I have an ugly fix, but I have no idea if I might be overlooking something?

    const [file] = this.dropzone.files;

    const formData = new FormData();

    formData.append(
      'file',
      // FormData was sent as application/octet-stream from Windows devices so we need to convert it to text/tab-separated-values
      new Blob([file], { type: 'text/tab-separated-values' }),
      file.name,
    );

This will have a huge impact on my workflow because I now have to assume that there is likely more mismatched behavior between Mac and Windows. How do I you deal with stuff like this? Do I have to start running my automated tests for different operating systems now?

For now I’ve built in monitoring for 400 Bad Request on my access logs so I can catch this kind of stuff earlier, but want to hear how other people deal with these kinds of problems.

The issue described in this GitHub link seems exactly like what I need,
but I’m not sure how to apply it to my case.

Here is my code:

    <body>
        <div id="grid"></div>
        <script>
            function makeGrid() {
                var tableData = [
                    { id: 1, name: "Billy Bob", age: "12", gender: "male", type: "A" },
                    { id: 2, name: "Mary May", age: "11", gender: "female", type: "B" },
                    { id: 3, name: "John Doe", age: "12", gender: "male", type: "A" },
                    { id: 4, name: "Jane Doe", age: "11", gender: "male", type: "A" },
                    { id: 5, name: "Anna Smith", age: "11", gender: "female", type: "B" },
                    { id: 6, name: "Peter Pan", age: "12", gender: "male", type: "A" },
                    { id: 7, name: "Sam Hill", age: "12", gender: "male", type: "A" },
                    { id: 8, name: "Laura Lee", age: "11", gender: "female", type: "B" },
                    { id: 9, name: "James Bond", age: "11", gender: "male", type: "A" },
                    { id: 10, name: "Bruce Wayne", age: "12", gender: "male", type: "A" },
                    { id: 11, name: "Clark Kent", age: "12", gender: "female", type: "B" }
                ];
                var table = new Tabulator("#grid", {
                    height: "311px",
                    layout: "fitColumns",
                    movableRows: true,
                    groupBy: ["gender", "age"],
                    columns: [
                        { title: "Name", field: "name", width: 200 },
                        { title: "Gender", field: "gender" },
                        { title: "Age", field: "age" },
                        { title: "Type", field: "type" }
                    ],
                    data: tableData,
                });
            }
            window.addEventListener('DOMContentLoaded', makeGrid);
        </script>
    </body>

I tried adding the code from the GitHub link directly below the div tag.
There were no errors, but it didn’t work as shown in the example from the link.

thank you.

I have set up a typical Node.js/Express project with TypeScript.

I have this controller class:

import { Request, Response } from 'express';
import { UserService } from './user.service';
import { plainToInstance } from 'class-transformer';
import { CreateUserDto } from './dtos/create-user.dto';
import { UserDto } from './dtos/user.dto';

export class UserController {
  constructor(private userService: UserService) {}

  async signUp(req: Request, res: Response): Promise<UserDto> {
    const createUserDto = plainToInstance(CreateUserDto, req.body);
    const newUserDto = new UserDto(
      await this.userService.create(createUserDto),
    );
    res.status(201).json({ message: 'User created', user: newUserDto });
    return new UserDto(newUserDto);
  }
}

And I have this route file at this moment:

import { Router } from 'express';
import UserController from './user.controller';

const userRoutes = Router();

userRoutes.post('users/signup', (req, res) => {
  UserController.??
});

export default userRoutes;

I know that somehow I have to bind the method signUp from UserController to the route. But how?

I have found this blog post, where the blogger simply import the controller class in the route file and access the method. But if I do the same, intellisense doesn’t get the signUp method.

I updated to Livewire 3.6.2 (finally) from the latest v2. I’ve followed the upgrade guide, and everything works, except my modals.

The modals were shown by doing a dispatchBrowserEvent call, but since that’s been removed, I’ve changed to dispatch:

    public function closeModal(string $modalEvent = 'closeModal'): void
    {
        $this->dispatch($modalEvent);
        $this->isOpen = false;
    }

    public function openModal(string $modalEvent = 'openModal'): void
    {
        $this->dispatch($modalEvent);
        $this->isOpen = true;
    }

and updated my <script> to:

@script
<script>
    $wire.on('openConfirmationModal', () => {
        $("#confirmationModal").show();
    });
    $wire.on('closeConfirmationModal', () => {
        $("#confirmationModal").hide();
    });
</script>
@endscript

The call in this example is $this->openModal('openConfirmationModal');.

The only thing that changed here was $wire.on replaced window.addEventListener(. The rest stayed the same. If I add console.log‘s in the .on listeners, then the element is logged fine. If I do a classList.remove it doesn’t remove the class I specify. It’s almos like I can’t access that element on the DOM. My modal looks like this:

<div id="confirmationModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:h-full backdrop-blur-sm backdrop-grayscale">
    <div class="relative w-full h-full max-w-2xl md:h-auto mx-auto ">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    header
                </h3>
            </div>
            <!-- Modal body -->
            <div class="p-6 space-y-6">
                body

            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button wire:click="saveResults()" data-modal-hide="defaultModal" type="button" class="text-white bg-green-600 hover:bg-green-500 focus:bg-green-500 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-green-600 dark:hover:bg-green-700">Confirm</button>
                <button wire:click="closeModal('closeConfirmationModal')" data-modal-hide="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 rounded-lg border border-gray-200 text-sm font-medium px-4 py-2 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">Cancel</button>
            </div>
        </div>
    </div>
</div>

The modal is included in the componend with a @include('results.livewire.confirmation').

Does anyone have ANY idea what I’m possibly doing wrong?

I am work on a react project using kendo-react previously I was working on the older version. Now I wanted to add a property to toggle border to the table. So, I came to know that [email protected] has properties like TableProperties and TableCellProperties to do so. Then I upgrade the package using yarn upgrade and it’s related packages that are

yarn upgrade kendo-react-editor version 5.19.0
yarn add kendo-svg-icons
yarn upgrade @progress/[email protected]
yarn upgrade @progress/[email protected]

Then I used TableProperties and TableCellProperties in my code and it started working.
Now the problem is the CSS is messed up. I guess because I am on the older version of the CSS package that is @progress/kendo-theme-bootstrap”: “^3.4.1”

so what is the best suitable version for this to install to get the css working

I have tried installing the version 6.7.0 and the latest one. but it is not working the build fails show the error
SassError: Undefined operation: “var(–bs-border-width) times 2”.
on line 44 of ../../node_modules/@progress/kendo-theme-bootstrap/scss/button/_variables.scss
…

• 2} + #{$kendo-button-border-width * 2} ) !default;
  ——————————————^
  but I have not written this line

So, I need to version of the kendo-theme-bootstrap that can work smoothly
and are their any other dependencies that I need to install or upgrade with this

this is my package.json
“@progress/kendo-data-query”: “^1.5.1”,
“@progress/kendo-drawing”: “^1.10.0”,
“@progress/kendo-editor-common”: “1.3.0”,
“@progress/kendo-licensing”: “^1.1.4”,
“@progress/kendo-react-animation”: “^4.8.0”,
“@progress/kendo-react-buttons”: “^4.8.0”,
“@progress/kendo-react-data-tools”: “^4.8.0”,
“@progress/kendo-react-dateinputs”: “^4.8.0”,
“@progress/kendo-react-dialogs”: “^4.8.0”,
“@progress/kendo-react-dropdowns”: “^4.8.0”,
“@progress/kendo-react-editor”: “^4.8.0”,
“@progress/kendo-react-grid”: “^4.8.0”,
“@progress/kendo-react-inputs”: “^4.8.0”,
“@progress/kendo-react-intl”: “^4.8.0”,
“@progress/kendo-react-layout”: “^4.8.0”,
“@progress/kendo-react-listbox”: “^5.0.1”,
“@progress/kendo-react-pdf”: “^4.8.0”,
“@progress/kendo-react-popup”: “^4.8.0”,
“@progress/kendo-react-progressbars”: “^4.8.0”,
“@progress/kendo-react-sortable”: “^4.8.0”,
“@progress/kendo-react-tooltip”: “^4.8.0”,
“@progress/kendo-react-treeview”: “^4.8.0”,
“@progress/kendo-theme-bootstrap”: “^3.4.1”,

this include the older version that I was working on