How to import only the one component from bootstrap 4 via webpack 2

I am working with Webpack 2 and Bootstrap 4. I want to use only one Modal component from the whole package. Is it possible? I tried to import it from js/dist/modal but I got an exception about:...

Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'

I'm trying to get Jest to run a snapshot test of my React app. The versions from my package.json: "react": "15.6.1", "react-dom": "15.6.1", "react-test-renderer": "15.6.1", I can't get...

Jest spyOn function called

I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I...

react how to navigate router in redux-saga?

version: "react-router-dom": "^4.1.2", "react-router-redux": "^5.0.0-alpha.8", i can navigate router successfully in my component by this way: this.props.history.push('/cart') then i wanna...

Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap

I followed the instructions at getbootstrap.com thinking that everything would just work. It isn't so far :\ Everything seems to be fine until I try to load the page, at which point my Express.js...

Why does create-react-app creates both App.js and index.js?

I started learning React and now I'm trying to understand what is the purpose of the index.js and App.js which are created by by running create-react-app. Why can't we just use, for example....

yarn is having troubles with the network connection

I tried to install a package with yarn earlier today and I got this yarn install yarn install v1.9.4 [1/4] 🔍 Resolving packages... info There appears to be trouble with your network...

React Hooks with React Router v4 - how do I redirect to another route?

I have a simple react hooks application - a list of Todos - with react router v4 On the List of Todos, when a Todo is clicked I need to: Dispatch the current todo in context Redirect to another...

React Javascript onclick outside div

I am working on a website and currently i am having an svg icon for logout. when icon is clicked an overlay is popped up with signout option. when user clicks on signout it should do certain...

How to fix error: Attempted import error: 'Route' is not exported from 'react-router-dom'

-- Update: This started working when I just stopped the development server, quit VSCode and restarted it again. Not sure what caused it. Busy learning React and ran into this error. I have tried...

How to get a clicked element in React?

Coming from jQuery, getting a clicked element was a breeze, but I'm having some issues with it in React. Basically, I've got a list, and I want to get a clicked list item (or its index) and...

How to fix "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

I'm trying to deploy a reactjs application to heroku. While compiling assets, the build fails and produces this error: -----> Ruby app detected -----> Compiling Ruby/Rails -----> Using Ruby...

Validation using Formik with Yup and React-select

I'm working with a react form validation using Yup along with Formik. There is a react-select element in the form which needs to be validated as well. For validation i'm making use of...

I am trying to install Material-UI but I keep getting this long list of errors:

I have installed react without problems using npx install, but when I try to install material-UI it does not install properly. Please see the code below npm install @material-ui/core npm WARN...

Cypress causing type errors in jest assertions

I had been using react-testing-library as well as @testing-library/jest-dom/extend-expect. I installed Cypress yesterday, and now I'm getting Typescript errors on all my jest matchers: Property...

How to find the cause of the Warning: Each child in a list should have a unique "key" prop

I often run into the error Warning: Each child in a list should have a unique "key" prop. Check the render method of `MyComponent`. in React. The error message always tells you the offending...

React: 'Redirect' is not exported from 'react-router-dom'

I am getting Attempted import error: 'Redirect' is not exported from 'react-router-dom'. when running npm run start in terminal. I have reinstalled node_modules, reinstalled react-router-dom,...

error - ./node_modules/busboy/lib/main.js:1:0 Module not found: Can't resolve 'fs'

When I add a new React component to my NextJS app (React, TypeScript and GraphQL), my local development environment suddenly breaks with this cryptic error: wait - compiling... error -...

Redirect onLoad only if not authenticated with @azure/msal-react

I'm trying to adapt the sample project for my needs. My needs are essentially: Automatically redirect login if the user is not authenticated when they navigate to the root route... If they are,...

Saleor Platform running, storefront wont start the server

I've used the saleor platform method, with docker and dashboard and everything else works properly, but not the frontend, any idea how to debug this, this is the output of the last...

Navigate through child routes using react-router-dom V6

I am using react-router-dom V6 both Routes and useRoute, So, in the site, the main routes are as follow: export default function App() { return ( <Routes> <Route path="/"...

How to type a button with react-router-dom Link in MUI v5

Problem I am migrating from MUI v4 to v5 and I am having an issue using the styled function to style a Button component. For some reason, when I use MyButton instead of Button, the compiler has an...

You cannot render a <Router> inside another <Router>. You should never have more than one in your app

import { BrowserRouter, Routes, Route } from "react-router-dom"; //Layouts import HomeLayoutRoute from "./components/layouts/HomeLayout"; //components import Home from...

Error: A <Route> is only ever to be used as the child of <Routes> element

Trying to use routing for the first time, and followed the exact instructions from Udemy: App.js: import { Route } from "react-router-dom"; import Welcome from "./Pages/Welcome"; import Game from...

How to use react-router-dom v6 navigate in class component

I installed react-router-dom v6 and I want to use a class based component, in previous version of react-router-dom v5 this.props.history() worked for redirect page after doing something but this...

My routing with React router dom, <Route /> not working

I'm building a module federation/react aplication. I'm currently working on my container, and i've been setting up the environment for everything, including TS, now, when i try to create my...

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'reduce')

I am working on yup validation. Whenever it comes to FileList validation, if I left the input blank, I got the following error: enter image description here Here is my code: import React, {...

React - TypeError: Cannot read properties of undefined (reading 'params')

So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params') TypeError: Cannot read properties of undefined (reading 'params') 5 | import products from...

Material UI , Next12, React 18

I'm trying to try out the latest version of NextJS(version 12) to give my project access to SSR ServerComponents & Http streaming. MaterialUI works fine with Next 12.0.7 and React 17 (installed...

How does React update a component and its children after a state change?

I am watching Paul O Shannessy - Building React From Scratch And i understand the mounting process very well but i have hard day trying to understand how React update a component and its...