Is there any way to handle null inside mathjs evaluate() function
Category: javascript
Category Added in a WPeMatico Campaign
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘firefoxSample’)
I encountered an “Uncaught (in promise) TypeError” with the error message “Cannot read properties of undefined (reading ‘firefoxSample’)” while working on my code. I’m seeking assistance from the community to help me understand and resolve this issue.
Here’s a brief explanation of the problem: When running my code, I’m encountering an error related to accessing the ‘firefoxSample’ property, indicating that it’s being accessed on an undefined value. However, I’ve checked my code, and I’m unsure why this property is undefined in this context.
I have already tried the following steps to troubleshoot the issue:
- I’ve verified that the object or variable I’m accessing the ‘firefoxSample’ property from is properly initialized and assigned a value.
- Ensure that any asynchronous code or promises involved are handled correctly.
- Checked for the existence of the ‘firefoxSample’ property on the object or variable before accessing it.
- Inserted console.log statements to track the code flow and debug the issue.
- Commented all components in my
index.jsfile.
Despite these efforts, I’m still unable to identify the root cause of the problem. I would greatly appreciate any insights, suggestions, or solutions that the community can provide to help me resolve this issue.
This is the whole error in the console:
VM6244:86 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘firefoxSample’)
at eval (eval at buildCode (localhost/:606:31),
at v (eval at buildCode (localhost/:606:31),
at eval (eval at buildCode (localhost/:606:31),
at l (eval at buildCode (localhost/:606:31),
at Generator.eval [as _invoke] (eval at buildCode (localhost/:606:31),
at Generator.eval [as next] (eval at buildCode (localhost/:606:31),
at r (eval at buildCode (localhost/:606:31),
at s (eval at buildCode (localhost/:606:31),
Thank you in advance for your assistance!
NextAuth.js with nextjs 13 Custom Login Page Redirection Loop with Middleware – 307 Temporary Redirect
I’m facing an issue with NextAuth.js with Nextjs version 13 when using a custom page for login. Whenever I try to access /auth/signin, it redirects to /login, but then it redirects again to /auth/signin, creating a redirection loop. This issue only occurs when I have the following middleware enabled to protect the pages:
middleware.ts
export { default } from 'next-auth/middleware';
If I remove the middleware, everything works fine. I’ve gathered network details when this issue occurs:
Network Details:
- Request URL:
http://localhost:3000/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F - Request Method: GET
- Status Code: 307 Temporary Redirect
- Remote Address: [::1]:3000
- Referrer Policy: strict-origin-when-cross-origin
Response:
Connection: close
Date: Sun, 16 Jul 2023 17:35:12 GMT
Location: /api/auth/signin?callbackUrl=%2Flogin%3FcallbackUrl%3Dhttp%253A%252F%252Flocalhost%253A3000%252F
Transfer-Encoding: chunked
NextAuth Configuration:
import NextAuth, { Session } from 'next-auth';
import { JWT } from 'next-auth/jwt';
import CredentialsProvider from 'next-auth/providers/credentials';
import useRequest from '../../../../hooks/useRequest';
export const authOptions = {
providers: [
CredentialsProvider({
// ... (credentials provider configuration)
}),
],
callbacks: {
async jwt({ token, user }: { token: any; user: any }) {
// ... (jwt callback configuration)
return { ...token, ...user };
},
async session({ session, token }: { session: Session; token: any }) {
// ... (session callback configuration)
session.user = token as any;
return session;
},
},
pages: {
signIn: '/login',
},
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
Can someone help me understand why this redirection loop is happening and how to resolve it? It seems to be related to the custom login page and the middleware used for protecting pages. Any insights or suggestions to fix this issue would be greatly appreciated. Thank you!
JS Change style attributes in databable-checkbox
I use datatable to display data send by JSON. true/false information is displayed by checkbox using the render function:
'render': function(data, type, full, meta) {
var checkbox = $("<input/>", {"type": "checkbox" }, {"color": "red"} );`
if (data == "1") {
checkbox.attr("checked", "checked");
// checkbox.addClass("checkbox_checked");
} else {
checkbox.removeAttr("checked");
// checkbox.addClass("checkbox_unchecked");
}
return checkbox.prop("outerHTML")
}
So, due to only display the data and not change, I set attr to disabled. Doing so, the checkbox is greyed out, and not very visible. So I’m looking for an solution to change the color of the checkbox to red/green for more visibility.
But I cant find a solution to change the style attributes. If I remove the ‘disabled’ attr the checkbox is displayed with blue background and white hook. But now, the user is able to change it.
Please provide a hint for the best solution
- overwrite the style (color) for disabled checkboxes
- other idea to display the checkbox more significant
ng2-pdf-viewer in angular not showing checkbox icon
We are using ng2-pdf-viewer npm package for rendering pdf. we have checkboxes in pdf but while viewing pdf we are not able to view yes icon instead we are getting cross icon
when open in browser
when open using ng2-pdf-viewer
Please suggest solution for this font issue
e.preventDefault() cannot stop enter on claude.ai
I’m working on a TamperMonkey script and I want to modify the default behavior of the Enter key in a text box. Currently, pressing Enter submits the text, but I want it to insert a new line instead. Specifically, I want Enter to act as if Shift+Enter was pressed, which inserts a line break (br tag) in the text box.
Here are the requirements I’m trying to achieve:
Pressing Enter should insert a new line in the text box.
Pressing Shift+Enter should maintain its original behavior of inserting a line break.
Pressing Ctrl+Enter should perform the default action of submitting the text box.
However, my current TamperMonkey script is not working as expected. Shift+Enter and Ctrl+Enter work fine, but pressing Enter still submits the text box instead of inserting a new line. Additionally, for debugging purposes, I would also like to insert the text “ABCDE” when Enter is pressed, but nothing happens.
I suspect that there might be an event or a front-end framework with a higher priority that is preventing the default Enter key behavior from being modified.
Can anyone suggest a solution or provide insights into how I can overcome this issue? Is there a specific event or front-end framework that I should be aware of that has a higher priority in preventing default events?
// ==UserScript==
// @name Claude.ai Swap Enter and Ctrl+Enter
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Swap enter and ctrl+enter on claude.ai
// @author You
// @match https://www.claude.ai/*
// @icon https://www.google.com/s2/favicons?domain=claude.ai
// @grant none
// ==/UserScript==
(function() {
const target = document.querySelector('body');
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === "childList") {
const editor = document.querySelector('.ProseMirror');
if (editor) {
editor.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.ctrlKey) {
e.preventDefault();
const sel = window.getSelection();
const range = sel.getRangeAt(0);
const br = document.createElement('br');
const textNode = document.createTextNode('abcde'); // The text to insert
range.deleteContents();
range.insertNode(br);
range.insertNode(textNode);
// Move the caret to after the break line and text
range.setStartAfter(textNode);
range.setEndAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
return false;
}
if (e.key === 'Enter' && e.ctrlKey) {
e.preventDefault();
const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');
const event = new Event('submit');
form.dispatchEvent(event);
if (event.defaultPrevented) {
submitButton.click();
}
}
});
}
}
});
});
const config = {
attributes: true,
childList: true,
characterData: true,
subtree: true,
};
observer.observe(target, config);
})();
How to plot vertical wind barb profiles with d3-windbarbs in JavaScript
I have vertical wind profile data, e.g. altitude (meters above gnd, wind direction and wind speed) One profile goes from 40meters to 1200meters ..data example
# Data File Format (remainder of file): Height(m), Wind Direction, Wind Speed(m/s)
584
40.1007, 198.0468, 5.4182
41.9659, 198.2216, 5.4562
43.831, 198.3939, 5.4942
where 584 is number of rows of data. Data files are created in 10 minute intervals,so 144 files/profiles per day.. I am working with d3.js and the windbarb/arrow software. But can’t get the windbarbs to display vertically. notice the image included. Everything, seems to work except proper vertical placement of the windbarbs. My software is included
<svg width="800" height="400">
<g transform="translate(150, 20)"></g>
</svg>
let plt_data = [];
var myData = [
[40,35],
[10,120],
[20,245],
[60,90],
[30,185]
];
d3.select('svg')
.selectAll('g')
.data( myData)
.join('g')
.attr('height', function(d,i){
return i*3;
})
.attr('x', function(d, i) {
plt_data[i] = new WindArrow(myData[i][0],myData[i][1],'svg g',40);
})
.attr('y', function(d, i) { return i*50; });
[enter image description here][1]
Right-click an link and open in new tab does not trigger window eventlistener “load”
I have come across an issue which I never saw before. When a user opens a page in new tab, then my functions do not fire and the page needs to be reloaded manually to see the contents. This does not happen if a user just loads the page directly.
I have a laravel app and for the frontend I use laravel’s blade system, but I load most of the content with AJAX with help of jQuery/JS.
I do this like this:
In blade a have a barebones layout and when the page loads I load everything:
window.addEventListener('load', (event) => {
init_introduction();
init_content();
});
I also tried:
$(document).ready(function() {
init_introduction();
init_content();
});
I also tried moving the files out of the ready and load functions and simply having them at the beginning of my JS file:
init_introduction();
init_content();
Why is that happening? The issue hapens only of a user uses the browser function by right clicking a link and opening the page in new tab. I need to keep this feature.
Can someone explain whats going on and how to fix it?
How to use react context in an axios interceptor?
I’m trying to call a function logout() if the server responds to my request with a 401 status code. Now I’m getting this error printed in my browser console:
Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
How can I fix this?
api.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response.status === 401) {
const { logout } = useContext(AuthContext);
logout();
}
return Promise.reject(error);
}
);
Import … from ‘react-router-dom’ not found
I have installed ‘react-router-dom’ and ‘react’, and am trying to implement a routing feature. However, the import does not seem to be detected in my code editor as shown below:
Here’s the code to the Navbar component with some slight edit (which is copied directly from bootstrap https://getbootstrap.com/docs/5.3/components/navbar/):
import { Link } from 'react-router-dom';
const Navbar= () => {
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container-fluid">
<Link className="navbar-brand" to="/">Movie Browser</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
<li className="nav-item">
<Link className="nav-link disabled">Coming soon</Link>
</li>
</ul>
<form className="d-flex" role="search">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
);
}
export default Navbar;
Based on the code above, clicking on the equivalent tags in the webpage should load up another path I have created, i.e. either “/” or “/about”.
However, clicking does not work as the webpage does not render anything new and sticks to the same content. However, the url on top of the webpage does not change. Only when I manually enter the url does the webpage start rendering properly.
I’d like to seek advice on what is the issue here.
Here are the versions for my react and react-router-dom:
Thank you.
discordjs move user to specific channel after press reaction (not voice channel)
how can i move the user to a another channel. (not a voice channel)
here is my code in the index.js
client.on('messageReactionAdd', async (reaction, user) => {
if (reaction.message.partial) await reaction.message.fetch();
if (reaction.partial) await reaction.fetch();
if (user.bot) return;
if (!reaction.message.guild) return;
// TR
if (reaction.message.channel.id == "1129857569003937803") {
if (reaction.emoji.name === "ws") {
await reaction.message.guild.members.cache.get(user.id).roles.remove(["1127642705456009326", "1128261558598893640"]);
await reaction.message.guild.members.cache.get(user.id).roles.add(["1129829277416837130", "1129823658362273892"]);
}
}
});
when the roles deleted the user stays on the same channel .
Why this error shows up Missing handler function for “GET:/enteredUsers” route. in fastify.js
I am making an API to process fingerprint data coming from esp32. My code was working fine until I have one route when I added the second route it is continuously giving error and I am not getting it
Error
{"level":50,"time":1689522738157,"pid":12816,"hostname":"UMAR","err":
{"type":"FastifyError","message":"Missing handler function for "GET:/enteredUsers"
route.","stack":"FastifyError: Missing handler function for "GET:/enteredUsers" route.n at
Object.route (D:\FYP\fingerprint-API\node_modules\fastify\lib\route.js:198:13)n at
Object.prepareRoute (D:\FYP\fingerprint-API\node_modules\fastify\lib\route.js:160:18)n
at Object._get [as get] (D:\FYP\fingerprint-API\node_modules\fastify\fastify.js:259:34)n at fingerprintRoutes (D:\FYP\fingerprint-API\Routes\fingerprintRoute.js:43:13)n at
Plugin.exec (D:\FYP\fingerprint-API\node_modules\avvio\plugin.js:130:19)n at
Boot.loadPlugin (D:\FYP\fingerprint-API\node_modules\avvio\plugin.js:272:10)n at
processTicksAndRejections (node:internal/process/task_queues:83:21)","code":"FST_ERR_ROUTE_MISSING_HANDLER","name":"FastifyE
rror","statusCode":500},"msg":"Missing handler function for "GET:/enteredUsers" route."}
fingerprintcontroller.js
require("dotenv").config();
const { MongoClient } = require("mongodb");
const uri = process.env.URI;
const client = new MongoClient(uri);
const getFingerprintById = async (req, res) => {
try {
await client.connect();
await client.db("admin").command({ ping: 1 });
const database = client.db("Fyp");
const collection = database.collection("Fingerprint_data");
const collection2 = database.collection('UsersEntered');
const query = { fingerprintId: req.params.id };
const fingerprint = await collection.findOne(query);
await collection2.insertOne(fingerprint);
console.log(fingerprint)
res.send(fingerprint);
} catch (error) {
console.log(error);
}
};
const enteredUsersData = async(req,res) => {
try{
await client.connect();
const database = client.db("Fyp");
const collection2 = database.collection('UsersEntered');
const data = await collection2.find({}).toArray();
console.log(data);
res.send(data);
}
catch(err)
{
console.log(err);
}
}
module.exports = {
enteredUsersData,
getFingerprintById,
};
fingerprintRoute.js
const FingerprintController = require('../Controllers/fingerprintController.js');
const getFingerprintById = {
schema:{
response:{
200:{
type: 'object',
properties: {
fingerprintName: {type:'string'},
LicensePlate: {type:'string'},
}
}
},
params: {
type: 'object',
additionalProperties: false,
required: [ 'id' ],
properties: { id: { type: 'string' }
}
}
},
handler: FingerprintController.getFingerprintById
}
const enteredUsersData = {
schema:{
response:{
200:{
type: 'object',
properties: {
fingerprintName: {type:'string'},
LicensePlate: {type:'string'},
}
}
},
handler: FingerprintController.enteredUsersData
}
};
async function fingerprintRoutes(fastify,options,done){
fastify.get('/enteredUsers',enteredUsersData); //
fastify.get('/fingerprint/:id',getFingerprintById) // http://localhost:3000/fingerprint/1
done();
}
module.exports = fingerprintRoutes;
index.js
const fastify = require('fastify')({logger:true})
const { MongoClient } = require('mongodb');
require('dotenv').config();
const uri = process.env.URI;
const client = new MongoClient(uri);
const fastifyCors = require('@fastify/cors');
fastify.register(fastifyCors, {
// Set the CORS options
origin: '*',
methods: 'GET,PUT,POST,DELETE',
});
const PORT = process.env.PORT || 3000;
fastify.get('/',(req,res) => {
res.send(' My fingerprint API is running')
})
fastify.register(require('./Routes/fingerprintRoute'))
async function run(){
try {
// Connect the client to the server (optional starting in v4.7)
await client.connect();
// Establish and verify connection
await client.db("admin").command({ ping: 1 });
// insert a document
console.log("Connected successfully to server");
} finally {
// Ensures that the client will close when you finish/error
await client.close();
}
}
run().catch(console.dir);
fastify.listen({port: PORT},(err,address) => {
if(err){
fastify.log.error(err)
process.exit(1);
}
console.log(`Server is running on PORT ${address}`)
})
Check these out. I am not getting the error because according to me everything is ok handlers are defined but its still giving error that there is missing handler function.
Failed to execute ‘createElement’ on ‘Document’: The tag name provided (‘href=a”https:’) is not a valid name
I was using the html-to-react parsing library, and initially, my code was working fine. But suddenly, it started giving this error. And as soon as I remove this function
<div className="w-3/4 ">
<div
key={idx}
className="items-flex-start mt-5 h-full justify-end self-start rounded-[20px] bg-indigo-100 bg-cover p-[16px] text-start dark:text-gray-800"
>
{htmlToReactParser.parse(
record.content.replaceAll(
"<strong",
'<strong style="cursor: pointer;"'
)
)}
</div>
</div>
<div className="mt-24 flex w-1/4 justify-center">
<div>
<input
type="checkbox"
onChange={() => handleCheckboxChange(record)}
/>
<strong>Download this part</strong>
</div>
</div>
</div>
the code executes correctly.
My full code of the file is
const HtmlToReact = require("html-to-react").Parser;
const Solutions = ({
error,
problems,
solution,
success,
problemId,
changeProblem,
getProblems,
regenerateSolution,
CreateParticularPdf,
solutionLoading,
createInteraction,
createPdf,
}: SolutionPayload) => {
const htmlToReactParser = new HtmlToReact();
{..rest of mycode...}
return (
<div className="mt-1">
<Card
extra={
"items-flex-start w-full max-h-[32rem] min-h-48 p-[16px] bg-cover mt-10 overflow-y-scroll"
}
>
{solution && solution.description ? (
solution.description.map((record: SolutionContent, idx) =>
record.role === "assistant" ? (
<div className="mb-5 flex">
<div className="w-3/4 ">
<div
key={idx}
className="items-flex-start mt-5 h-full justify-end self-start rounded-[20px] bg-indigo-100 bg-cover p-[16px] text-start dark:text-gray-800"
>
{htmlToReactParser.parse(
record.content.replaceAll(
"<strong",
'<strong style="cursor: pointer;"'
)
)}
</div>
</div>
<div className="mt-24 flex w-1/4 justify-center">
<div>
<input
type="checkbox"
onChange={() => handleCheckboxChange(record)}
/>
<strong>Download this part</strong>
</div>
</div>
</div>
) : record.role === "user" &&
!record.content.startsWith("Please provide an example of") ? (
<div className="flex">
<div className="mt-10 flex w-1/4 justify-center">
<div>
<input
type="checkbox"
onChange={() => handleCheckboxChange(record)}
/>
<strong>Download this part</strong>
</div>
</div>
<div className="w-3/4 ">
<div
key={idx}
className="items-flex-start mt-5 justify-end self-end rounded-[20px] bg-brand-100 bg-cover bg-cover p-[16px] p-[16px] text-start dark:text-gray-800"
>
{htmlToReactParser.parse(
record.content.replaceAll(
"<strong",
'<strong style="cursor: pointer;"'
)
)}
</div>
</div>
</div>
) : (
<></>
)
)
) : (
<div className="mt-20 text-center">
<h2 className="text-1xltracking-tight text-gray-400 sm:text-4xl">
No Data
</h2>
</div>
)}
</Card>
</div>
</div>
);
};
Note: i also try like import { Parser as HtmlToReactParser } from ‘html-to-react’; but the error remain same
package.json
{
"name": "frontend",
"version": "1.0.0",
"private": true,
"dependencies": {
"@chakra-ui/hooks": "^2.1.4",
"@chakra-ui/modal": "^2.2.9",
"@chakra-ui/popover": "^2.1.8",
"@chakra-ui/portal": "^2.0.15",
"@chakra-ui/system": "^2.3.5",
"@chakra-ui/tooltip": "^2.2.6",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@paypal/react-paypal-js": "^7.8.3",
"@tanstack/react-table": "^8.7.9",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^25.2.3",
"@types/node": "^12.20.55",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"apexcharts": "^3.35.5",
"axios": "^1.3.5",
"file-saver": "^2.0.5",
"framer-motion": "^7.10.2",
"html-react-parser": "^4.0.0",
"html-to-react": "^1.6.0",
"jspdf": "^2.5.1",
"jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-calendar": "^3.9.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-modal": "^3.16.1",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"react-share": "^4.4.1",
"react-spinners": "^0.13.8",
"react-table": "^7.8.0",
"react-toastify": "^9.1.2",
"redux": "^4.2.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2",
"serve": "^14.2.0",
"socket.io-client": "^4.7.0",
"sweetalert2": "^11.7.12",
"sweetalert2-react-content": "^5.0.7",
"tailwindcss-rtl": "^0.9.0",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"pretty": "prettier --write "./**/*.{js,jsx,json}""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/file-saver": "^2.0.5",
"@types/jspdf": "^2.0.0",
"@types/react-alert": "^7.0.2",
"@types/react-calendar": "^3.5.2",
"@types/react-modal": "^3.13.1",
"@types/react-router-dom": "^5.3.3",
"@types/react-table": "^7.7.12",
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.1",
"tailwindcss": "^3.1.8"
}
}
{
"name": "jusaskin-sigma-saas-frontend",
"version": "1.0.0",
"private": true,
"dependencies": {
"@chakra-ui/hooks": "^2.1.4",
"@chakra-ui/modal": "^2.2.9",
"@chakra-ui/popover": "^2.1.8",
"@chakra-ui/portal": "^2.0.15",
"@chakra-ui/system": "^2.3.5",
"@chakra-ui/tooltip": "^2.2.6",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@paypal/react-paypal-js": "^7.8.3",
"@tanstack/react-table": "^8.7.9",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^25.2.3",
"@types/node": "^12.20.55",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"apexcharts": "^3.35.5",
"axios": "^1.3.5",
"file-saver": "^2.0.5",
"framer-motion": "^7.10.2",
"html-react-parser": "^4.0.0",
"html-to-react": "^1.6.0",
"jspdf": "^2.5.1",
"jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-calendar": "^3.9.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-modal": "^3.16.1",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"react-share": "^4.4.1",
"react-spinners": "^0.13.8",
"react-table": "^7.8.0",
"react-toastify": "^9.1.2",
"redux": "^4.2.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2",
"serve": "^14.2.0",
"socket.io-client": "^4.7.0",
"sweetalert2": "^11.7.12",
"sweetalert2-react-content": "^5.0.7",
"tailwindcss-rtl": "^0.9.0",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"pretty": "prettier --write "./**/*.{js,jsx,json}""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/file-saver": "^2.0.5",
"@types/jspdf": "^2.0.0",
"@types/react-alert": "^7.0.2",
"@types/react-calendar": "^3.5.2",
"@types/react-modal": "^3.13.1",
"@types/react-router-dom": "^5.3.3",
"@types/react-table": "^7.7.12",
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.1",
"tailwindcss": "^3.1.8"
}
}
error
If anyone knows the solution, please help me. I have been trying for the past 5 hours.
How to add recapture to custom vendor page
Im new to Pretestashop , I recently downloaded and installed a Multivendor module for pretestashop . but when i installed a recapture module . it just added recapture on customer registeration , customer login but not the Vendors section ….Can anybody assist with how to add it to custom page , Vendor registration page ..
The recapture module link is —> https://prestahero.com/182-free-prestashop-captcha-module.html
The multivender module link is —> https://www.leotheme.com/module/prestashop-modules/795-ap-marketplace-free-prestashop-marketplace-module.html …
How can i add the recapture to vendorlogin and vendor registration in pretestashop 1.7 …..
I tried using Hooks and chatGPT but it doesnt show recapture success ..
i also tried below that chatGPT gave me
Register your site and obtain reCAPTCHA API keys:
Go to the reCAPTCHA website (https://www.google.com/recaptcha) and sign in with your Google account.
Click on “My reCAPTCHA” in the top-right corner and then click on the “+” button to register a new site.
Fill in the necessary information, select the reCAPTCHA type (reCAPTCHA v2 “I’m not a robot” checkbox or reCAPTCHA v3) and provide your website’s domain.
After registering, you’ll receive a site key and a secret key. Keep these keys safe as you’ll need them later.
Edit your PrestaShop module:
Open your custom module files and locate the form where you want to add the reCAPTCHA.
Add the necessary form fields for the reCAPTCHA, including the site key as a hidden input field.
Add the reCAPTCHA JavaScript library to your module’s template file(s). You can include it using the following script tag:
html
Copy code
Add the reCAPTCHA widget to your form. You can use the following code snippet as a starting point:
html
Copy code
Validate the reCAPTCHA response:
In your module’s PHP file, retrieve the reCAPTCHA response sent by the form.
Use the reCAPTCHA API to verify the response by making a POST request to the following endpoint:
ruby
Copy code
POST https://www.google.com/recaptcha/api/siteverify
Include the following parameters in your request:
secret (your reCAPTCHA secret key)
response (the reCAPTCHA response received from the form)
Parse the response from the API and check if the reCAPTCHA verification was successful. If it was, continue processing the form data; otherwise, display an error message.
Customize the reCAPTCHA appearance (optional):
You can modify the appearance of the reCAPTCHA widget by adding CSS rules to your module’s stylesheet(s).
Refer to the reCAPTCHA documentation for available customization options.
Problems using import with reactjs and CDN
I’m trying to use reactjs with cdn as best as possible, so I tried to use the code with module type, the most important react imports work, only when I try to import another file of my custom component it prints error.
index.html
<div id="root"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-type="module" src="./core/main.js"></script>
main.js
import React from 'https://cdn.skypack.dev/react@18';
import ReactDOM from 'https://cdn.skypack.dev/react-dom@18';
import InputWithLabel from './components/input.js';
const App = () => {
return(
<div>
<InputWithLabel
label="Name:"
id="nameInput"
type="text"
value={inputValue}
onChange={handleChange}
/>
</div>
);
};
ReactDOM.render(React.createElement(App), document.getElementById('root'));
The error I get in the console:
GET http://127.0.0.1:5500/components/input.js net::ERR_ABORTED 404 (Not Found)
However I have no intention of using npm, I want to do this test with basic javascript.
I tried a few things, failing miserably, and I couldn’t find anything on the Internet that satisfied me. I thank you in advance for your help and humbly apologize if I have not been able to figure it out