react-responsive | CSS media queries in react - for responsive design | Media library

I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs

When i run yarn test locally on my React project i get this error (project is created with Create react app):

Cannot find module node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault

Everything was normal and after adding react-responsive package, my tests started failing like this.
Even though they show that they fail, when i choose to run only failed tests, they don't run again. It's like they failed in their own way but not concerning the test process.

On the side note, when my tests run on CI/CD pipeline, they work with no problem.

I have to use React 18 for Suspense in a three.js/next/ts project (I have tried using next/dynamic and it does not work).

So I installed it and updated everything according to Next's docs:

1. Added experimental: { runtime: 'nodejs' } to the next.config.js file
2. Updated tsconfig.json with "types": ["react/next", "react-dom/next"]

And I am still getting the following error:

error - ./node_modules/styled-components/dist/styled-components.browser.esm.js:1:1087 Module not found: Can't resolve 'process'

Here is a snippet of my package.json file:

I've been having this problem for a while and I see that other people have it too, but even though I have the same code as them it is still not working and I don't know what I'm doing wrong. I'm working with react, webpack, babel and scss for a project. At first I create a main component which has a background image tha loaded without problems, but when I added a carousel component I had an error that said that I needed a loader for the images to appear (html images, not bakground). So I looked it up on the internet and two loaders appeared: url-loader and file-loader, I installed both and added one in my webpack config file as it was said in the documentation. The images loaded, but the background image of the main component didn't, and not only that, all the styles for the background didn't apply either.

This is my webpack config file, I tried putting both loaders, then only one, then the other, but none of them worked. I tried every solution tha came across stackoverflow but the code isn't working and there is no errors in my terminal.

///////EDIT

I added absolute paht but it's still not working. The image gets fetched because I'd get an error if it isn't so I don't think this is a path issue. I updated the webpack config file

I'm using react-responsive-modal but I've also tried swapping it out for react-modal - same result. I'm also using react-hook-form for all forms.

I've got one modal that triggers another. The first modal that comes up, loads another component - a form. The modal nested in the form is another form. When I pull up the first form, all works great. When I pull up the nested modal, the function for submitting the form in the first modal, is triggered automatically. This makes no sense to me and shouldn't be possible.

Page that loads the first modal, which also contains the function, passed to the first form, which is the one that is being triggered automatically, unexpectedly.

i had created card component and i called in my ProductPage.js after that i am getting error like Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Card.c3b0a67ff849f2bda062.JS') is not a valid name. initially it was div and i change to card after that i am getting above error if changed div then it is working fine how can i solve this issue. For ref Please find the attached image.

and code is like this.

ProductPage.js

I have an ASP.NET 6 app with ReactJS, created some time ago using Visual Studio 2022 ASP.NET Core with React.js template.

The ClientApp is a React app created with create-react-app.

I've updated my react-scripts package to version 5.0.0 (from 4.0.3). One of the significant changes, AFAIK, is that it uses webpack 5 now.

Since this update, when I launch the ASP.NET app (using the standard run configuration which launches both the ASP.NET app and React app), the hot reload is not refreshing the browser automatically as soon as I make changes in any React files. If I hit the browser's refresh button or F5 manually, I can see the changes. The only change is that the browser doesn't refresh itself after a change in React file has been made.

I'm on Windows 11.

That's my current package.json:

I want to test the rendering of the images of my functional component, the products are in a json, I tried to import the json and pass it in the component but it didn't work :

responsive.js