Category: javascript

I’m looking to write a Chrome Extension which records what the user speaks into their microphone on a Zoom. However, it needs to cancel out what other participants are saying (which the microphone picks up on, assuming no headphones). I know I can do this via a desktop application which separates the microphone and system audio and cancels out the system audio. But I am hitting a roadblock coming up w/ an alternative that would work via a Chrome extension. A workaround is to have the user install Krisp and select that as their microphone source (since Krisp separates system audio) but I’m looking for something not dependent on a desktop install. Am I missing anything obvious here? Thanks!

I have been trying to make a invite manager but when a user leaves it doesn’t remove a invite and add a leave, i am not sure whats the issue

  let user = db.get(`author_${member.guild.id}_${member.id}`)
  if (!user) {
    let channel = db.get(`leave_channel_${member.guild.id}`)
    if (!channel) return;
    member.guild.channels.cache.get(channel).send(`${member.username} has left, but i can't figure out who invited him.`)
    return
  }


  console.log(`user left`)
  db.add(`invites_${member.guild.id}_${user}.leaves`, 1)
  db.subtract(`invites_${member.guild.id}_${user}.invites`, 1)
  let channel = db.get(`leave_channel_${member.guild.id}`)
  if (!channel) return;
  let leave = db.get(`leave_message_${member.guild.id}`)
  if (!leave) leave = config.leave;

  let com = leave.split("[user]")
    .join(client.users.cache.get(member.id).username)
    .split("[inviter]")
    .join(client.users.cache.get(user).username)
    .split("[invites]")
    .join(db.get(`invites_${member.guild.id}_${user}.invites`))
    .split("[total]")
    .join(db.get(`invites_${member.guild.id}_${user}.regular`))
    .split("[leaves]")
    .join(db.get(`invites_${member.guild.id}_${user}.leaves`))
    .split("[jointimes]")
    .join(db.get(`invites_${member.guild.id}_${user}.joins`))



  member.guild.channels.cache.get(channel).send(com)
}
)

I am building a form where I have to login into the user by their phone number on CLICKING the send code button I got an error TypeError: Object(…) is not a function where it says that window is not a function can anybody solve my problem.
Error Image

Here is some of my code

import * as React from "react";
import { useState } from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import background from "../staticfiles/signin-background.jpg";
import "react-phone-input-2/lib/style.css";
import { auth, db, captcha } from "../config/Config";
import { RecaptchaVerifier } from "firebase/auth";
import { Link as RouterLink } from "react-router-dom";
import { useHistory } from "react-router-dom";

import socialMediaAuth from "../service/auth";

function Copyright(props) {
  return (
    <Typography
      variant="body2"
      color="text.secondary"
      align="center"
      {...props}
    >
      {"Copyright © "}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const theme = createTheme();

export default function SignInUserPhone() {
  let history = useHistory();
  const [PhoneNumber, setPhoenNumber] = useState("");
  const [VerificationCode, setVerificationCode] = useState("");

  const [error, setError] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(PhoneNumber);

    console.log(error);
  };
  const handleSubmit2 = (e) => {
    e.preventDefault();
    console.log(VerificationCode);
  };

  const handleOnClick = async (provider) => {
    const res = await socialMediaAuth(provider);
    await db
      .collection("SignedUpUsersData")
      .doc(res.uid)
      .set({
        Email: res.email,
        Name: res.displayName,
      })
      .then(() => {
        history.push("/");
      })
      .catch((err) => setError(err.message));
  };

  const handleUserButton = (event) => {
    event.preventDefault();
    history.push("/signinuser");
  };

  const handleSellerButton = (event) => {
    event.preventDefault();
    history.push("/signinseller");
  };
  auth.languageCode = "it";
  const setUpCaptcha = () => {
    window.recaptchaVerifier = auth().RecaptchaVerifier("recaptcha-container", {
      size: "invisible",
      callback: (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        console.log(response);
        console.log("Ok recapthca sloved");
        onSignInSubmit();
      },
    });
  };

  const onSignInSubmit = (e) => {
    e.preventDefault();
    setUpCaptcha();
    const phoneNumber = PhoneNumber;
    const appVerifier = window.recaptchaVerifier;

    auth()
      .signInWithPhoneNumber(PhoneNumber, appVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        window.confirmationResult = confirmationResult;
        console.log(confirmationResult);
        // ...
      })
      .catch((error) => {
        // Error; SMS not sent
        // ...

        console.log(error.message);

        //( Or, if you haven't stored the widget ID:
      });
  };

  return (
    <ThemeProvider theme={theme}>
      <Grid container component="main" sx={{ height: "100vh" }}>
        <CssBaseline />
        <Grid
          item
          xs={false}
          sm={4}
          md={7}
          sx={{
            backgroundImage: `url(${background})`,
            backgroundRepeat: "no-repeat",
            backgroundColor: (t) =>
              t.palette.mode === "light"
                ? t.palette.grey[50]
                : t.palette.grey[900],
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
          <Box
            sx={{
              my: 8,
              mx: 4,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Sign in With Phone Number
            </Typography>

            <Box
              sx={{
                my: 4,
                mx: 4,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <ButtonGroup size="large" disableElevation variant="contained">
                <Button onClick={handleSellerButton}>SELLER</Button>
                <Button onClick={handleUserButton}>USER</Button>
              </ButtonGroup>
            </Box>

            <Box
              component="form"
              noValidate
              onSubmit={onSignInSubmit}
              sx={{ mt: 1 }}
            >
              <TextField
                margin="normal"
                required
                fullWidth
                id="email"
                label="Phone Number"
                name="Phone"
                autoComplete="phoenumber"
                value={PhoneNumber}
                onChange={(phone) => setPhoenNumber(phone.target.value)}
              />
              <div id="recaptcha-container"></div>

              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
                onSubmit={onSignInSubmit}
                id="sign-in-button"
              >
                Send Code
              </Button>

              <Grid container>
                <Grid item xs></Grid>
                <Grid item>
                  <Link
                    component={RouterLink}
                    to="/signup"
                    href="#"
                    variant="body2"
                  >
                    {"Don't have an account? Sign Up"}
                  </Link>
                </Grid>
              </Grid>
            </Box>
            {error && <div>{error}</div>}
            <Box
              component="form"
              noValidate
              onSubmit={handleSubmit2}
              sx={{ mt: 1 }}
            >
              <TextField
                margin="normal"
                required
                fullWidth
                id="email"
                label="Verification Code"
                name="Verification"
                autoComplete="Verification"
                value={VerificationCode}
                onChange={(verification) =>
                  setVerificationCode(verification.target.value)
                }
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
              >
                Submit
              </Button>

              <Copyright sx={{ mt: 5 }} />
            </Box>
          </Box>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}

All the files are correctly exported from config js cause sign in with email and password and sign in with social media are working

I know this error message has been asked before, but I don’t believe other solutions work for me.

I’m trying to build a backend express server to handle API calls for a React app. I wrote a getData() function to do this, used by an app.post() to send it to the front-end.

The error only pops up when using res.send(), e.g. my API calls work, just break when sending.

Here’s the relevant code:

const getData = async route => {
    const config = {
        headers: {
            'Authorization': `Bearer ${TOKEN}`,
            'Content-Type': 'application/json;charset=utf-8'
        }
    }

    let corrRoute = route[0] == '/' ? route : '/' + route
    return await axios(`${URL}${corrRoute}?api_key=${API_KEY}`, config)
}


app.post('/api', async (req, res) => {
    let { route } = req.body
    res.send(await getData(route))
})

If I replace the res.send at the end there with console.log it prints out perfectly fine. The error is being produced in the server’s index.js file, not in the React app.

Here is the full error text:

[server] (node:9680) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
[server]     --> starting at object with constructor 'ClientRequest'    
[server]     |     property 'socket' -> object with constructor 'TLSSocket'
[server]     --- property '_httpMessage' closes the circle
[server]     at JSON.stringify (<anonymous>)

I’ve been trying to complete the “Use model.findOne() to Return a Single Matching Document from Your Database” challenge under the MongoDB and Mongoose lessons on freeCodeCamp, but despite having the same code as the solution, the test fails.

I’ve double checked the formatting of my MongoDB URI in the .env, I’ve tried troubleshooting it as a CORS error, and I’ve even tried disabling my firewall and turning off adblockers / script blockers for freeCodeCamp, mongoDB, and Replit, but to no avail.

When I click the submission button to complete the challenge, the console immediately displays the POST request, but it doesn’t show up under the Network tab in DevTools, and after a varying number of seconds, [object Object] is printed to the console.

What can I do to resolve, or even debug this?

Thanks in advance for your time and consideration.

Edit: The function that specifically should be executing is findOneByFood.

myApp.js –

const mongoose = require('mongoose');
const { Schema } = mongoose;

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true });

const personSchema = new Schema({
  name : { type: String, required: true },
  age : Number,
  favoriteFoods : [{ type: String, unique: true }]
});

let Person = mongoose.model('Person', personSchema);

const createAndSavePerson = (done) => {
  const johnCarmack = new Person({ name: "John Carmack", age: 51, favoriteFoods: ['iunno', 'Probably Pizza', 'I'm Not Googling It'] });
  johnCarmack.save((err, data) => {
  if (err) return done(err);
  done(null, data);
  });
};

const createManyPeople = (arrayOfPeople, done) => {
  Person.create(arrayOfPeople, (err, data) => {
    if (err) return done(err);
    done(null, data);
  })
};

const findPeopleByName = (personName, done) => {
  Person.find({ name: personName }, (err, data) => {
    if (err) return done(err);
    done(null, data);
  });
};

const findOneByFood = (food, done) => {
  Person.findOne({ favoriteFoods: food }, (err, data) => {
    if (err) return console.log(err);
    done(null, data);
  });
};

const findPersonById = (personId, done) => {
  done(null /*, data*/);
};

const findEditThenSave = (personId, done) => {
  const foodToAdd = "hamburger";

  done(null /*, data*/);
};

const findAndUpdate = (personName, done) => {
  const ageToSet = 20;

  done(null /*, data*/);
};

const removeById = (personId, done) => {
  done(null /*, data*/);
};

const removeManyPeople = (done) => {
  const nameToRemove = "Mary";

  done(null /*, data*/);
};

const queryChain = (done) => {
  const foodToSearch = "burrito";

  done(null /*, data*/);
};

/** **Well Done !!**
/* You completed these challenges, let's go celebrate !
 */

//----- **DO NOT EDIT BELOW THIS LINE** ----------------------------------

exports.PersonModel = Person;
exports.createAndSavePerson = createAndSavePerson;
exports.findPeopleByName = findPeopleByName;
exports.findOneByFood = findOneByFood;
exports.findPersonById = findPersonById;
exports.findEditThenSave = findEditThenSave;
exports.findAndUpdate = findAndUpdate;
exports.createManyPeople = createManyPeople;
exports.removeById = removeById;
exports.removeManyPeople = removeManyPeople;
exports.queryChain = queryChain;

server.js –

 * DO NOT EDIT THIS FILE
 * the verification process may break
 *******************************************/
const express = require("express");
const app = express();
let mongoose;
try {
  mongoose = require("mongoose");
} catch (e) {
  console.log(e);
}
const fs = require("fs");
const path = require("path");
const bodyParser = require("body-parser");
const router = express.Router();

const enableCORS = function (req, res, next) {
  if (!process.env.DISABLE_XORIGIN) {
    const allowedOrigins = ["https://www.freecodecamp.org"];
    const origin = req.headers.origin;
    if (!process.env.XORIGIN_RESTRICT || allowedOrigins.indexOf(origin) > -1) {
      console.log(req.headers.origin + ", " + req.method);
      res.set({
        "Access-Control-Allow-Origin": origin,
        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
        "Access-Control-Allow-Headers":
          "Origin, X-Requested-With, Content-Type, Accept",
      });
    }
  }
  next();
};

// global setting for safety timeouts to handle possible
// wrong callbacks that will never be called
const TIMEOUT = 10000;

app.use(bodyParser.urlencoded({ extended: "false" }));
app.use(bodyParser.json());

app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "views", "index.html"));
});

router.get("/file/*?", function (req, res, next) {
  if (req.params[0] === ".env") {
    return next({ status: 401, message: "ACCESS DENIED" });
  }
  fs.readFile(path.join(__dirname, req.params[0]), function (err, data) {
    if (err) {
      return next(err);
    }
    res.type("txt").send(data.toString());
  });
});

router.get("/is-mongoose-ok", function (req, res) {
  if (mongoose) {
    res.json({ isMongooseOk: !!mongoose.connection.readyState });
  } else {
    res.json({ isMongooseOk: false });
  }
});

const Person = require("./myApp.js").PersonModel;

router.use(function (req, res, next) {
  if (req.method !== "OPTIONS" && Person.modelName !== "Person") {
    return next({ message: "Person Model is not correct" });
  }
  next();
});

router.post("/mongoose-model", function (req, res, next) {
  // try to create a new instance based on their model
  // verify it's correctly defined in some way
  let p;
  p = new Person(req.body);
  res.json(p);
});

const createPerson = require("./myApp.js").createAndSavePerson;
router.get("/create-and-save-person", function (req, res, next) {
  // in case of incorrect function use wait timeout then respond
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  createPerson(function (err, data) {
    clearTimeout(t);
    if (err) {
      return next(err);
    }
    if (!data) {
      console.log("Missing `done()` argument");
      return next({ message: "Missing callback argument" });
    }
    Person.findById(data._id, function (err, pers) {
      if (err) {
        return next(err);
      }
      res.json(pers);
      pers.remove();
    });
  });
});

const createPeople = require("./myApp.js").createManyPeople;
router.post("/create-many-people", function (req, res, next) {
  Person.remove({}, function (err) {
    if (err) {
      return next(err);
    }
    // in case of incorrect function use wait timeout then respond
    let t = setTimeout(() => {
      next({ message: "timeout" });
    }, TIMEOUT);
    createPeople(req.body, function (err, data) {
      clearTimeout(t);
      if (err) {
        return next(err);
      }
      if (!data) {
        console.log("Missing `done()` argument");
        return next({ message: "Missing callback argument" });
      }
      Person.find({}, function (err, pers) {
        if (err) {
          return next(err);
        }
        res.json(pers);
        Person.remove().exec();
      });
    });
  });
});

const findByName = require("./myApp.js").findPeopleByName;
router.post("/find-all-by-name", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  Person.create(req.body, function (err, pers) {
    if (err) {
      return next(err);
    }
    findByName(pers.name, function (err, data) {
      clearTimeout(t);
      if (err) {
        return next(err);
      }
      if (!data) {
        console.log("Missing `done()` argument");
        return next({ message: "Missing callback argument" });
      }
      res.json(data);
      Person.remove().exec();
    });
  });
});

const findByFood = require("./myApp.js").findOneByFood;
router.post("/find-one-by-food", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  let p = new Person(req.body);
  p.save(function (err, pers) {
    if (err) {
      return next(err);
    }
    findByFood(pers.favoriteFoods[0], function (err, data) {
      clearTimeout(t);
      if (err) {
        return next(err);
      }
      if (!data) {
        console.log("Missing `done()` argument");
        return next({ message: "Missing callback argument" });
      }
      console.log(data);
      res.json(data);
      p.remove();
    });
  });
});

const findById = require("./myApp.js").findPersonById;
router.get("/find-by-id", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  let p = new Person({ name: "test", age: 0, favoriteFoods: ["none"] });
  p.save(function (err, pers) {
    if (err) {
      return next(err);
    }
    findById(pers._id, function (err, data) {
      clearTimeout(t);
      if (err) {
        return next(err);
      }
      if (!data) {
        console.log("Missing `done()` argument");
        return next({ message: "Missing callback argument" });
      }
      res.json(data);
      p.remove();
    });
  });
});

const findEdit = require("./myApp.js").findEditThenSave;
router.post("/find-edit-save", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  let p = new Person(req.body);
  p.save(function (err, pers) {
    if (err) {
      return next(err);
    }
    try {
      findEdit(pers._id, function (err, data) {
        clearTimeout(t);
        if (err) {
          return next(err);
        }
        if (!data) {
          console.log("Missing `done()` argument");
          return next({ message: "Missing callback argument" });
        }
        res.json(data);
        p.remove();
      });
    } catch (e) {
      console.log(e);
      return next(e);
    }
  });
});

const update = require("./myApp.js").findAndUpdate;
router.post("/find-one-update", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  let p = new Person(req.body);
  p.save(function (err, pers) {
    if (err) {
      return next(err);
    }
    try {
      update(pers.name, function (err, data) {
        clearTimeout(t);
        if (err) {
          return next(err);
        }
        if (!data) {
          console.log("Missing `done()` argument");
          return next({ message: "Missing callback argument" });
        }
        res.json(data);
        p.remove();
      });
    } catch (e) {
      console.log(e);
      return next(e);
    }
  });
});

const removeOne = require("./myApp.js").removeById;
router.post("/remove-one-person", function (req, res, next) {
  Person.remove({}, function (err) {
    if (err) {
      return next(err);
    }
    let t = setTimeout(() => {
      next({ message: "timeout" });
    }, TIMEOUT);
    let p = new Person(req.body);
    p.save(function (err, pers) {
      if (err) {
        return next(err);
      }
      try {
        removeOne(pers._id, function (err, data) {
          clearTimeout(t);
          if (err) {
            return next(err);
          }
          if (!data) {
            console.log("Missing `done()` argument");
            return next({ message: "Missing callback argument" });
          }
          console.log(data);
          Person.count(function (err, cnt) {
            if (err) {
              return next(err);
            }
            data = data.toObject();
            data.count = cnt;
            console.log(data);
            res.json(data);
          });
        });
      } catch (e) {
        console.log(e);
        return next(e);
      }
    });
  });
});

const removeMany = require("./myApp.js").removeManyPeople;
router.post("/remove-many-people", function (req, res, next) {
  Person.remove({}, function (err) {
    if (err) {
      return next(err);
    }
    let t = setTimeout(() => {
      next({ message: "timeout" });
    }, TIMEOUT);
    Person.create(req.body, function (err, pers) {
      if (err) {
        return next(err);
      }
      try {
        removeMany(function (err, data) {
          clearTimeout(t);
          if (err) {
            return next(err);
          }
          if (!data) {
            console.log("Missing `done()` argument");
            return next({ message: "Missing callback argument" });
          }
          Person.count(function (err, cnt) {
            if (err) {
              return next(err);
            }
            if (data.ok === undefined) {
              // for mongoose v4
              try {
                data = JSON.parse(data);
              } catch (e) {
                console.log(e);
                return next(e);
              }
            }
            res.json({
              n: data.n,
              count: cnt,
              ok: data.ok,
            });
          });
        });
      } catch (e) {
        console.log(e);
        return next(e);
      }
    });
  });
});

const chain = require("./myApp.js").queryChain;
router.post("/query-tools", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  Person.remove({}, function (err) {
    if (err) {
      return next(err);
    }
    Person.create(req.body, function (err, pers) {
      if (err) {
        return next(err);
      }
      try {
        chain(function (err, data) {
          clearTimeout(t);
          if (err) {
            return next(err);
          }
          if (!data) {
            console.log("Missing `done()` argument");
            return next({ message: "Missing callback argument" });
          }
          res.json(data);
        });
      } catch (e) {
        console.log(e);
        return next(e);
      }
    });
  });
});

app.use("/_api", enableCORS, router);

// Error handler
app.use(function (err, req, res, next) {
  if (err) {
    res
      .status(err.status || 500)
      .type("txt")
      .send(err.message || "SERVER ERROR");
  }
});

// Unmatched routes handler
app.use(function (req, res) {
  if (req.method.toLowerCase() === "options") {
    res.end();
  } else {
    res.status(404).type("txt").send("Not Found");
  }
});

const listener = app.listen(process.env.PORT || 3000, function () {
  console.log("Your app is listening on port " + listener.address().port);
});

/********************************************
 * DO NOT EDIT THIS FILE
 * the verification process may break
 *******************************************/

I am wanting to get this function to work to display the timezone in the footer of my webpage. As of now, when the webpage is loaded, the timezone does not appear in the footer of the webpage as intended.

This is what I have for JS script:

// This function displays the timezone.

function timezoneName() {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(timezone);
document.getElementById("timezone").innerHTML = timezone;
}
timezoneName();

This is what I have for .html footer:

<footer>
<p id="timezone"></p>
</footer>

When I click on an ‘imposter’ I want it to become grey with some text as you can see in my CSS with the selector .imposter.voted. But when I click another imposter I want that one to appear grey and the previous one to appear like usual again.

When I try this.classList.remove("voted") it does not work and it just makes all the imposters I select grey. The class does not get removed. I don’t see where I went wrong.

imposters = document.querySelectorAll(".imposter");

for (let i = 0; i < imposters.length; i++) {
  imposters[i].addEventListener("click", function() {
    this.classList.add("voted");
  });
}

.imposter.voted {
  background-color: gray;
  position: relative;
  opacity: 0.7;
}

.imposter.voted::after {
  content: "I voted";
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-block;
  font-family: "Comic Sans Ms";
  color: red;
}

.imposters__voting {
  text-align: right;
}

<main class="dashboard">
  <h1>Who Is The Imposter?</h1>
  <div class="imposters">
    <div class="imposter">Baba</div>
    <div class="imposter">Baraki</div>
    <div class="imposter">Garfield</div>
    <div class="imposter">Erik</div>
    <div class="imposter">GreenBlood4</div>
    <div class="imposter">Easter</div>
  </div>
</main>

I just found about pnpm today and it helped solve my issue with npm timing out on my installation which is amazing.
I’ve a problem with pnpm tho in the docker image.

Previously with just npm I had unprivileged user like so

FROM node:14.17.3-slim

# build args
ARG NPM_AUTH_TOKEN
ARG HOME=/home/app
ARG NPMRC_PATH=$HOME/.npmrc

# setup unprivileged user
RUN useradd -Umrd $HOME app
WORKDIR $HOME
USER app

# copy configuration
COPY --chown=app:app "bin" "bin"
COPY --chown=app:app "package.json" "package-lock.json" "webpack.config.js" ".babelrc" ./

RUN ./bin/write_npmrc && 
    npm ci --production=false

ENV NODE_ENV=development
VOLUME ["$HOME/config", "$HOME/log", "$HOME/src"]
CMD ["npm", "start"]
EXPOSE 9000

But if I switch to the pnpn I’m no longer able to proceed with building the image due to Permission Denied and I need to use root user.

FROM node:14.17.3-slim

# build args
ARG NPM_AUTH_TOKEN
ARG HOME=/home/app
ARG NPMRC_PATH=$HOME/.npmrc

RUN apt-get update && apt-get install -y curl 
 && rm -rf /var/lib/apt/lists/*
RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm

WORKDIR $HOME

# copy configuration
COPY "bin" "bin"
COPY "package.json" "pnpm-lock.yaml" "webpack.config.js" ".babelrc" ./

RUN ./bin/write_npmrc && 
    pnpm install --frozen-lockfile

ENV NODE_ENV=development
VOLUME ["$HOME/config", "$HOME/log", "$HOME/src"]
CMD ["pnpm", "start"]
EXPOSE 9000

Is there a way so I can keep

# setup unprivileged user
    RUN useradd -Umrd $HOME app
    WORKDIR $HOME
    USER app

With pnpm instead?

I want to use fetch or axios to download a html content of a page, this works fine but the javascript code inside the page does not run

here is what i’ve tried

document.getElementById('test').innerHTML=
await (await fetch('url')).text()

what i want is similar to this answer, but i want to get the page with the javascript inside processed instead of running a script.

Can I run a JS script from another using `fetch`?

My goal is to create a boostrapEmail template that i can send parameters and make it dynamic, using localstorage

https://bootstrapemail.com/docs/introduction

I received this string: Ticket #: 9 (ORIGINAL)nDate/Time: 12/10/2020 03:33 PM from an API, I want to breakline using n and I use useState to print it:

const [Ticket, setTicket] = useState('');

const getData = async (ID, Serial) => {
    try{
      const res = await FetchRewards(ID, Serial)
      console.log('%c Ticket has been found Successfully. Status: 200 ', 
     'background: #28a745; color: #fff')

        setTicket(res.data.ticket.ticket);
        console.log(res)
    }
    catch (err){
      console.error("404: Ticket not found")
    }
  }

but my problem is trying to make split on Ticket to make breaklines using n, this is my split function to do that:

const text = `Ticket #: 9 (ORIGINAL)nDate/Time: 12/10/2020 03:33 PM`;

let ticketWrap = text.split("n").map(i =>{
    return `<p>${i}</p>`; // this is JSX in my real code
});

console.log(ticketWrap)

When I add a text with n,ticketWrap returns the breakline, but using Ticket it returns: Ticket #: 9 (ORIGINAL)nDate/Time: 12/10/2020 03:33 PM

I am trying to write a Javascript/appscript for an Appsheet app. I cant figure this out, if someone could please help.

I have Three Sheets:
Project
Subtasks
Notes

I would like to be able to send the Project owner an email, that includes the project name all of the tasks assigned to that project (relationship via PK/FK ID,Project Name) and all of the notes assigned to that project (same relationship as Notes PK/FK ID,Project Name)

• I have provided a sample of all the tables, their columns, and an ideal sample output

idealOutput

I built a react component package locally, with Rollup.

Tech stack of package is: React, typescript, styled-components and so on…

1. That package lives inside of the one project.

2. Now I am trying to use that package inside of another project locally.

3. Now I am trying to test that package

   • yarn link
   • open second project executed yarn link “package-name”
   • Imprted component (package)
   • yarn start

Result:

Failed to compile.

../enrollment-client/src/components/GeneralSectionForm/GeneralSectionForm.tsx 31:7
Module parse failed: Unexpected token (31:7)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { TOAST_ERRORS } from '../../utils/constants';
| 
> export type QuestionElementRef = {
|   id: string | undefined;
|   element: HTMLDivElement | null;

got the error regarding that the current webpack configuration inside of the project is not enough to compile this package – something like that.

That is something that I am currently investigating, and trying to figure out why? 🙂

Any help will be super appreciated

Situation: I have a div with a Tippy attached to it, and inside the DIV there are highlighted spans with their own tooltips. They all use ‘click’ as triggers.

Ideal behavior: When I click on a highlight, only the highlight Tippy should show.

Current behavior: Both tooltips show at the same time.

I can catch the click with onTrigger, using “event.target”. However, “return false” or “instance.hide()” do not prevent it from showing. Is there a way I can do that with onTrigger?

tippy(divEl, {
content: 'Tooltip!',
   allowHTML: true,
  onTrigger(instance, event) {
    if (event.target.className == 'highlight') 

{console.log('It should hide the tooltip!');
instance.hide();
return false;
}
  },
    arrow: true,
    interactive: true,
    trigger: 'click',
    theme: 'light-border',
    zIndex: 9999
      });
}

I got it working with the following trick, but it wouldn’t work if I had other DIVs inside the main DIV:

tippy(divEl, { ...,

onShow(instance) {
    if (item.lastChild.nodeName == "DIV") {return false}
  },
});

i tried the lightbox from W3 school and it works nicely, but if I have more modals on one page the script open all of them together.

Is it possible to set within one script some condition which modal should be opened? Or/and is this the correct way of thinking how to code it?

I omitted from code lower the styling and tons of other content to make it shorter but i didn’t do any changes in the original script from W3 except of adding new line of “myModal1” to functions open/closeModal which is the problem i try to solve.

Thank you very much in advance for your answers. 🙂

<div id="epo20-23">
    <div class="row">
        <div class="whole-gallery">
            <h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
            </h2>
        </div>
    </div>
    <div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <div class="mySlides">
                <div class="numbertext">1 / 2</div>
                <img src="image1.jpg" style="width:100%">
            </div>
            <div class="mySlides">
                <div class="numbertext">2 / 2</div>
                <img src="image2.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            <div class="caption-container">
                <p id="caption"></p>
            </div>
            <div class="column-container">
                <div class="column">
                    <img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
                </div>
                <div class="column">
                    <img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
                </div>
            </div>
        </div>
    </div>
</div>
<div id="epo24-38">
    <div class="row">
        <div class="whole-gallery">
            <h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
            </h2>
        </div>
    </div>
    <div id="myModal1" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <div class="mySlides">
                <div class="numbertext">1 / 2</div>
                <img src="image3.jpg" style="width:100%">
            </div>
            <div class="mySlides">
                <div class="numbertext">2 / 2</div>
                <img src="image4.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            <div class="caption-container">
                <p id="caption"></p>
            </div>
            <div class="column-container">
                <div class="column">
                    <img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
                        alt="img3">
                </div>
                <div class="column">
                    <img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
                        alt="img4">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function openModal() {
        document.getElementById("myModal").style.display = "block";
        document.getElementById("myModal1").style.display = "block";
    }

    function closeModal() {
        document.getElementById("myModal").style.display = "none";
        document.getElementById("myModal1").style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        captionText.innerHTML = dots[slideIndex - 1].alt;
    }
</script>

I am unable to fetch the query parameters of frontend GET request, on the backend side.
I tried using url and query. I need to fetch the query on the nodejs side.
Kindly suggest a suitable method that would help me get the details on GET request using axios.

code –

component.ts – angular file

googleSearch(googleText){


let params = new HttpParams();
    params = params.append('q', googleText.trueLocation);
       

return new Promise((resolve, reject) => {
this.httpClient.get("http://localhost:3003/seekSearchApi" , ({params:params}))
      .pipe(map(Response => Response))
    
      .pipe(catchError(this.errorHandler))
      .subscribe((res: Response) => {

        this.writeItOutput = res;
        
        resolve(this.writeItOutput);

      });

    })
    
  

}
errorHandler(error: HttpErrorResponse) {
  return throwError(error.message || 'server Error');
}
}

server.js- express file

app.use('/seekSearchApi', require('./server/nodejs-serverapi'));

applicationserver.js – nodejs file

function seekSearchApi(req,res) { 

var query = require('url').parse(req.url,true).query;

console.log("req.query.q", query.q);  //no response

console.log("Inside seekSearchApi");

  axios({
    method: 'get',
    url: 'https://serpapi.com/search.json?',
    data: {
      api_key: "xxxx",
      q:query.q
      hl: "en",
      gl: "us",
      google_domain: "google.com"
    }
  }).then((response) => {
    res.send(stringify(response))
   
  }, (error) => {
    console.log(error);
  });