Category: javascript

I’ve a Meta Business App and I’ve added multiple App Domains to it to facilitate Facebook Login functionality from another Application. Recently, I tried adding about 500 domains and I’d seen an error something along the lines of “Domain Parameters Out of Bound”. So, I wanted to ask if there’s any limit to the number of App Domains that can be added to a Meta Business App? If yes, then what is the limit and how can I increase it?

Thanks!

I need help who knows about Facebook developer account limit.

I’m writing a cross-platform JavaScript-based drawing tool and run into severe problems on Linux.

First, Google Chrome’s pointer events do not distinguish between the regular tip and the eraser end.

Second, in Firefox pointer events always are mouse events, never pen events.

In Chrome, the Eraser is reported as Contact. In Firefox, the pen pointer type is reported as mouse pointer type. I am aware of there having been some incantations in Firefox’s configuration such as dom.w3c_pointer_events.enabled true and dom.w3c_pointer_events.dispatch_by_pointer_messages true, but they don’t seem to help (anymore?).

In Xournal++, the eraser end of the pen does erase. With PySide6, the eraser end of the stylus is recognized as such (pointerType).

This is a minimal demonstration:

function print(e) {
  const theButtons = {
    "-1": "-",
    0: "Contact",
    1: "Middle",
    2: "Barrel",
    5: "Eraser"
  };
  log.innerText += ` ${e.pointerType}:${theButtons[e.button]}`;
}
area.addEventListener('contextmenu', e => e.preventDefault());
['pointerdown', 'pointerup', 'pointermove', 'pointerover'].forEach(e => area.addEventListener(e, print));

<div id="area" style="height:100px;background-color:aqua;"><span>Use stylus here</span></div>
<p id="log"></p>

Versions and equipment: Chrome 122.0.6261.94, Firefox 122.0.1, Wacom Cintiq 27QHDT, openSUSE Tumbleweed 2024-02-26, KDE PLasma 5.115.0-1.1, /sys/module/wacom*/version says v2.00

Having a Database response from a query that mostly comprises of Left Outer Joins, which has multiple rows with the same data that looks like this:

[
    {
      Group_Id: 6,
      Group_Name: "Group_Name1",
      Component_Name: "Component_Name1",
      Module_Name: "Module_Name01",
    },
    {
      Group_Id: 6,
      Group_Name: "Group_Name1",
      Component_Name: "Component_Name2",
      Module_Name: "Module_Name02",
    },
    {
      Group_Id: 5,
      Group_Name: "Group_Name2",
      Component_Name: "Component_Name3",
      Module_Name: "Module_Name03",
    },
    {
      Group_Id: 5,
      Group_Name: "Group_Name2",
      Component_Name: "Component_Name3",
      Module_Name: "Module_Name04",
    }

]

, it is expected to check, whether there are multiple Groups with same Group Names, if they are same. Then, one wants to add the Component Names in an array, and then check if there are multiple same Component Names but different modules names, and the modules to an array like the output :**

[
  {
    Group_Id: 6,
    Group_Name: "Group_Name1",
    Components: [
      {
        componentName: "Component_Name1",
        moduleNames: [
          {
            moduleName: "Module_Name01",
          },
        ],
      },
      {
        componentName: "Component_Name2",
        moduleNames: [
          {
            moduleName: "Module_Name02",
          },
        ],
      },
    ],
  },
  {
    Group_Id: 5,
    Group_Name: "Group_Name2",
    Components: [
      {
        componentName: "Component_Name3",
        moduleNames: [
          {
            moduleName: "Module_Name03",
          },
          {
            moduleName: "Module_Name04",
          },
        ],
      }
    ],
  },
]

Struggling with building my Gatsby site. When I run ‘gatsby develop,’ everything works fine. However, during the build process, I encounter errors like the one below. Has anyone faced this issue before and found a solution? Any help would be greatly appreciated!

ERROR Image

This is the error “

 ERROR  UNKNOWN

Truncated page data information for the failed page "/": {
  "errors": {},
  "path": "/",
  "slicesMap": {},
  "pageContext": {}
}

failed Building static HTML for pages - 13.248s                                                                                                                                                                                     

 ERROR #95312  HTML.COMPILATION

"document" is not available during server-side rendering. Enable "DEV_SSR" to debug this during "gatsby develop".

See our docs page for more info on this error: https://gatsby.dev/debug-html





  WebpackError: ReferenceError: document is not defined

“

Already tried reinstalling npm packages and deleting node-modules along with package-lock.json, but still encountering the ‘document’ ReferenceError during Gatsby build. Any alternative or additional troubleshooting suggestions are welcome.

**Package.json **

{
  "name": "Test Project",
  "author": "Akila Gunasekara",
  "version": "1.1.0",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@gatsbyjs/reach-router": "^2.0.1",
    "@mui/icons-material": "^5.14.19",
    "@mui/material": "^5.14.20",
    "animate.css": "^4.1.1",
    "gatsby": "^5.12.12",
    "gatsby-link": "^5.12.1",
    "gatsby-plugin-emotion": "^7.25.0",
    "gatsby-plugin-image": "^3.12.3",
    "gatsby-plugin-manifest": "^5.13.1",
    "gatsby-plugin-postcss": "^6.12.0",
    "gatsby-plugin-react-helmet": "^6.12.0",
    "gatsby-plugin-sharp": "^5.12.3",
    "gatsby-react-router-scroll": "^6.12.0",
    "gatsby-script": "^2.12.0",
    "gatsby-source-filesystem": "^5.12.1",
    "gatsby-theme-codebushi": "^1.0.0",
    "gatsby-transformer-sharp": "^5.12.3",
    "postcss": "^8.3.8",
    "react": "^18.2.0",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-animation-on-scroll": "^5.1.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^7.48.2",
    "react-router-dom": "^6.20.1"
  },
  "devDependencies": {
    "eslint": "^7.21.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.2.1"
  }
}

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-codebushi`,
      options: {
        tailwindConfig: `tailwind.config.js`
      }
    },
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        icon: 'src/assets/icons/icon.png'
      }
    },
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
  ],
};

I have this code snippet in a Vue3 component:

<v-row
    v-for="(target, targetIndex) in targetModules"
    :key="targetIndex"
>
    <v-autocomplete
          v-model="targetModules[targetIndex]['modulName']"
          :items="moduleNamesAndEcts.map(module => module.name)"
          :rules="rules.text"
          label="Module"
          item-text="name"
          item-value="name"
          @input="(newModuleName) => updateIndex(newModuleName, targetIndex)"
        />
</v-row>

The function is:

const updateEcts = (newModuleName, targetIndex) => {
        console.log("HELLO!")
        const module = moduleNamesAndEcts.value.find(module => module.name === newModuleName);
        console.log(module.ects)
        if (module) {
            targetModules[targetIndex]['creditPoints'] = module.ects;
        }
    }

For some reason, updateEcts doesn’t seem to get called. The console.log doesn’t get printed. @change also didn’t work. Why is that?

We created a web app for audio processing. Now the client wants to record audio from any browser tab outside of the web app. Think of loom.com or sharing tabs via Google Meet, but instead of recording video, we need to record the audio output of that specific tab.

Is that possible? Is there any web API or Javascript library for that?

This is the error occured while I was doing NG Serve, I got this error #

An unhandled exception occurred: Cannot find module ‘C:UsersAman.Singh04Library Testing Codeto-do-list1node_modulesagent-basedistindex.js’. Please verify that the package.json has a valid “main” entry “.

Error Image.

I have installed angular 17 with node version 20 Version image.

Further this is my Package.json file code

{
  "name": "to-do-list1",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.2.0",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/router": "^17.2.0",
    "agent-base": "^7.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.2.1",
    "@angular/cli": "^17.2.1",
    "@angular/compiler-cli": "^17.2.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.3.2"
  }
}

And this is my angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "To-Do-List1": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": false
        },
        "@schematics/angular:directive": {
          "standalone": false
        },
        "@schematics/angular:pipe": {
          "standalone": false
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/to-do-list1",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "To-Do-List1:build:production"
            },
            "development": {
              "buildTarget": "To-Do-List1:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "To-Do-List1:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

I have installed the latest version of angular CLI with node version 20 while doing NG serve I’m facing this error

I have class like

class RegisterDto {
  phone: Nullable<string> = null;
  name?: string;

  constructor() {
    console.log(this);
  }
}

new RegisterDto();

The “name” field is optional. If I run this code in the browser console, I get {phone: null, name: undefined} as it should. If I run this code in RN I only get {phone: null}

Where I’m going wrong?

Not able to open document file in iframe in ionic react app working on browsers and iphone but not in android mobilesNot able to open document file in iframe in ionic react app working on browsers and iphone but not in android mobiles

I need a website that gives a free domain (even temporary)

I need a website where I can test my site, but I don’t want to pay for the domain. I bought a host myself, but I want to have the domain temporarily so that I can upload my site with my mobile phone and show it to the employer. Please, if Tell me if you know a way, and if it is possible for me to turn my laptop into a temporary host and then see my site with my phone, tell me if this method will work.

My operating system is Windows.

I have a page with a dashboard which is a server component :

import PayoutsTableHandler from './payoutsTableHandler'
import { getServerSession } from 'next-auth'
import { authOptions } from '../../../../../pages/api/auth/[...nextauth]'
import { fetchServerSide } from '../../../../../apiUtils/utils'
import {
  GET_HISTORY_FILTERS_PAYOUTS,
  GET_HISTORY_TABLE,
} from '../../../../../apiUtils/costants'

const PayoutTableProvider = async () => {
  const session = await getServerSession(authOptions)

  const historyFilters = await fetchServerSide({
    token: session?.user?.access_token,
    endpoint: GET_HISTORY_FILTERS_PAYOUTS,
  })

  const historyTable = await fetchServerSide({
    token: session?.user?.access_token,
    endpoint: GET_HISTORY_TABLE,
    cache: 'no-cache',
    tags: ['payouts_table'],
  })
  const onFilterChange = async ({ dates: { from, to }, status, page }) => {
    'use server'
    const statusSearchParam = status.slug !== 0 ? status.slug : ''
    const formattedUtcFrom = from ? from.toISOString() : ''
    const formattedUtcTo = to ? to.toISOString() : ''

    return await fetchServerSide({
      token: session?.user?.access_token,
      endpoint: `${GET_HISTORY_TABLE}?status=${statusSearchParam}&page=${page}&date_from=${formattedUtcFrom}&date_to=${formattedUtcTo}`,
    })
  }

  return (
    <PayoutsTableHandler
      filters={historyFilters}
      data={historyTable}
      onFilterChange={onFilterChange}
    />
  )
}

export default PayoutTableProvider

Everything seems to be working fine, i can filter with the server action and get the filtered data on the table ( with a useState hook ) and so on.

The problem comes when i open a sideModal ( client component ) that is related with one row (so one element) of the table.

In this sideModal i can upload a document (client component ) and once i’ve done that i would like to close the modal and revalidate the table fetching the latest data with the status change ( i’ve uploaded a component ).

This is the client component that uploads a document in the sideModal

import { payoutTypes } from '../../constants'
import { useDropzone } from 'react-dropzone'
import ButtonCVA from 'components/ui/buttonCVA'
import { useSidePanelContext } from '../../../../../context/sidePanelContextProvider'
import {
  postAuthenticatedAPI,
  putAuthenticatedApi,
} from '../../../../../apiUtils/utils'
import {
  GET_INVOICE_DATA,
  POST_FILE_UPLOAD_SEEDJ2,
} from '../../../../../apiUtils/costants'
import { useCallback, useState } from 'react'
import { useMessageContext } from '../../../../../context/messageContextProvider'
import { useSession } from 'next-auth/react'
import Image from 'next/image'
import { revalidateTable } from '../../serverActions'

const PayoutFooter = ({ type, data }) => {
  switch (type) {
    case payoutTypes.PAID:
      return <SimpleFooter />

    case payoutTypes.REQUIRED:
      return <UploadFooter data={data} />

    case payoutTypes.REJECTED:
      return <UploadFooter data={data} rejected />

    case payoutTypes.PROCESSING:
      return <SimpleFooter />

    default:
      return null
  }
}

export default PayoutFooter

const UploadFooter = ({ data, rejected }) => {
  const { closeSidePanel } = useSidePanelContext()
  const { setMessageState } = useMessageContext()
  const [loading, setIsLoading] = useState(false)
  const { data: session } = useSession()

  const onUploadInvoice = useCallback(async (acceptedFiles) => {
    let formData = new FormData()
    const file = acceptedFiles[0]
    formData.append('file', file)

    const onSuccess = () => {
      revalidateTable()
      setMessageState({
        type: 'success',
        message: {
          message: 'Invoice uploaded',
        },
      })
      window?.location.reload()
      closeSidePanel()
    }

    const onError = (res) => {
      console.error(res)
      setMessageState({
        type: 'error',
        message: {
          message: 'Something went wrong when uploading the track',
        },
      })
    }

    try {
      setIsLoading(true)
      const id = await postAuthenticatedAPI({
        payload: formData,
        token: session?.user?.access_token,
        endpoint: POST_FILE_UPLOAD_SEEDJ2,
        formData: true,
      })
      if (id) {
        const res = await putAuthenticatedApi({
          payload: { invoice: id },
          token: session?.user?.access_token,
          endpoint: GET_INVOICE_DATA(data.id),
        })
        onSuccess(res)
      }
    } catch (error) {
      onError(error)
    } finally {
      setIsLoading(false)
    }
  }, [])

  const { getRootProps } = useDropzone({
    accept: {
      'application/pdf': ['.pdf'],
      'image/jpg': ['.jpg', '.jpeg', '.png'],
      'application/vnd.ms-excel': ['.xls', '.xlsx'],
    },
    multiple: false,
    noDrag: true,
    onDrop: onUploadInvoice,
  })
  return (
    <div className="flex flex-col items-center gap-4">
      <ButtonCVA
        {...getRootProps({ className: 'dropzone' })}
        variant={'white'}
        size={'medium'}
        className={'w-fit'}
        srcImg="/images/uploadIconBlack.svg"
        imgPosition={'left'}
        imgClassName="w-5 h-5"
        disabled={loading}
      >
        {loading ? (
          <Image
            src="/images/loading.svg"
            alt="loading"
            height="24"
            width="25"
            className="h-[24px] w-[24px] animate-spin "
          />
        ) : (
          `Upload ${rejected ? 'new' : ''} invoice`
        )}
      </ButtonCVA>

      <p className="cursor-pointer text-zinc-50" onClick={closeSidePanel}>
        Go back
      </p>
    </div>
  )
}

const SimpleFooter = () => {
  const { closeSidePanel } = useSidePanelContext()

  return (
    <ButtonCVA
      variant={'white'}
      size={'large'}
      className={'m-auto mt-4'}
      onClick={closeSidePanel}
    >
      Close
    </ButtonCVA>
  )
}

To revalidate the tag of the ssr fetch call i use a server action created in a separate file that i call on the onSuccess callback

'use server'
import { revalidateTag } from 'next/cache'

export const revalidateTable = () => {
  revalidateTag('payouts_table')
}

Now, if i use router.refresh() also in combination with router.push() on the onSuccess callback i cannot refresh the page and i need to manually refresh the page to get the latest data.
Now as you can see in the code i need to do a window?.location.reload() which is ugly for me and it’s working.

Any idea why here the router.refresh() might not be working?

I also tried putting it inside a startTransition hook but nothing.

i am using vue3 with options api

as shown in the code posted below, i have a child component and it is hosted in the parent component as shown below.
the problem is, at run time, despite the showNotificationsWindowsContainer is set to true, the NotificationsWindowsContainer.vue does not show up.
to solve this issue, i enclosed the <NotificationsWindowsContainer> in the parent component within a <div> with an id, then, at the run time, the NotificationsWindowsContainer.vue showed up.
but i do not want to wrap the <NotificationsWindowsContainer> in the parent component around a <div>

i want the parent component to host the child component as in the way shown in my code below.

my question is, why the code of parent component shown below can not show the contents of <NotificationsWindowsContainer>

child component

<template>
    <div id="idDivNotificationsWindowsContainer" v-show="showNotificationsWindowsContainer">
    </div>
</template>

<script>
export default {
    name: 'NotificationsWindowsContainer',
    data() {
        return {
        };
    },
    components: {},
    props: {
        showNotificationsWindowsContainer: {
            type: Boolean,
            default: true,
        },
    },
    computed: {},
    methods: {},
};
</script>

<style>
    @import '../../../map/assets/css/NDVIComparisonTab/Notifications/NotificationsWindowsContainer.css';
</style>

parent component:

<template>
    <NotificationsWindowsContainer
        v-bind:showNotificationsWindowsContainer="showNotificationsWindowsContainer"
    ></NotificationsWindowsContainer>
</template>

css of the child component:

#idDivNotificationsWindowsContainer{
    position: absolute;
    width: 500px;
    height: 500px;
    z-index: 1;
    background-color: chartreuse;
}

mentioned in the question

I need to sanitize the external url value to dynamically load script and remove script for specific component alone.

used following approch

private getUrl(): SafeResourceUrl {
    // declared value in environment file   
   return this.sanitizer.bypassSecurityTrustResourceUrl(env.externalUrl);
  } 

public loadScript(): void {
    const scriptele= this.renderer.createElement('script');
    this.renderer.setProperty(scriptele, 'src', this.getUrl());
    this.renderer.appendChild(document.head, scriptele);
  }

I am expecting the correct script to be called in head section like
<script src="https://urlvalue.min.js"></script> // like this

but it gives as following with some extra text
<script src="SafeValue must use [property]=binding: https://urlvalue.min.js (see https://g.co/ng/security#xss)"></script>

We have a role that is used to control the invoice, bill, and journal.
This role should be able to update some fields in the header, but NO field in the sublist.
The user should be able to see the sublist, so no hidden possible.

For now, we know that it’s possible to update the sublist field display with a user event script, but it means adding all the fields to change the display in the script, and the day a field is added, we will need to update the script.
We think about a client script with an on change field. If the field is different from the memo for example, avoid to change the field. But there is an issue “on init”.
It should be good to have the script to run once the page has loaded.

Is there a way to get the sublist, and then have a list of all the fields available, to just have a loop or something to run?
Is there a way to trigger a client script once the page has finished loading?

I have a section where you can select some CPV codes. it has 2 main divs:

• On the left you have the codes you have selected
• On the right you have the whole list of codes from which you can select

I want to make the height of the right div to adapt to the height of the left one.
I am using Tailwind and I’ve added min-h-[20rem] and added overflow-y-scroll and some other classes and got this:

When I select more CPVs and they are added to Your selections, the height of the right div that contains the list of CPVs remains the same (20rem).

I tried using max-height:[calc((8*4rem) + 20rem)] (where 8 is the number of selected CPVs) directly as CSS and it works, but when I try to make it a Tailwind custom class –
it doesn’t.

This is the Tailwind class: max-h-[calc((8*4rem)+20rem)]

I noticed that the css class works only if you add spaces to it:

• Works – max-height:[calc((8*4rem) + 20rem)]
• Doesn’t work – max-height:[calc((8*4rem)+20rem)]

So I tried adding _ to Tailwind class, but still no result.