Category: javascript

I encountered a problem with my project. For sharing modules, I use the require() function, which, as I know, evaluates the entire code of the module and encapsulates it in another function. However, I would like to reduce the amount of code that is evaluated in order to not include components if they are not used in the template.

For example, I have components Page, Button1, Button2. The Page component has 2 dependencies: Button1 and Button2, but only Button1 is used in the template of the Page component. Therefore, I would like not to include the dependency Button2 in the Page component.

I’d like to change the logic of function webpack_require for cancel component code evaluation if this component isn’t used.

I used DefinePlguin and ProvidePlugin of webpack for overriding the webpack_require function, but it didn’t work 🙁

The browser does not process keystrokes in a textbox (<input type="text">) until after all JS event handlers are finished.

In my app, though, I have a textbox nested inside an outer widget. The outer widget is not aware of the textbox’s existence, but I want to block it from processing keystrokes if the textbox is able to handle the same keystrokes. So I want to do something like this:

function onInputKeyDown(e) {
  const textbox = e.target as HTMLInputElement;
  const selStart = textbox.selectionStart, selEnd = textbox.selectionEnd;
  const content = textbox.textContent;

  e.invokeDefault() // doesn't exist

  if (selStart !== textbox.selectionStart || selEnd !== textbox.selectionEnd
      || content !== textbox.textContent)
    e.stopPropagation();
}

I tried simulating “invokeDefault” with e.preventDefault(); e.target.dispatchEvent(new KeyboardEvent('keydown', e)) but it turns out that dispatchEvent doesn’t cause default behavior, it just calls event handlers (the current event handler is re-entered) so the text field doesn’t change. Is there another way?

So, for context, this is the only command that is currently doing this. It is giving absolutely nothing in the console and it says on Discord “The application did not respond.”. It seems to be correct, I’m just not sure why it isn’t working. Here is the code:

const family = require("../../schemas/familySchema.js");
const {
  SlashCommandBuilder,
  ActionRowBuilder,
  ButtonBuilder,
  ButtonStyle,
  EmbedBuilder,
  ComponentType,
} = require("discord.js");
const mongoose = require("mongoose");

module.exports = {
  cooldown: 10,
  data: new SlashCommandBuilder()
    .setName("family")
    .setDescription("Handle all Family related tasks.")
    .addSubcommand((subcommand) =>
      subcommand
        .setName("marry")
        .setDescription("Lets you propose to another user.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to Marry.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("divorce")
        .setDescription("Divorce you from one of your partners.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to Divorce.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("adopt")
        .setDescription("Adopt another user into your family.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to Adopt.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("disown")
        .setDescription("Removes someone from being your child.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to Disown.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("makeparent")
        .setDescription("Picks a user that you want to be your parent.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to be your Parent.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("runaway")
        .setDescription("Removes your parent.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to remove as your parent.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("partner")
        .setDescription("Tells you who a user is married to.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to know the partners of.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("children")
        .setDescription("Tells you who a user's children are.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to know the children of.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("sibling")
        .setDescription("Tells you who a user's siblings are.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to know the siblings of.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("parent")
        .setDescription("Tells you who someone's parents are.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick who you want to know the parents of.")
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("familytree")
        .setDescription("Gets the full family tree of a user.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription(
              "Pick who you want to know the family tree of.",
            )
            .setRequired(true),
        ),
    )
    .addSubcommand((subcommand) =>
      subcommand
        .setName("relationship")
        .setDescription("Gets the relationship between two users.")
        .addUserOption((option) =>
          option
            .setName("target")
            .setDescription("Pick the first user.")
            .setRequired(true),
        )
        .addUserOption((option) =>
          option
            .setName("othertarget")
            .setDescription("Pick the second user.")
            .setRequired(true),
        ),
    ),

  async execute(interaction) {
    const target = interaction.options.getUser("target");
    const user = await interaction.guild.members.fetch(
      interaction.user.id,
    );
    const check = family.findOne({ userid: user.id });
    const checkTarget = family.findOne({ userid: target.id });

    switch (interaction.options.getSubCommand) {
      case "marry": {
        if (!check) {
          check = new family({
            _id: new mongoose.Types.ObjectId(),
            userid: user.id,
            partnerids: [],
            childrenids: [],
            parentids: [],
            siblingids: [],
          });
        }

        if (!checkTarget) {
          check = new family({
            _id: new mongoose.Types.ObjectId(),
            userid: target.id,
            partnerids: [],
            childrenids: [],
            parentids: [],
            siblingids: [],
          });
        }

        const ido = new ButtonBuilder()
          .setCustomId("ido")
          .setLabel("I do")
          .setStyle(ButtonStyle.Success);

        const no = new ButtonBuilder()
          .setCustomId("no")
          .setLabel("No")
          .setStyle(ButtonStyle.Danger);

        const marryRow = new ActionRowBuilder().addComponents(ido, no);

        await interaction.channel.send({
          content: `Will you marry <@${user.id}>? <@${target.id}>`,
          components: [marryRow],
        });

        const filter = (i) => i.user.id === target.id;

        const collector = reply.createMessageComponentCollector({
          ComponentType: ComponentType.Button,
          filter,
        });

        collector.on("collect", (interaction) => {
          if (interaction.customId === "ido") {
            try {
              check.partnerids.push(target.id);
              checkTarget.partnerids.push(user.id);
            } catch (e) {
              return console.log(`An error occured!`);
            }

            const embed = new EmbedBuilder()
              .setTitle(
                `${user.displayName} and ${target.displayName} got hitched!`,
              )
              .setColor(0x0099ff);

            interaction.channel.send({ embeds:  });
          }

          if (interaction.customId === "no") {
            const embed = new EmbedBuilder()
              .setTitle(
                `${target.displayName} declined ${user.displayName}!`,
              )
              .setColor(0x0099ff);

            interaction.channel.send({ embeds:  });
          }
        });

        await check.save().catch(console.error);
      }
    }
  },
};

I’ve tried looking around, but could not find any information that would help me resolve the issue. For reference, I’m not done. I am simply trying to test the first concept to see if it works.

Export encountered errors on following paths:

/_not-found / page: /_not-found

/admin/add products/page: /admin/add products

admin/manage orders/page: /admin/manage orders

admin/manage products/page: /admin/mange-products

/orders/page: /orders

Problem ssssssssssssss

I’m experiencing a challenging issue with Safari concerning the page load animation. Specifically, when I first open the main page, the load animation doesn’t initiate. However, if I navigate away to another page and then return to the main page, the animation starts functioning as expected.

I don’t believe the animation properties is the problem, as the animation plays correctly after navigating to another page and then returning to the main page.

Intriguingly, this problem does not occur in Chrome, where the page load animation works perfectly from the first visit.

Safari Version I am testing on: Safari 17.6 (19618.3.11.11.5)
I also checked on old safari versions on browserstack. The issue is consistent on all safari on all devices (ios, macOs, ipad).

Below is the animation properties I am using

.slideUp {
  animation: slide-up 20s alternate linear infinite;
  --webkit-animation: slide-up 20s alternate linear infinite;

}

@keyframes slide-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

I am getting following error when ran the unit tests in pipeline for an angular app.

Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)
        at <Jasmine>

But when ran the same in local system dont see any issues. It works fine. All the tests pass without any issue.

Node version: v16.20.2
NPM version: 8.19.4

Package.json is

{
  "name": "abc",
  "private": true,
  "version": "1.0.0",
  "description": "abc",
  "scripts": {
    "ng": "ng",
    "update": "npm update --registry=https://registry.npmjs.org/",
    "audit": "npm audit --registry=https://registry.npmjs.org/",
    "start": "ng serve",
    "build": "ng build --configuration production",
    "build:dev": "ng build"
  },
  "dependencies": {
    "@amplitude/analytics-browser": "~1.3.0",
    "@angular/animations": "~15.2.9",
    "@angular/cdk": "~15.2.9",
    "@angular/common": "~15.2.9",
    "@angular/compiler": "~15.2.9",
    "@angular/core": "~15.2.9",
    "@angular/forms": "~15.2.9",
    "@angular/material": "~15.2.9",
    "@angular/material-moment-adapter": "~15.2.9",
    "@angular/platform-browser": "~15.2.9",
    "@angular/platform-browser-dynamic": "~15.2.9",
    "@angular/router": "~15.2.9",
    "@azure/storage-blob": "~10.5.0",
    "@jaames/iro": "~5.5.2",
    "@ngrx/effects": "~15.4.0",
    "@ngrx/store": "~15.4.0",
    "@ngrx/store-devtools": "~15.4.0",
    "@ngx-translate/core": "~14.0.0",
    "@ngx-translate/http-loader": "~7.0.0",
    "class-transformer": "~0.5.1",
    "class-validator": "~0.14.0",
    "d3": "~7.9.0",
    "file-saver": "~2.0.5",
    "jwt-decode": "~3.1.2",
    "lodash": "~4.17.21",
    "moment": "~2.29.4",
    "moment-timezone": "~0.5.43",
    "rxjs": "~7.5.7",
    "rxjs-compat": "~6.6.7",
    "sha.js": "~2.4.11",
    "typescript-collections": "~1.3.3",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.2.8",
    "@angular-eslint/builder": "15.2.1",
    "@angular-eslint/eslint-plugin": "15.2.1",
    "@angular-eslint/eslint-plugin-template": "15.2.1",
    "@angular-eslint/schematics": "15.2.1",
    "@angular-eslint/template-parser": "15.2.1",
    "@angular/cli": "~15.2.8",
    "@angular/compiler-cli": "~15.2.9",
    "@angular/language-service": "~15.2.9",
    "@types/bingmaps": "7.0.20",
    "@types/d3": "~7.4.0",
    "@types/file-saver": "~2.0.7",
    "@types/jasmine": "~4.3.4",
    "@types/lodash": "~4.14.195",
    "@types/moment-timezone": "~0.5.30",
    "@types/node": "~20.3.1",
    "@typescript-eslint/eslint-plugin": "~5.43.0",
    "@typescript-eslint/parser": "~5.43.0",
    "codelyzer": "~6.0.2",
    "concurrently": "~7.4.0",
    "eslint": "~8.28.0",
    "jasmine-core": "~4.4.0",
    "jasmine-expect": "~5.0.0",
    "jasmine-marbles": "~0.9.2",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "karma-junit-reporter": "~2.0.1",
    "reflect-metadata": "~0.1.13",
    "tslint": "~6.1.3",
    "typescript": "~4.9.5"
  }
}

Following is the karma.config.json

module.exports = function (config) {
    config.set({
        basePath: '../',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-coverage'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('karma-junit-reporter'),
            require('@angular-devkit/build-angular/plugins/karma'),
        ],
        client: {
            clearContext: false, // leave Jasmine Spec Runner output visible in browser,
            jasmine: {
                random: false,
            },
        },
        coverageIstanbulReporter: {
            dir: require('path').join(__dirname, '../coverage'),
            reports: ['lcov', 'json', 'cobertura'],
            fixWebpackSourcePaths: true,
        },
        reporters: ['coverage-istanbul', 'progress', 'kjhtml', 'junit'],
        junitReporter: {
            outputDir: '',
            outputFile: 'abc.xml',
        },
        files: [
            {
                pattern: 'src/assets/**/*.json',
                watched: true,
                served: true,
                included: false,
            },
        ],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['ChromeHeadless'],
        captureTimeout: 100000,
        browserDisconnectTimeout: 10000,
        browserDisconnectTolerance: 3,
        browserNoActivityTimeout: 100000,
        flags: ['--disable-gpu', '--no-sandbox'],
        singleRun: true,
    });
};

Any one facing the same issue?
Stuck with this issue from few days.

In oracle apex button click when i press button sevrel times, progress indicator shows multiple progress inditators how can we control it on just one. When click on more then one time it multiply by every click. thnx in advance

As above mentioned, I just want one indicator even I click several times…

The code is as follows

newParams = new URLSearchParams({...{sort:{title: "desc"}}})

But it is showing as object in the url.

On debugging when i convert newParams to string it outputs 'sort=%5Bobject+Object%5D' and this is exactly what is displayed on browserl url.

newParams.toString() = 'sort=%5Bobject+Object%5D'

I am expecting the url to be something like "sort%5Btitle%5D=desc"

Can somebody tell what is the issue here?

Any help would be appreciated.

I’m currently working on a project, and we’ve identified a security flaw reported by Veracode with CWE ID 95, which corresponds to Eval Injection. The flaw was detected in our FileAPI.js script,specifically around the area where dynamic code execution or eval is used.

Problem: The static analysis scan flagged our FileAPI.js v2.0.7 file for potential code injection vulnerabilities around line 439.

parseJSON: function (str){
                var json;
                if( window.JSON && JSON.parse ){
                    json = JSON.parse(str);
                }
                else {
                    json = (new Function('return ('+str.replace(/([rn])/g, '\$1')+');'))();
                }
                return json;
            }

What I’ve Tried:

parseJSON: function (str){
    var json;
    if( window.JSON && JSON.parse ){
        json = JSON.parse(str);
    }
    else {
        console.error("window.JSON && JSON.parse is not available");
    }
    return json;
}

Any advice or recommendations on how to handle this issue effectively would be greatly appreciated!

Thanks in advance!

I’m working on a Vue application where I’ve implemented a custom autocomplete dropdown using the Select2 library. The component is functioning correctly in terms of its intended functionality, but I’m encountering a couple of warnings during development that I haven’t been able to resolve. I believe these may be related to how I’m defining props and the data function in my component.

select2.vue Component

<template>
  <div>
    <select class="form-control" :id="id" :name="name" :disabled="disabled" :required="required"></select>
  </div>
</template>

<script>
import $ from 'jquery';
import 'select2/dist/js/select2.full';
import 'select2/dist/css/select2.min.css'

export default {
  name: 'Select2',
  data() {
    return {
      select2: null
    };
  },
  emits: ['update:modelValue'],
  props: {
    modelValue: [String, Array], // previously was `value: String`
    id: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    settings: {
      type: Object,
      default: () => {}
    },
  },
  watch: {
    options: {
      handler(val) {
        this.setOption(val);
      },
      deep: true
    },
    modelValue: {
      handler(val) {
        this.setValue(val);
      },
      deep: true
    },
  },
  methods: {
    setOption(val = []) {
      this.select2.empty();
      this.select2.select2({
        placeholder: this.placeholder,
        ...this.settings,
        data: val
      });
      this.setValue(this.modelValue);
    },
    setValue(val) {
      if (val instanceof Array) {
        this.select2.val([...val]);
      } else {
        this.select2.val([val]);
      }
      this.select2.trigger('change');
    }
  },
  mounted() {
    this.select2 = $(this.$el)
      .find('select')
      .select2({
        placeholder: this.placeholder,
        ...this.settings,
        data: this.options
      })
      .on('select2:select select2:unselect', ev => {
        this.$emit('update:modelValue', this.select2.val());
        this.$emit('select', ev['params']['data']);
      });
    this.setValue(this.modelValue);
  },
  beforeUnmount() {
    this.select2.select2('destroy');
  }
};
</script>

Unit test for the component:

import { mount } from '@vue/test-utils';
import Select2 from './Select2.vue'; // Ensure correct path

describe('Select2 Component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(Select2, {
      props: {
        modelValue: '',
        options: [],
        id: 'test-select',
        name: 'testName'
      }
    });
  });

  it('renders the autocomplete component', () => {
    expect(wrapper.exists()).toBeTruthy();
    const subComp = wrapper.findComponent({ name: 'Select2' });
    expect(subComp.exists()).toBeTruthy();
  });
});

Warnings:
console. warn
[Vue warn]: Prop type [] for prop "modelValue" won't match anything. Did you mean to use type Array instead? at ‹Select2 modelValue="" onUpdate:modelValue=fn class="custom-font mb-1" ...
at <Card>
at <ApproveAllAsAssociate ref="VTU_COMPONENT" >
at <VTUROOT>

console. warn
[Vue warn]: data() should return an object.
at «Select2 modelValue="" onUpdate:modelValue=fn class="custom-font mb-1" ... › at ‹Card>
at «ApproveAllAsAssociate modelValue="" ref="VTU_COMPONENT] > at <VTUROOT>

In my real-time firebase database rules, I want to allow read & write only from my trusted domain website. (Example: MyWebSite.com).

This is what I’ve tried and didn’t work:

`

{

“rules”: {

  ".read": "auth.token.domain === 'trusteddomain.com'",

  ".write": "auth.token.domain === 'trusteddomain.com'"

}

}`

I am trying to implement a feature where I use a POST request to submit data to my mock API, but I’m facing challenges when trying to fetch the data that I posted. My goal is to store the posted data temporarily and then retrieve it using a GET request to simulate a simple backend interaction. However, I’m having issues with:

1. Data Storage: I need help with correctly storing the data after the POST request is made. I’m using a mock API setup, but I am unsure how to persist this data temporarily so it can be retrieved later.
2. Fetching Data: I’m having trouble implementing the GET request to fetch the data that was previously posted. I want to ensure that the data is fetched accurately and reflects what was initially posted.
3. Simulating the API: I want the mock API to behave like a real backend, where data can be posted and then retrieved. I’m not sure if my current setup is correctly simulating this behavior.

I’m looking for examples or guidance on how to properly store the data using POST and then fetch it using GET in a mock API environment.

i want to fetch them in container

I am trying build a customized form on wix using HTML. on submission i want the form data to store in my wix database i tried this simple code but is not working

i getting this error : TypeError: $w(…).onSubmit is not a function

HTML code.

    <form id="myForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      <button type="submit">Submit</button>
      </form>

JS Code

 import wixData from 'wix-data';

    $w.onReady(function () {
      $w("#myForm").onSubmit((event) => {
        event.preventDefault();
    
        let formData = {
          "name": $w("#name").value,
          "email": $w("#email").value
        };
    
        wixData.insert("FormSubmissions", formData)
          .then((result) => {
            console.log("Data submitted successfully", result);
          })
          .catch((err) => {
            console.log("Error submitting form data", err);
         });
      });
    });

In Nextjs14, the queryClient.prefetchQuery() seems to fetch the request on the client. When I open up the network tab, I see it requesting, and the isLoading state also starts from false to true.

simplified code:

export const getUserArticles = async ({ page, userId }: { userId: number; page: number }) => {
  const response = await httpClient.get<{ message: string; result: any[] }>(
    `/api/users/${userId}/articles?page=${page}`
  )

  return response.data?.result || []
}

export const ARTICLES_QUERY_KEYS = {
  all: ['articles'] as const,
  getUserArticles: (userId: number, page: number) => ['user-articles', userId, page] as const,
}

export const useGetUserArticlesQuery = ({
  userId,
  page = 1,
}: {
  page: number
  userId: (typeof user.$inferSelect)['id']
}) => {
  return useQuery({
    queryKey: ARTICLES_QUERY_KEYS.getUserArticles(userId, page),
    queryFn: () => getUserArticles({ userId, page }),
    refetchOnMount: false,
    refetchOnWindowFocus: false,
  })
}

page.tsx

export default async function Page({ params: { id: pageUserId }, searchParams: { page = '1' } }: PageProps) {
  const { user: loginUser } = await getUser()

  const queryClient = new QueryClient()

  await queryClient.prefetchQuery({
    queryKey: ARTICLES_QUERY_KEYS.getUserArticles(+pageUserId, +page),
    queryFn: () => getUserArticles({ userId: +pageUserId, page: +page }),
  })

return (
   <Card size="2" variant="ghost">
     <Heading as="h2" size="6" mb="8">
       articles
     </Heading>

     <HydrationBoundary state={dehydrate(queryClient)}>
       <Articles />
     </HydrationBoundary>
   </Card>
)

articles.tsx

'use client'

export default function Articles() {
  const { data: articles } = useGetUserArticlesQuery({ userId: 1, page: 1 })

  // this condition works. which I believe shouldn't work.
  if (isLoading) {
    return <div>loading...</div>
  }

  return (
    <Flex direction="column" gap="4" mb="2">
      {articles?.map((post) => (
        <Flex justify="between" key={post.id}>
          <Box>
            <Link
              href={`/articles/${post.id}`}
              size="4"
              weight="medium"
              highContrast
              underline="hover"
              style={{ wordBreak: 'keep-all' }}
            >
              {post.title} ({post.comments})
            </Link>
            <Text as="div" size="2" mb="1" color="gray">
              {post.preview}
            </Text>
            <Flex align="center" gap="2">
              <Text as="div" size="1" color="gray">
                {post.nickname} | {post.likes}
              </Text>
            </Flex>
          </Box>
        </Flex>
      ))}
    </Flex>
  )
}

for the queryClient setup, I followed https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#initial-setup

Next JS 13. I have a an api that takes 6-10 minutes long to process since I have to process 5,000 rows of data. Next js returns an internal server error after 5 minutes, but the api is still running. I have tried to reupload multiple times but it always sends a 500 internal server error while the request on the server is still running and processing.
I get this response below on my api call:
500 internal server error

I have tried extending timeout in my axios call.