I am using antd and I am seeing this error
findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DOMWrap which is inside StrictMode. Instead, add a ref directly to the element you want to reference
I have realized that it is because of mode="horizontal".
I have tried using other components as well and I see this error a lot in antd. Is there any way to fix this issue?
This is my current code
import React from 'react'
import { connect } from 'react-redux';
import { Layout, Menu } from 'antd';
const { Header, Footer, Content } = Layout;
const AddForm = () => {
return (
<div>
{/* // Menu Starts from here */}
<Layout className="layout">
<Header>
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Content style={{ padding: '0 50px' }}>
<div className="site-layout-content">Content</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</div>
)
};
I'm fixing it by wrapping the commponent using <React.StrictMode>
in my case, the the button inside the form caused that error, so I solve it by
<React.StrictMode>
<Button type="primary" htmlType="submit" className="submit">
Register
</Button>
</React.StrictMode>
There is nothing you can do about it. You have to wait for antd to support Strict Mode. Yet, you can consider contributing to the project.
The semantic team has issued that they are fixing the issue:
See here https://github.com/Semantic-Org/Semantic-UI-React/issues/4050
The best work around I presume is using plain semantic-ui instead of hacking react.
<button className="ui button large primary">click me</button>
for anyone facing this warning, I managed to resolve it by upgrading ant to "antd": "4.20.7", and the issue disappeared. I am using react version 17.0.2.
I think it was resolved in newer release of antd, however, I could not find any reference online.
Hope this helps.
There is no good alternaive for findDOMNode in React 16: https://github.com/ant-design/ant-design/issues/22493
As a workaround, I am adding this at the root file.
I'm suppressing the warning like so:
// eslint-disable-next-line
const consoleError = console.error.bind(console);
// eslint-disable-next-line
console.error = (errObj, ...args) => {
if (
(process.env.NODE_ENV === 'development' && typeof errObj.message === 'string' && args.includes('findDOMNode')
) {
return;
}
consoleError(errObj, ...args);
};
I know this is not a fix, but at least my console is not bloated with findDOMNode messages. Until And-Design fixes this, this will do.
Related
Can't get the npm package tiny-slider-react to work. Probably doing something basic wrong. It imports just fine without any errors, but it only displays the loadingimages without any functionality, just as if the images would be if you'd do <img />. The code is straight from the npm read me file.
import TinySlider from "tiny-slider-react";
import 'tiny-slider/dist/tiny-slider.css';
export default function Testimonials() {
const settings = {
lazyload: true,
nav: true,
mouseDrag: true
};
const imgs = [
"https://source.unsplash.com/random/200x400",
"https://source.unsplash.com/random/200x400",
"https://source.unsplash.com/random/200x400",
"https://source.unsplash.com/random/200x400",
];
const loadingImage = "https://source.unsplash.com/random/100x100"
return (
<section className='h-screen bg-white dark:bg-gray-700'>
<TinySlider settings={settings}>
{imgs.map((el, index) => (
<div key={index} style={{ position: "relative" }}>
<img
className={`tns-lazy-img`}
src={loadingImage}
data-src={el}
alt=""
/>
</div>
))}
</TinySlider>
</section>
)
}
I expected it to work like the examples https://codesandbox.io/s/test-tiny-slider-react-forked-rmxcl?file=/index.js:752-784, here's one. I have installed the npm package and I don't think I get any errors in the browser console related to tiny slider. I tried using TinySlider just like OwlCarousel too, so basically just having <img /> props in the <TinySlider /> component, got the same issue.
Could it have something to do with the css file not importing correctly?
In React 18, it seems that TinySlider works normally when it is not wrapped in <StrictMode>.
Demo of the test: codesandbox
If <StrictMode> is still preferred in the same App, perhaps consider to enable it on other parts of the app, as recommended by React document.
TinySlider does not seem to have problems working in older versions of React, by the way.
I am working with React MUI Tabs and am running across:
Warning: Failed prop type: Invalid prop component supplied to ForwardRef(ButtonBase). Expected an element type that can hold a ref. Did you accidentally provide a plain function component instead?`
I have read many threads, Including This One -- And surrounding my element in a <div> or a <Box> does not do the trick.
I have also read This Documentation Which suggests that it's "just a warning" to me even though I am not trying to pass a ref.
Can anyone find what is wrong with the following (if anything):
<Tab label="Project Info" {...a11yProps(0)} component={() => (
<Box onClick={() => setValue(0)}>
<Icon sx={{color: ywpBlue}} title="Grid View">info</Icon>
<Typography sx={{fontSize:"20px"}} mt={-3}>
Project Info
</Typography>
</Box>
)}/>
I have also tried:
<Tab label="Project Info" {...a11yProps(0)} component={props =>
<Box {...props} onClick={() =>
To no avail.
The <Tabs> display fine, and function as expected .. I just HATE seeing red "Warnings" in my DevTools Console.
The Tab component doesn't have a prop component. Under the hood, Tab is using ButtonBase, hence when it is being provided component it complains. If you want to just add an Icon and style, you should follow the docs on customizing tabs here. You can provide an Icon, and center the label and styled like so:
import * as React from "react";
import Tabs from "#mui/material/Tabs";
import Tab, { TabProps } from "#mui/material/Tab";
import PhoneIcon from "#mui/icons-material/Phone";
import { styled } from "#mui/material";
const CustomTab = styled(Tab)<TabProps>(({ theme }) => ({
"&.MuiButtonBase-root": {
fontSize: "20px",
marginTop: -3
}
}));
export default function IconTabs() {
return (
<Tabs>
<CustomTab icon={<PhoneIcon />} label="phone" />
</Tabs>
);
}
If you need more control, you could consider using TabUnstyled in the base library and you will have complete control of the components show in the base docs
Didn't find anything about this question, so I will appreciate any help/ideas from you.
I have simple input component in stories.tsx like this one:
export const Icon: Story<InputProps> = (args) => {
...
return (
<Input
...
rightIcon={{ icon: <OpenEyeIcon size="medium" /> }}
/>
);
};
Using construction in rightIcon prop is what I need and it works good in my app and when I watching stories. But when I try to use this component in docs.mdx like this:
<Canvas>
<Story id="components-input--icon" />
</Canvas>
it crash the browser and timeout error occur.
This is not the problem about webpack loader that has many issues in github, I've tried to specify loader for storybook, but it wont help.
Fun things happens when I declare component outside of the story like this:
const IconComponent = () => {
...
return (
<Input
...
rightIcon={{ icon: <OpenEyeIcon size="medium" /> }}
/>
);
}
export const Icon: Story<InputProps> = (args) => {
return <IconComponent />
}
And this works as intended.
Any other components work from story without problem, problem occurs only when I use icon inside of object. I tried this on storybook versions 6.4.x, 6.5.x (latest by now).
Any ideas why this happens, and how to fix it?
import CountUp from "react-countup";
import VisibilitySensor from 'react-visibility-sensor';
function ... () {
<CountUp end={number.blah(get from api)} redraw={true}>
{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}
</CountUp>
}
I didn't use hooks, just used them directly in the main component.
Warning: Failed prop type: The prop end is marked as required in CountUp, but its value is undefined.
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of VisibilitySensor which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
These are the errors that occurred and how can I fix them please help
Saw this solution on a previous post
https://stackoverflow.com/a/71312117/1175555
And then I implemented it in this way
const { ref: slide1Ref, inView: slide1InView } = useInView();
And then the contents like
<Swiper
pagination={{
clickable: true
}}
modules={[Pagination]}
className={styles.swiper}
>
<SwiperSlide>
<div className={styles.slide1} ref={slide1Ref}>
{slide1InView && (
<div>
contents here
</div>
)}
</div>
</SwiperSlide>
This way, everytime I reach one of the slides, the countUps start working with no findDOMNode warnings. Like you I was using the now unmaintained VisibilitySensor
It works very well and with no issues.
Any questions, let me know!
"react": "^16.13.1"
"react-transition-group": "^4.3.0"
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
Hi, everyone.
I faced with findDOMNode warning and can't find the right solution on the internet.
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode...
This example I copied from off docs here and on click of the button, the same error appears.
const Toolbar = (props) => {
const [inProp, setInProp] = useState(false);
return (
<div>
<CSSTransition in={inProp} timeout={200} classNames="my-node">
<div>
{"I'll receive my-node-* classes"}
</div>
</CSSTransition>
<button type="button" onClick={() => setInProp(true)}>
Click to Enter
</button>
</div>
)
};
The solutions from the internet suggested trying createRef (I used usePef hook) but with Transitions, it didn't work.
It seems that React.StrictMode will throw a warning like this until the patch for this library will be merged, but still, I don't see the created issue
I will be grateful for any help or proposal of how to solve the issue
They fixed that bug from version 4.4.0.
To fix that can pass nodeRef to CSSTransition
const Toolbar = (props) => {
const [inProp, setInProp] = useState(false);
const nodeRef = useRef(null)
return (
<div>
<CSSTransition in={inProp} nodeRef={nodeRef} timeout={200} classNames="my-node">
<div ref={nodeRef}>
{"I'll receive my-node-* classes"}
</div>
</CSSTransition>
<button type="button" onClick={() => setInProp(true)}>
Click to Enter
</button>
</div>
)
};
I hope that will be helpful.
For anyone using class-based components, it's recommended to use createRef instead.
Example:
const nodeRef = React.createRef(null);
I was having the same issue, and also as #warkentien2 said, you also need to add the reference in the child component, otherwise nothing happens.