Category: javascript

After I install Firebase CLI using npm package npm install -g firebase-tools , When type firebase is showing

$ firebase C:UsersLenovoAppDataRoamingnpm/node_modules/node/bin/node: line 1: This: command not found

So I tried upgrade the Node.js and I restarted the command it showing

$ node -v C:UsersLenovoAppDataRoamingnpm/node_modules/node/bin/node: line 1: This: command not found

Kindly anyone resolve the issue PLEASE!!!!

I want to know where is the problem and what to do to rectify the issue?

We recently upgraded to NodeJS 20, and had to upgrade a bunch of other things.
We updated from vue/cli-service 4 -> 5 and from Webpack 4 -> 5, which changed our webpack-dev-server to v4

The problem we are facing is running our dev server via vue-cli-service serve.
It starts up fine with no errors on port 8888, and when we make changes to a .vue file it says:

Compiling…

WARNING Compiled with 1 warning
9:16:03 PM

warning in
./src/components/FrequentLinks/CustomizeFrequentLinks.vue?vue&type=template&id=077c815c&scoped=true

Module Warning (from
./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) : component lists rendered with v-for should
have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key
for more info.

App running at:

• Local: http://localhost:8888/
• Network: http://localhost:8888/

The warning seems to be unrelated to my issue. The main problem is that when I visit the page that I changed on port 8888 locally, it doesn’t show the change. This all worked correctly before the upgrade. I followed the webpack-dev-server migration guide and I believe I corrected everything. I’m including the before and after of my vue.config.js files.

Here are my config files.

webpack.config.js

const webpack = require('webpack');
    
    module.exports = {
      module: {
        rules: [
          {
            test: /.scss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              'sass-loader',
            ],
          },
        ],
      },
      mode: 'development',
    
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production'),
        }),
      ],
    
    };

vue.config.js (pre-migration, webpack-dev-server 3.x.x)

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const packageJSON = require('./package.json');
const outputDirectory = `target/classes/dist/${packageJSON.name}/vue`;

module.exports = {
  assetsDir: 'static',
  lintOnSave: true,
  // Use a relative path for assets
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',

  outputDir: outputDirectory,
  productionSourceMap: false,
  transpileDependencies: ['vue-resource'],
  devServer: {

    proxy: {
      '/': {
        target: 'http://localhost:8081/', // this configuration needs to correspond to the Spring Boot backends' application.properties server.port
        ws: true,
        changeOrigin: true,
      },
    },

    disableHostCheck: true,
    writeToDisk: true,
    port: 8888,
    contentBase: [
      path.join(__dirname, 'public'),
    ],
  },
  chainWebpack: (config) => {
    config.optimization.splitChunks({
      chunks: 'all',
    });

    // Register the webpack-assets-manifest plugin to generate an asset manifest
    config
      .plugin('assets-manifest')
      .use(WebpackAssetsManifest);
  },
  css: {
    extract: {
      filename: 'css/[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
      },
    },

  },
};

vue.config.js (post-migration, webpack-dev-server 4.x.x)

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const packageJSON = require('./package.json');
const outputDirectory = `target/classes/dist/${packageJSON.name}/vue`;

module.exports = {
  assetsDir: 'static',
  lintOnSave: true,
  // Use a relative path for assets
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',

  outputDir: outputDirectory,
  productionSourceMap: false,
  transpileDependencies: ['vue-resource'],
  devServer: {
    port: 8888,
    proxy: {
      '/': {
        target: 'http://localhost:8081/', // this configuration needs to correspond to the Spring Boot backends' application.properties server.port
        ws: true,
        changeOrigin: true,
        secure: false,
        logLevel: 'debug',
      },
    },
    allowedHosts: 'all',
    devMiddleware: {
      index: false,
      writeToDisk: true,
    },
    static: {
      directory: path.join(__dirname, 'public/'),
    },
    open: { // Opens browser in incognito mode
      app: {
        name: 'chrome',
        arguments: ['--incognito'],
      },
    },
  },
  chainWebpack: (config) => {
    config.optimization.splitChunks({
      chunks: 'all',
    });

    // Register the webpack-assets-manifest plugin to generate an asset manifest
    config
      .plugin('assets-manifest')
      .use(WebpackAssetsManifest);
  },
  css: {
    extract: {
      filename: 'css/[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
      },
    },
  },
};

I try to install pythonmonkey in windows 10 using pip and anaconda it’s working fine,
but when I try to install pythonmonkey in ubuntu 18 linux using miniconda in myserver it getting error

I have fresh env in miniconda then I run command pip install pythonmonkey but I got this error

(py3917) admin@server:~$ pip install pythonmonkey
Collecting pythonmonkey
  Using cached pythonmonkey-0.2.1.tar.gz (112 kB)
  Installing build dependencies ... done
  Getting requirements to build wheel ... done
  Preparing metadata (pyproject.toml) ... done
Collecting pminit (from pythonmonkey)
  Using cached pminit-0.2.1-cp39-cp39-manylinux_2_27_x86_64.whl
Building wheels for collected packages: pythonmonkey
  Building wheel for pythonmonkey (pyproject.toml) ... error
  error: subprocess-exited-with-error

  × Building wheel for pythonmonkey (pyproject.toml) did not run successfully.
  │ exit code: 1
  ╰─> [29 lines of output]
      fatal: not a git repository (or any of the parent directories): .git
      Traceback (most recent call last):
        File "/tmp/pip-install-ph7wqk6v/pythonmonkey_34995c194ff54c12b4582084f0010eb0/build.py", line 61, in <module>
          build()
        File "/tmp/pip-install-ph7wqk6v/pythonmonkey_34995c194ff54c12b4582084f0010eb0/build.py", line 55, in build
          execute("git submodule update --init --recursive", cwd=TOP_DIR)
        File "/tmp/pip-install-ph7wqk6v/pythonmonkey_34995c194ff54c12b4582084f0010eb0/build.py", line 27, in execute
          raise subprocess.CalledProcessError(return_code, cmd)
      subprocess.CalledProcessError: Command 'git submodule update --init --recursive' returned non-zero exit status 128.
      Traceback (most recent call last):
        File "/home/admin/miniconda3/envs/py3917/lib/python3.9/site-packages/pip/_vendor/pyproject_hooks/_in_process/_in_process.py", line 353, in <module>
          main()
        File "/home/admin/miniconda3/envs/py3917/lib/python3.9/site-packages/pip/_vendor/pyproject_hooks/_in_process/_in_process.py", line 335, in main
          json_out['return_val'] = hook(**hook_input['kwargs'])
        File "/home/admin/miniconda3/envs/py3917/lib/python3.9/site-packages/pip/_vendor/pyproject_hooks/_in_process/_in_process.py", line 251, in build_wheel
          return _build_backend().build_wheel(wheel_directory, config_settings,
        File "/tmp/pip-build-env-7_kl5896/overlay/lib/python3.9/site-packages/poetry/core/masonry/api.py", line 58, in build_wheel
          return WheelBuilder.make_in(
        File "/tmp/pip-build-env-7_kl5896/overlay/lib/python3.9/site-packages/poetry/core/masonry/builders/wheel.py", line 88, in make_in
          wb.build(target_dir=directory)
        File "/tmp/pip-build-env-7_kl5896/overlay/lib/python3.9/site-packages/poetry/core/masonry/builders/wheel.py", line 123, in build
          self._build(zip_file)
        File "/tmp/pip-build-env-7_kl5896/overlay/lib/python3.9/site-packages/poetry/core/masonry/builders/wheel.py", line 172, in _build
          self._run_build_script(self._package.build_script)
        File "/tmp/pip-build-env-7_kl5896/overlay/lib/python3.9/site-packages/poetry/core/masonry/builders/wheel.py", line 266, in _run_build_script
          subprocess.check_call([self.executable.as_posix(), build_script])
        File "/home/admin/miniconda3/envs/py3917/lib/python3.9/subprocess.py", line 373, in check_call
          raise CalledProcessError(retcode, cmd)
      subprocess.CalledProcessError: Command '['/home/admin/miniconda3/envs/py3917/bin/python', 'build.py']' returned non-zero exit status 1.
      [end of output]

  note: This error originates from a subprocess, and is likely not a problem with pip.
  ERROR: Failed building wheel for pythonmonkey
Failed to build pythonmonkey
ERROR: Could not build wheels for pythonmonkey, which is required to install pyproject.toml-based projects

this is my version I’m using of miniconda, python, pip, node npm

Linux Ubuntu 18.04.6 LTS (Bionic Beaver)

(py3917) admin@server:~$ conda --version
conda 23.9.0
(py3917) admin@server:~$ python --version
Python 3.9.17
(py3917) admin@server:~$ pip --version
pip 23.3.1 from /home/admin/miniconda3/envs/py3917/lib/python3.9/site-packages/pip (python 3.9)
(py3917) admin@server:~$ node --version
v18.16.0
(py3917) admin@server:~$ npm --version
9.5.1

can someone help me? Thanks

I have create new fresh environtment in miniconda to deploy my application in server ubuntu, then I install the dependency and I got error in dependency pythonmonkey, how can make it work for install?

I am new in the world of JavaScript and I want to make a app which reads the username and prints out the username in the Console Log.

function OnClickButton() {
  var textarea = document.getElementById("Username");
  console.log(textarea.nodeValue);
}

button {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
    color:black;
    background-color: aliceblue;
    border-style: hidden;
    shape-outside: border-box;
    cursor: default;
    height: 36px;
    width: 144px;
    border-radius: 9px;
    top: 500px;
    left: 680px;
    position: absolute;
}

button:hover {
    background-color: orangered;
}

<label id="UsernameLabel" style="font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue;position:absolute; top: 250px;left:600px; width: 144px; height: 18px; border-radius:9px; text-align: center; font-size: medium; " >Username:</label>
  
<input type="text" id="Username"  style="font-family:Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue; position: absolute; top:250px;left:760px; width:144px; height:27px; border-radius: 9px;" maxlength="10"></input>
  
<label id="PasswordLabel" style="font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue;position:absolute; top: 350px;left:600px; width: 144px; height: 18px; border-radius:9px; text-align: center; font-size: medium;">Password:</label>
  
<input type="password"   id="Password" style="font-family:Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue; position: absolute; top:350px;left:760px; width:144px; height:27px; border-radius: 9px;" maxlength="10"></input>
  
<button onclick="OnClickButton()">Sign in</button>

<script src="frontSourceCode.js"></script>   

When I run the program every time I press on the button the NULL word is added to the Console Log.After some search it is the value property of a HTML Element which returns the output of a HTML Element however I cant find it in the list of available properties given out by VSCode.Unless the value property exists, which property should I search out?

I can see the HTMLCollectionOf with the follwing code

        let cards = document.getElementsByClassName(this.card_class) ;
        console.log( "CCC cards are ")
        console.log(cards)

Here is what I get from Chrome conole

But I cannot iterate through this HTMLCollection

I have tried using different iterations method (see below) and none will iterate through the collection.

        let cards = document.getElementsByClassName(this.card_class) ;
        console.log( "CCC cards are ")
        console.log(cards)

 console.log( "cards length with object,keys ",  Object.keys(cards).length)
 console.log( "cards length with cards.length ",  cards.length)

        Array.from(document.getElementsByClassName(this.card_class)).forEach(
            function(element, index, array) {
                console.log( "cccccc with Array.from(document.getElementsByClassName for")
                console.log(element.tagName);
            }
        );


        Array.prototype.forEach.call(cards, function(el) {
            // Do stuff here
            console.log( "cccccc in Array.prototype.forEach.call ")
            console.log(el.tagName);
        });
        const length = Object.keys(cards).length;
        for ( var i=0; i<length;i++){
            console.log( "cccccc in Array.prototype.forEach.call ")
            console.log(cards[i].tagName);
        }

        const s =  Array.from(cards);
        console.log(" Array.from(cards) is ")
        console.log(s)

        Array.from(cards).forEach( (e ) =>{
            console.log( "cccc  Array.from(cards).forEach( (e ) ")
            console.log(e)
        });

As you can see from the chrome console image, none of the iterations go through

Can you please let me know what I am doing incorrectly? Thanks!

Consider the following functions:

async function printAB() {
  console.log("A");
  await new Promise((resolve) => setTimeout(resolve, 3000));
  console.log("B");
}

async function printC() {
  console.log("C");
}

export async function f() {
  printAB();
  printC();
}

the usual expected output of f() would be

A
C
B

as printC can execute while printAB is waiting. Indeed, this is what we get if all or none of the functions are on the server side (including f being called from a server component). However, if printAB and printC are server actions, and f is a function in a user component, we get

A
B
C

. Why does this happen? This behavior could cause lower performance if we use multiple actions at once, is there a way to avoid it?

As you can see in my included JSFiddle here, I am trying to enable a Toggle Button after ticking all other Toggle/switches on, it is definitely working with a Simple Submit Button show there, but not so much with a Toggle that says Pending/Done (Pending(Orange color), (Done(Green color).
Any Help is appreciated.

$(document).on("change keyup", ".required", function(e) {
  let Disabled = $(".required").length;
  $(".required").each(function() {
    if(this.checked) Disabled--;
  });

  if (Disabled) {
    $(".toggle-disabled").prop("disabled", true);
  } else {
    $(".toggle-disabled").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bootstrap5- 
toggle.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/bootstrap5- 
toggle.ecmas.min.js"></script>
<link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-1.13.6/b-2.4.2/b-html5-2.4.2/date- 
1.5.1/r-2.5.0/sc-2.2.0/datatables.min.css" rel="stylesheet"> 

<div class="container">
  <form action="#">
    <div class="container">
      <div class="form-check form-switch">
        <input class="form-check-input filled-in box required" type="checkbox" 
        role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Gmail</label>
      </div>
      <div class="form-check form-switch">
        <input class="form-check-input filled-in box required" type="checkbox" 
        role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Pika</label>
      </div>
      <div class="form-check form-switch">
        <input class="form-check-input filled-in box required" type="checkbox" 
        role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Justice</label>
      </div>


      <div class="form-check form-switch">
        <button type="button" class="toggle-disabled" disabled>Submit</button>
      </div>
      <!--Toggle button -->                         
      <input type="checkbox"  class="toggle-disabled" data-toggle="toggle" data- 
      size="small" data-onlabel="Done" data-offlabel="Pending" data-onstyle="success"
      data-offstyle="warning" disabled >
    </div>
  </form>
</div>

When I am creating a new chart, I am using an image for the title like this:

title: {
    useHTML: true,
    text: "<img src='https://abload.de/img/logo0tjrw.png' alt='' />",
    align: 'left'
    },

When I first run the program, the title is not aligned properly unless the window gets resized, then the title snaps into the correct position.

First load:

Second load or browser window resized:

Here is a jsfiddle as an example:
https://jsfiddle.net/7e2wbshm/1/

I’m working with SuiteScript and have encountered a scenario where I need to record 20 sales order records. My understanding is that each call to the Record.save() method consumes units, similar to points. This leads me to two questions:

1. To save 20 sales order records, do I need to call Record.save() 20 times, resulting in a significant consumption of units?
2. Is there a more efficient way to save these 20 records with a single call to Record.save(), which would reduce the unit cost?

I’m looking for a solution that allows me to save multiple records efficiently without excessively depleting my units. Any insights or alternative methods for handling this in SuiteScript would be greatly appreciated. Thank you!

if(!user) return “tidakada”
let names = user.name
let history = user.histories

let validasi = checkValidGame(history)
if(!validasi) return "tidak ada validasi"

let getArcadeResultOutput = getArcadeResult(history)
let function2 = getArcadeResultOutput.total
let function3 = getArcadeResultOutput.histories

let function4 = getPrizes(function2)

let obj = {
    names,
    gameReport: function3,
    function4
}
return obj

howwww
if(!user) return “tidakada”
let names = user.name
let history = user.histories

let validasi = checkValidGame(history)
if(!validasi) return "tidak ada validasi"

let getArcadeResultOutput = getArcadeResult(history)
let function2 = getArcadeResultOutput.total
let function3 = getArcadeResultOutput.histories

let function4 = getPrizes(function2)

let obj = {
    names,
    gameReport: function3,
    function4
}
return obj

My application uses a JSON API built in python. It returns JSON encoded data to the frontend, which needs to be parsed and shown to the user. Here’s an example API (omitting security details):

curl -i 'http://localhost:5000/api`

HTTP/1.1 200 OK
Server: Werkzeug/2.3.7 Python/3.11.1
Date: Wed, 15 Nov 2023 01:28:09 GMT
Content-Type: application/json
Content-Length: 32
Connection: close

{"data": "this\nis\na\ntest"}%

The frontend Svelte app uses fetch() to retrieve the data from the backend. It processes the Response.text() using JSON.parse() to make an object usable for the app:

const respText = await resp.text();
const respData = JSON.parse(respText);

> console.log(respData)
{data: 'this\nis\na\ntest'}

Here’s my question: Why doesn’t JSON.parse() unescape the newlines in the string? I would expect the result to be {data: 'thisnisnantest'}, but instead the string contains the same escaped newlines sent by the backend.

When I parse the payload manually in Chrome DevTools, I see the expected result:

> JSON.parse(`{"data": "this\nis\na\ntest"}`)
{data: 'thisnisnantest'}

How come the code running in my application behaves differently? This seems like a very strange behavior. I’d appreciate anyone’s advice or help in understanding this issue. I’ve scoured stackoverflow and github but haven’t been able to find a question similar to this one. Thanks in advance!

So I have this large json file it is like a dictionary, contains words and their meaning I am using for in loop to iterate through it to find a string then return the word and its meaning to display to html but it is taking longer like 13ms to load the last items or any word starting with Y or Z.I am using html, and JavaScript to fetch and display.

what technology do I need to make it faster and or what do I do?

Good day all

I have to use a JS library in my Flutter web app.

The library’s guide says that write code as below (IMP.init, IMP.request_pay)

- HTML -

<script src="https://cdn.iamport.kr/v1/iamport.js"></script>
<script>
    IMP.init("imp67011510");
    IMP.request_pay({
        pg : 'kcp',
        pay_method : 'card',
        merchant_uid: "IMP"+makeMerchantUid, 
        name : 'carrot 10kg',
        amount : 50000,
        buyer_email : '[email protected]',
        buyer_name : 'Paul',
        buyer_tel : '010-1234-5678',
        buyer_addr : 'Somewhere in Korea',
        buyer_postcode : '123-456',
        display: {
            card_quota: [0]
        }
    }, function (rsp) { // callback
        if (rsp.success) {
            console.log(rsp);
        } else {
            console.log(rsp);
        }
    });
    
</script>

So I tried to execute both functions (IMP.init and IMP.request_pay) in my Flutter web app.

First, added the library to the path /web/index.html in my project

<head>
...
  <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
...
</head>

Second, created Dart functions calling the JS function.

- Dart -

import 'package:js/js.dart';

@JS('IMP.init')
external void init(dynamic text);

@JS('IMP.request_pay')
external void requestPay(dynamic obj, dynamic callback); // is it correct?

Third, wanted to call above Dart functions but I’m not sure what should be put in as the callback parameter and can’t even know I’ve created requestPay() correctly.

- Dart -

Map<String, dynamic> obj = {
  pg : 'kcp',
  pay_method : 'card',
  merchant_uid: "IMP"+makeMerchantUid, 
  name : 'carrot 10kg',
  amount : 50000,
  buyer_email : '[email protected]',
  buyer_name : 'Paul',
  buyer_tel : '010-1234-5678',
  buyer_addr : 'Somewhere in Korea',
  buyer_postcode : '123-456',
  display: {
    card_quota: [0]
  }
};

init("imp67011510");
requestPay(obj, callback);

So I wonder how I can call those JS functions in my Flutter web app.

Your answer will be truly helpful.

I’m trying to update a template when a pie chart slice is clicked.

This is the template.

    <h1>{{slice && slice.name}}</h1>
    <h1>{{slice && slice.value}}</h1>

Here’s a demo.
https://stackblitz.com/edit/stackblitz-starters-p8bxjx?file=src%2Fmain.ts,src%2Fecharts.component.ts

When one of the pie chart segments is clicked it emits an object containing the name and value of the segment that was clicked.

The main component receives this via the listener onPieSelect and sets the slice property on the main component like this:

  onPieSelect(e: any) {
    console.log('slice clicked', e);
    this.slice = e;
  }

We can see that the object is being received via the log, however the template is not being updated.

Any ideas?

I’m trying to update an object property within an array based on a unique id property.
For example I have this in state:

const [speakers, setSpeakers] = useState([
    {
      id: nanoid(),
      name: "",
      title: "",
      position: "",
      description: ""
    }
  ])

I have a card, with a form in it, 3 text inputs, 1 textarea input, and the last piece is a field where I can upload a photo, crop it, get the base64 string, now I want to save this value in a photo property, inside the correct form. I created a “Add new speaker” button, and wrote some code that adds a new card (with the form), and also a delete button, which removes the specific card. All of that is working great, the whole point of my issue is that, after I crop the image, I want my state to look like this:

const [speakers, setSpeakers] = useState([
    {
      id: nanoid(),
      name: "",
      title: "",
      position: "",
      description: "",
      photo: "base64 string here"
    }
  ])

I know this is wrong, but I’m using the index, instead of the unique id, but this is what I have so far, that isn’t working.

const getBase64Image = data => {
    imageRef.current.src = data
    let index = imageRef.current.id
    
    setSpeakers([
      {
        // object that we want to update
        ...speakers[index],
        photo: data // update the value of specific key
      }
    ])
  }

Just know that the data, is the base64 string. It works on the first try, but then if I add a second speaker/card/form, it removes the first object, and acts odd. Just to be clear, in the end, I should have/want this:

const [speakers, setSpeakers] = useState([
    {
      id: "123",
      name: "Bob",
      title: "",
      position: "",
      description: "",
      photo: "base64 string here"
    },
    {
      id: "456",
      name: "Peter",
      title: "",
      position: "",
      description: "",
      photo: "new base64 string here"
    },
    {
      id: "789",
      name: "Tim",
      title: "",
      position: "",
      description: "",
      photo: "new new base64 string here"
    },
  ])

Coming from Vue, new to React, thank you!!