Category: javascript

I have a problem in a vue project I have I´m in the process of breaking out components into a components library.

i get this error message when i consume components from my local components library.

Uncaught TypeError: Cannot read properties of undefined (reading 'fd')
    at Function.useColors 

looking where that is in the code i find this

/**
 * Is stdout a TTY? Colored output is enabled when `true`.
 */

function useColors() {
  return 'colors' in exports.inspectOpts
    ? Boolean(exports.inspectOpts.colors)
    : tty__default["default"].isatty(process.stderr.fd);
}

and a litle googling later it is my understanding is that this code is debug-js for node and that other people have gotten the same error in the past. The solution in the old thread is something with babeland how to resolve modules but i do not seem to be able to find out how to do it for rollup.

Manipulating the bundled code manually so the function returns false makes the code run with no problem but i really do not want to do that

How can I fix this the right way. It seems like I miss something super basic that i for some reason cant find the answer to.

package.json

{
  "name": "local-vue-components",
  "version": "0.1.0",
  "main": "lib/index.js",
  "module": "lib/index.esm.js",
  "scripts": {
    "build": "rollup -c"
  },
  "peerDependencies": {
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2"
  },
  "dependencies": {
    "local-library":"*"
  },
  "devDependencies": {
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-json":"^5.0.1",
    "@vue/compiler-sfc": "^3.0.0-rc.5",
    "rollup": "^2.23.1",
    "rollup-plugin-peer-deps-external": "^2.2.3",
    "rollup-plugin-typescript2": "^0.27.2",
    "rollup-plugin-vue": "^5.1.6",
    "typescript": "^3.9.7",
    "vue-template-compiler": "^2.6.11"
  }
}

rollup.config.js

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";
import json from "@rollup/plugin-json";

import packageJson from "./package.json";

export default {
  input: "src/index.ts",
  output: [
    {
      format: "cjs",
      file: packageJson.main,
      sourcemap: true
    },
    {
       format: "esm",
       file: packageJson.module,
       sourcemap: true
    }
  ],
  plugins: [peerDepsExternal(), resolve(), commonjs(), typescript(),json(),vue()]
};

I realise it can also be a problem with the consuming project that uses babel and Webpack with the configs below.

babelrc.js

module.exports = function (api) {
    const presets = [
        '@babel/preset-env', 
        {
            targets: {
                chrome: "70"
            }
        }
    ];
    return presets;
}

webpack.js

const path = require("path");

const CopyWebpackPlugin = require('copy-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

require("@babel/register");

module.exports = {
  entry: {
    babelPollyfill: "@babel/polyfill",
    jprApp: "./src/app/main.ts",
    '
  },
  resolve: {
    extensions: [".js", ".ts", ".json"],
    mainFields: ["browser", "main"],
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  },
  module: {
    rules: [
      {
        test: /.(css)$/,
        use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].css',
          }
        }, {
            loader: 'extract-loader'
        }, {
          loader: 'css-loader',
        }, {
          loader: 'postcss-loader',
        }
      ]
      },
      {
        enforce: "pre",
        use: ["source-map-loader"],
        test: /.js$/
      },
      {
        test: /.ts$/,
        use: 'ts-loader',
        exclude: [/node_modules/,/__test__/]
      },
      {
        test: /.render.js$/,
        use: ["file-loader"]
      },
      {
        test: /.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        }
      }
    ]
  },
  output: {
    publicPath: "",
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
  
    new NodePolyfillPlugin(),
    
  ]
};

As the title says i am new to Web Development and i tried out JQuery and i came across this issue. I am specifying on my code that the element with id #btn1 enables the specific characteristic i write it to and it does that only to elements with id #p1,#p2,#p3. Why do the changes leak to other elements of p?

I expected this to format only the elements with ids(p1,p2,p3) but it formats the other p elements too.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color", "yellow");
  });

  $("#btn1").click(function(){
    $("#p1,#p2,#p3").css({"background-color": "yellow", "font-size": "200%"}); // 
  });
});
</script>

<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

<br><hr><br>

<div id="div1">  

    <h2>This is a heading</h2>


<p id="p1" style="background-color:#ff0000">This is a paragraph.</p>
<p id="p2" style="background-color:#00ff00">This is a paragraph.</p>
<p id="p3" style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button id="btn1">Set multiple styles for p</button>

</div>

</body>

I want that when someone tries to fill the checkbox, the checkbox automatically unchecks itself according to the time of the day.

Here is my code:
`

function myFunction() {
  var myForm = FormApp.getActiveForm();
  var title = myForm.getId();
  var choicesArray = [];
  var item = myForm.getItemById('xxxxxxxx').asCheckboxItem(); // xxxxxx is whatever the id is 
  var choices = item.getChoices();
  var d = new Date();
  choices.forEach(function(a) {
      if (a.checked == true && a.getValue() == "First")
          if (d.getHours() >= 17);
          a.checked = false;
      if (a.checked == true && a.getValue() == "Second")
          if (d.getHours() < 17);
          a.checked = false;
  });
}

`
After creating trigger nothing happens and i am able to select both the checkboxes which shouldn’t happen. Nor the trigger triggers.

if that is not possible then how to delete the second choice and only show the other one?

what is the purpose of comma (,) after div?

var div, container = document.getElementById("container");

is it for declaring two variables at ones or something else

here is the rest of the code:

for (var i = 0; i < 5; i++) {
  div = document.createElement("div");
  div.onclick = function() {
    alert("This is box #" + i);
  };
  container.appendChild(div);
}

I have this code of mine wherein before I store the values of my array, they are first sorted and filtered to the the nearest value of the user input by 5 data points. Here is my code:enter image description here

I tried storing them from the console.log(findClosest) command but it doesn’t seem to work

I want to find all the words that occur after a particular word. For eg:

I want to deliver goods from Indonesia to India

Here, I want all the words that occur after to ,so the result should be an array containing deliver and India

I have a local environment where I have set up SpeechSynthesis and it works.
But I would like to be able to change volume, Rate, etc.
My problem is that I can’t get it to change any of this once it starts reading.
Have tried google and read here on stackoverflow but can’t find any answer as to whether it is possible.

And then my last question.

I have been told by some now that it should be possible to get it to use a custom voice possibly through a third party service.
But I haven’t been able to find any documentation on this and when I ask the same people again, they can’t find any documentation on it either.

So would also like to know if there are any of you who know the answer to this.

I’m creating an Input element on client side and gave a pattern to an input in HTML,

it should prevent user inputs according to the given pattern,

it doesn’t work as I stated in the code below,

it returns true every time, it doesn’t test the regex pattern properly

init(params) {
        // ^(d{1,9}.d{1,3})|(.d{1,3})|(d{1,9})$
        // create the cell
        // <input class="" pattern="asdasd"/>
        debugger;
        this.eInput = document.createElement('input');
        this.eInput.className = 'ag-input-field-input ag-text-field-input';
        //var regex = /^(d{1,9}.d{1,3})|(.d{1,3})|(d{1,9})$/;
        this.eInput.setAttribute("pattern", "^(\d{1,9}\.\d{1,3})|(\.\d{1,3})|(\d{1,9})$");
        /* var a = regex.test(params.value);*/
        if (this.isCharNumeric(params.charPress)) {
            this.eInput.value = params.charPress;
        } else {
            if (params.value !== undefined && params.value !== null) {
                this.eInput.value = params.value;
            }
        }

        this.eInput.addEventListener('keypress', (event) => {
            var regex = new RegExp(/(d{1,3}.d{1,3})|(.d{1,3})|(d{1,3})/);

            if (!this.isKeyPressedNumeric(event)) {
                this.eInput.focus();
                if (event.preventDefault) event.preventDefault();
            } else if (this.isKeyPressedNavigation(event)) {
                event.stopPropagation();
            }

            if (event.target.value != "") {
                if (!regex.test(event.key)) {
                    console.log('FALSE INPUT');
                    this.eInput.focus();
                    if (event.preventDefault) event.preventDefault();
                } else {
                    console.log('VALID INPUT');
                }
            }
            
        });

        // only start edit if key pressed is a number, not a letter
        var charPressIsNotANumber =
            params.charPress && '1234567890'.indexOf(params.charPress) < 0;
        this.cancelBeforeStart = !!charPressIsNotANumber;
    }

I’ve tested other regex patterns that works normally, but none of them works in my case

I want to check the expiration date of purchased product and if the date is expired then I want to remove it.

The way I’m saving it to DB:

  let currentDate = new Date();
  let currentDateMiliseconds = currentDate.getTime();

  let courseExpiresMiliseconds =
    currentDateMiliseconds + 90 * 24 * 60 * 60 * 1000;  // 90 Days validity
  let courseExpires = new Date(courseExpiresMiliseconds);

  let userPurchasedCourses = new usersPurchasedCourses({
    username: `${value_a}`,
    coursesList: JSON.parse(value_c.replaceAll(".", '"')),
    expirationDate: `courseExpires,
    tran_date: tran_date,
    status: "VALID"
  });
  await userPurchasedCourses.save();

I’m getting the data:

let userCourses = await usersPurchasedCourses.find({
    $and: [{ username: req.body.username }, { status: "VALID" }],
   });

Here I want to have the list of only valid data. No expired ones. How may I do that?

I’ve blob URL but I want extension also. after generate blob url is:src code ss src=”blob:http://127.0.0.1:5501/e136ad51-5bac-4ceb-bf1c-dce8e8b2bf32″

trying to get image extension

so I’m trying to get an input element from Twitter but when I run it, it keeps giving me an error like this in the node terminal, as a result, a browser window made from this code will close itself because it doesn’t find the right input selector. how do I grab the right kind of input?

Error: No element found for selector: input[name="text"]

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  })
  const page = await browser.newPage();
  page.setViewport({
    width: 1280,
    height: 800,
    isMobile: false
  })
  await page.goto("https://twitter.com/i/flow/login");
  await page.type('input[name="text"]', 'username', {delay: 25})
})();

i tried different selectors including class attribute but still gets error

I’m using Autodesk Forge to view DWG file in browser. It was successful. One thing I’m trying to figure out right now is how to do pre selection on which layout to view in Forge viewer. When I upload DWG into the bucket, there are several layouts available in document browser

I have a lot of drawings and some of them didn’t display ‘Layout2’ (which I wanna display in viewer) on first load. I need to open the document browser and select ‘Layout2’ manually.

How do I do like pre select on ‘Layout2’ every time the viewer load.

I have created two select menus in React that consist of the same option values. When a user selects option 1 from the first list (or second), that option should be removed/hidden from the second menu so a user doesn’t have the opportunity to have duplicate options selected. These options are mapped out as an array of objects. As I’m still new to programming I’m unsure of the best way to approach this problem.

I attempted to apply a filter method to update the list options. I expected it to list all option values that were !== to the first option selected, however arrive at a typeError and haven’t been able to move past this.

I found this link here is the same as what I am trying to do but the code is quite old and as I’m still new to programming I’m unsure how to refactor it:

https://stackoverflow.com/questions/26137309/remove-selected-option-from-another-select-box

Would really appreciate any advice / assistance.

I can’t figure out how to google this but in short I have a react app that will be included in a website that already has bootstrap and styles, I need to include bootstrap for development purposes but not as part of the final product as styles will be fed into the app through the parent app. What is the best way to fulfill this pattern?

The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.

its working fine when i try to in localhost but if i host my project in netlify then its send me this error The current domain is not authorized for OAuth operations