478,483 questions
0
votes
0
answers
5
views
How to define prop as one of an array of objects, defined in generated interface
Payload CMS has generated this interface for me:
export interface Page {
id: number;
Title?: string | null;
slug?: string | null;
slugLock?: boolean | null;
sections?:
| (
| {
...
- 1,587
0
votes
1
answer
28
views
How to process CSV exports from an expense tool for visualization in a custom dashboard?
I’m currently using an Indonesian expense management tool (Mekari expense) that provides a solid built-in dashboard and allows exporting detailed expense reports as CSV files. However, I need more ...
- 1
0
votes
0
answers
9
views
Running Storybook with viteFinal() throws 404 error
I have a vite.config.ts that enables proxy with changeOrigin: true.
However, when I want to merge such React configs with Storybook through this: [Bug]: Unable to use vite's server.proxy in storybook, ...
- 677
-2
votes
0
answers
31
views
What is wrong in this ProgressBar Component
What is wrong in this code , why is it failing the test cases giving error like these :
› on clicking button +10%, increments progress correctly
Unable to find an element with the text: 10%. This ...
- 25
0
votes
0
answers
12
views
Swiper.js not autoplaying and slides disappearing during transition in React (Vite + Swiper 11)
I'm using Swiper.js v11 with React and Vite, and I'm encountering two issues:
Items overflow from swiper-wrapper at large screens.
During swiping (manual or autoplay), the in-active slide briefly ...
- 207
0
votes
0
answers
15
views
What exactly are the conditions that React will give the act warning?
I know that this is a well trodden topic, but most of the articles and help topics on this talk about how to avoid, and don't actually detail what exactly causes it.
I have a simple example of how we ...
- 12.1k
0
votes
0
answers
11
views
Chakra UI: `colorScheme` not working in latest version (v3.16.1)?
I just created a new React project using Vite and installed the latest version of Chakra UI (@chakra-ui/[email protected]). I previously used Chakra UI in older projects where the colorScheme prop was ...
- 807
-3
votes
0
answers
18
views
Why is my react web3 project is rendering twice? [closed]
I am building a MERN Stack Web3 project for the company.
Website is getting ethereum prices using Debank pro API.
It's paid version but my problem is that it's called double.
I tried to print the ...
0
votes
0
answers
34
views
URL metadata preview not working with react router
I have a react.js website which uses the react router plugin to direct different component files for different routes, as seen below in my App.js file:
import React from 'react';
import {
...
- 1,596
2
votes
1
answer
38
views
setState function not recognized as function
In my React Native app, I'm having a problem where the setState function is not being recognized as a function.
I already inserted the context provider on the App root page and exported the context ...
- 43
1
vote
1
answer
18
views
How to access a Yup object's parent?
I have a Formik using a Yup validation schema that looks like this:
const validationSchema = Yup.object({
name: Yup.object({
first: Yup.string(),
last: Yup.string(),
...
- 21
-3
votes
0
answers
28
views
Page reload on image upload React JS [closed]
I have a form with many types of fields, one of them is image input where user can either upload an image from gallery or take it instantly, but i got the problem of page reload when user takes an ...
-1
votes
0
answers
14
views
Error minting NFT in React with ethers.js: "no matching fragment
I'm encountering an error when trying to mint an NFT using a React frontend and the ethers.js library. The specific error I'm getting is:
Error minting NFT: no matching fragment (operation="...
- 39
-1
votes
0
answers
29
views
Can a useEffect await its own async cleanup function?
I have an async function that is being called in a useEffect. The cleanup cannot run until the function has returned, so it awaits the result. However, in StrictMode, the program runs twice, and the ...
- 1
-1
votes
0
answers
12
views
Why is View Transition API not working with React Router and NavLink?
I'm trying to implement the View Transition API in my React app using react-router-dom (v6.22+). I followed the official guidance and added the viewTransition prop to <NavLink>. However, the ...
- 1
-1
votes
0
answers
14
views
Sharing context in microfrontend application
We have develop a microfrontend application with 2 frontends: base, auth.
When tested locally while running both frontends, they are working fine.
Then we deployed each frontend in AWS, and when both ...
2
votes
1
answer
24
views
@import must precede all other statements (besides @charset or empty @layer)
am working on a web app and am getting the error: [vite:css][postcss] @import must precede all other statements (besides @charset or empty @layer)
188| }
189| }
190| @import url('https://fonts....
-7
votes
0
answers
25
views
React Website Designed with Lovable AI is working fine in Desktop but the Links & Buttons are not working in Mobile Devices [closed]
React Website Designed with Lovable AI working fine in Desktop but the Links & Buttons are not working in Mobile Devices.
I'm using Github, Vercel and Cloudflare for this.
What Prompt should I use ...
-1
votes
0
answers
19
views
Progressive Web App displays a white screen on iOS after deploying a new build
Whenever the new code is deployed and after that if I try to launch PWA app on ios device, I am getting white screen. This is working seamlessly in desktop and Android but not on ios device.
In my ...
- 9
0
votes
2
answers
30
views
Where should I store non-sensitive user details (like name or avatar) in a React web app?
In a typical React web app, after a successful login via JWT, I often store user details like firstName, lastName, username, and profileImageUrl in localStorage. These are not sensitive credentials — ...
-4
votes
0
answers
44
views
How to prepare a responsive layout for RIA apps where child elements expand parents, but max to screen size (preferably CSS-only)? [closed]
I'm working on a Rich Internet Application (RIA) and I want to design the layout so that the app always uses 100% of the available screen size (viewport). Some of child element should be able to ...
- 320
0
votes
0
answers
22
views
Can't get rid of 'ReactDOM.render is no longer supported in React 18. Use createRoot instead.' Message [closed]
I have an old CRA app that I've converted over to Vite (6.2.4) and react and react-dom 18.3.1. I've done this several times with old apps with no issues, but on this one app I keep getting the '...
- 10.9k
-1
votes
0
answers
11
views
Problem with orm drizzle in webapp based in ExpressJS, React and Postgre SQL
I created a crud with based in ExpressJS and React. For the DB I use Postgre SQL.
In this project I use orm drizzle for defining the DB operations.
I want only change
The problem I think is with the ...
- 33
-1
votes
0
answers
20
views
when i deploy my project on netlify showing this error.can anyone help me? [closed]
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module ...
1
vote
0
answers
28
views
lightning wallet connection by LNURL Auth + LNBits [closed]
I'm currently integrating a Bitcoin Lightning wallet into my Node.js backend and React.js frontend. Right now, I'm trying to solve a bug where creating an invoice through my LNURL Auth client doesn't ...
0
votes
1
answer
29
views
Sentry Logger [warn]: Discarded session because of missing or non-string release
As per the Sentry setup guide for a React FE project
import * as Sentry from "@sentry/react";
Sentry.init({
dsn: "SOME_SENTRY_DNS",
// Setting this option to true will send ...
- 15.7k
-1
votes
0
answers
35
views
Why does my Swiper.js carousel not stay centered when moved from a standalone layout to my React component layout?
Example of what I'd like
Version of what keeps happening
I'm working on a React + Next.js project using Swiper.js (v11) for a carousel of cards. I'm using TailwindCSS and have customized my global ...
0
votes
1
answer
53
views
Nextjs 15 tailwind PWA: env(safe-area-inset-*) only displayed on 404 pages
I am trying to add padding to the bottom nav of my pwa to prevent items going behind the phone navigation. when i create an empty page the padding is not applied, but on the standard 404 page it is ...
0
votes
1
answer
64
views
Is there some useEffect and useState behavior that explains why only one of these instances work?
I'm using useEffect to fetch data. This data is passed to a state, then used as a prop for a component to render/populate accordingly. Here is the code that works:
const [projects, setProjects] = ...
-1
votes
0
answers
11
views
Error Loading WebAssembly (WASM) File in web-ifc-three
TD.js:61 Error loading IFC: RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info.
at abort (web-...
- 1
2
votes
2
answers
63
views
How can I update an object inside an array that's been filtered?
I'm working on this Frontend Mentor challenge and I have most of the functionality down. I can filter the data by it's isActive property to display the correct items based on whether they're active or ...
- 129
0
votes
1
answer
22
views
Publish ASP.NET Core Web API and React App Together (Single Deployment)
I have an ASP.NET Core Web API Project (originally for .NET Core 3.1, recently upgraded to .NET 8) and a React App. These were deployed before as two separate apps, with ASP.NET Core Web API allowing ...
- 113
0
votes
1
answer
28
views
I want to add custom height to PieLineVerticalBold but nothing seems to work? [closed]
<div className="flex items-center ml-12">
<PiLineVerticalBold size={200} color="white" className='h-[500px]' />
</div>
is there any other approach which ...
-1
votes
0
answers
13
views
CheckboxGroupInput on react-admin does not support initial values
I have this page:
import {
Edit,
SimpleForm,
TextInput,
BooleanInput,
CheckboxGroupInput,
useDataProvider,
useNotify
} from "react-admin";
import { useEffect, useState } from &...
0
votes
2
answers
29
views
React + Express: Navbar not updating after login/logout without refresh
I'm building a web app with React (frontend on Netlify) and Express.js (backend on Vercel).
Sessions are stored in PostgreSQL using express-session and connect-pg-simple.
I check authentication status ...
-1
votes
0
answers
34
views
websocket connection is getting lost with no response in the UI
Flask
@socketio.on('connect')
def handle_connect(arg):
logger.info("Client connected via WebSocket")
socketio.emit('engine_status_update', {"message": "Connected to ...
- 77
-1
votes
0
answers
21
views
Keycloak custom login and password system fails
I'm trying to make a page to let my user reset his password. I used the following code:
const handleLoginSubmit = async (e) => {
e.preventDefault();
setLoading(true);
...
- 19
-2
votes
1
answer
42
views
Configuring nginx for React and Node [closed]
I am trying to configure nginx for my application setup. I have a React app, and it talks to a Node backend, running at localhost:3000.
In nginx.conf:
server {
listen 80;
server_name ...
- 7,568
-1
votes
0
answers
24
views
Filter/Search on expand table in ant design [closed]
I am creating a meeting schedule and I am using react TS+Vite and ant design. Before filling the table, I preprocess the data (group by date). I use antd's expand table, when I do nothing, everything ...
0
votes
0
answers
35
views
Vite Unit Testing Warning After Upgrading @mui/x-data-grid to v8.1.0 – [mui-x-telemetry] Module Not Found
After upgrading @mui/x-data-grid to v8.1.0, I'm getting a warning in my Vite + Vitest unit tests:
[mui-x-telemetry] error Error: Cannot find module 'D:\frontend\node_modules\@mui\x-telemetry\esm\...
1
vote
2
answers
51
views
How to close dialog in React?
I have a general DialogueWindow component:
function DialogueWindow({elements}) {
return (
<div className="backdrop">
<dialog className="dialogue-window">
...
- 13
0
votes
0
answers
30
views
Next.js multi-zones assets is not working
I want to build nextjs app that gonna be served like a SaaS, so i have a main team that gonna develop this apps, and another division team that gonna join development with us,
My project structure ...
-1
votes
0
answers
20
views
When navigating to a new page in React.js by clicking a footer links, the page does not automatically scroll to the top [duplicate]
When I click on links located in the footer to navigate to another page, the navigation works fine, but the new page loads and shows the bottom section instead of scrolling to the top automatically.
I ...
-5
votes
0
answers
46
views
Yet another "React app won't render" question [closed]
Read through several past questions, including this, but a React app, built via npm run build (webpack), is not rendering. The bundle.js is in the same root directory on the server. I added the js to ...
- 1
0
votes
0
answers
20
views
Font loaders must be called and assigned to a const in the module scope
I am having a number of localFonts created using next/font/local library. I want to export all these localfont object . So to avoid so many exports I am trying to creat a single javascript object with ...
0
votes
1
answer
53
views
PayPal JavaScript SDK: Unable to Display "PP" Logo on Checkout Button
I'm integrating the PayPal JavaScript SDK into my React + TypeScript application using the @paypal/react-paypal-js package. My goal is to display the PayPal button with the "PP" logo, as ...
-3
votes
0
answers
27
views
How to create a live PDF preview in React using @react-pdf/renderer without browser controls or background? [closed]
I'm building a React app where users fill out a form, and a live PDF preview is generated using @react-pdf/renderer (<Document>, <Page>, <View>, <Text>, etc.).
I want the PDF ...
- 5,154
-2
votes
1
answer
48
views
why my login form is not working while the sign up form is working [closed]
I have my user authentication in the same file on my react app, now the user registration is working when a user is creating an account but when the user is trying to login using the same details that ...
-1
votes
0
answers
37
views
createTheme for theme.tsx has issue
This is in my theme.tsx:
Const baseTheme: Omit<
ThemeOptions,
| “properties1”
| “properties2”
>
export DarkTheme = createTheme({
…baseTheme,
…themeDark,
palette: { …baseTheme....
-3
votes
0
answers
50
views
Query won't stop continuously refetching [closed]
This is the hook that I have written which gets the configuration for the app from an API server
import axios, { AxiosResponse } from "axios";
import { useQuery } from "@tanstack/react-...
