Would anyone know how to debug and fix (or mute) following warning (apparently, Mantine is dropping react-popper in next major release)?
Everything works fine, but warning is making it very hard to debug other issues.
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
at Popper (webpack-internal:///./node_modules/#mantine/core/esm/components/Popper/Popper.js:67:3)
at div
at eval (webpack-internal:///./node_modules/#mantine/core/esm/components/Box/Box.js:42:18)
at Popover (webpack-internal:///./node_modules/#mantine/core/esm/components/Popover/Popover.js:76:85)
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:30:19811)
at SecretTextareaWithLength (webpack-internal:///./src/main/routes/Create.tsx:106:48)
at form
at div
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:30:19811)
at Create (webpack-internal:///./src/main/routes/Create.tsx:291:48)
at Routes (webpack-internal:///./node_modules/react-router/index.js:920:5)
at MenuEvents (webpack-internal:///./src/main/MenuEvents.tsx:34:55)
at Router (webpack-internal:///./node_modules/react-router/index.js:854:15)
at MemoryRouter (webpack-internal:///./node_modules/react-router/index.js:767:5)
at MantineProvider (webpack-internal:///./node_modules/#mantine/styles/esm/theme/MantineProvider.js:66:3)
at App (webpack-internal:///./src/main/App.tsx:40:35)
this is a bug in mantine When using Popper. it will be fixed in the next release.
one thing you can do is hack your local react copy to add conditional logic and skip this warning.
another simple way is overwriting the console methods :
console.warn = () => {};
console.warn('warnings skipped.');
but in this case all warnings will be ignored
Related
Important note:
I am aware of createRoot and root.unmount()! Unfortunately (If I understand this correctly) they should be used just once in the application for mounting the react application.
Problem description:
In our app we have a modal component that is rendered dynamically and added to the body of the html via ReactDOM.render(). When this modal is hidden, we unmountComponentAtNode().
Unfortunately, after upgrading to react18, unmountComponentAtNode becomes deprecated and the new unmount is (in my understanding) for the root only. The same problem is about if I try to modify the ReactDOM.Render() for createRoot. Then we would have 2 roots in the app which is wrong.
What is the proper way to attach the modal to the body element (next to root!) and unmount it after it should be destroyed? The implementation is a little bit "weird" (partially in jsx, partially not...) and I would like to avoid refactoring the whole component as there will be a lot of refactoring already in the code... So I would like to focus on refactoring this component (into jsx one) later. Now I have to figure out only the rendering / unmounting. I have been thinking about using Portals, but anyway I have to create that elements somehow and render them into the DOM where portals does not help me a lot.
Calling the createRoot and then render on the root in this modal component fires an error You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it. which is obvious. But there is no "useRoot()" hook or anything like that. Should I store the returned object (root) in some context or somewhere to use it later? Or what should be the best option to call the render? :/
I know how I should do that with classical functional component... But maybe there is some way that I can just refactor a piece of the code instead of the whole component and all its usecases. Maybe there is something I am not aware of (there is definitely thousands of things I am not aware of :D) that should simplify my life...
function modal() {
return (
<div>
...
</div>
)
}
Modal.show = () => {
modalEl = document.createElement('div');
util.destroy(el) => {
ReactDOM.unmountComponentAtNode(el);
el.remove();
}
const childs = props.childs;
REactDOM.render(childs, modalEl);
}
When I was thinking about portals, I thought I will just rewrite the last line of ReactDOM.render to portal like createPortal(childs, modalEl), unfortunately this does not render anything (except modalEl, but no childs inside). The childs are of type ReactNode (using typescript) and they are not empty (because of ReactDOM.render works without any problem).
I have a huge number of console errors like this appearing in my app:
Warning: React does not recognize the textStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase textstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Ideally I would fix the errors but sadly that's not possible as I'm using Styled System with Styled Components:
https://github.com/styled-system/styled-system/issues/1044
As a less than ideal workaround Id like to disable certain errors from the console for the development version of React. Can this be done?
Not sure if it matters but I'm using React Native Web.
You can override the console.warn method with your own function that filters out the warnings you want to ignore:
const consoleWarn = console.warn;
const SUPPRESSED_WARNINGS = ['arning text - I will n'];
console.warn = function filterWarnings(msg, ...args) {
if (!SUPPRESSED_WARNINGS.some((entry) => msg.includes(entry))) {
consoleWarn(msg, ...args);
}
};
console.warn('I\'ll appear as a warning');
console.warn('warning text - I will not');
I'm not sure which console method react is using internally, so you may need to do the same for console.info, console.log and console.error.
You can also just use the production version of react, which suppresses all warnings by default, but of course you can't pick and choose, you loose all warnings in that case.
This is brand new install - I have not put any transitions on the Alert component
To replicate the code it is simple
import React from "react";
import { Alert } from "reactstrap";
export const Index = () => {
return (
<div>
<Alert color='primary'>This is a primary alert — check it out!</Alert>
</div>
);
};
Error Msg: Please update the following components: Transition
How does one go about updating Transition or eliminating it all together?
In the event that someone comes here on after searching the question and is looking for insight this is it.
React strap (at the time of this post) uses the react-transition-group things fade in and out and menus slide up and down. After amalgamating the info on this subject here and on Github they are currently updating the library. I have finished the coding of that component by ignoring the warning.
It did not impede this iteration of that component. Happy Coding.
I have this same warning, and I fixed it changing in the index.js file, the value of <React.StrictMode> to <React.Fragment>.
Since this removes the warning, is not guaranteed that your can be bulletproof.
This issue was reported, and apparently fixed but I received the same error even with the updated source code. It's more than just the error as well - it can cause components to re-render
Here is one github thread from the reactstrap repo about this (but there are a number of them): https://github.com/reactstrap/reactstrap/issues/1340
There are a number of issues related to this warning though.
As best I can tell it has something to do with an item in Transition.js, and I think it may have to do with a this.context call when a component is 'entering'
But, the project I encountered this issue is the first React App I'm building, and I'm not quite ready to learn the Legacy Context API, so that's just my best guess and in the end I just opted for an alternative package.
I don't have the rep to put this in a comment, so the only answers I have are:
Report the issue to the reactstrap team and wait/assist with a fix
Use an alternative package
Working on React with WebStorm I'd love to set up WebStorm's code completion to offer:
<div style={}...
instead of:
<div style=""...
Any way to achieve this behaviour?
Upgrade to 2016.2. It does that now.
From their What's new:
WebStorm can now provide code completion and resolve for component
properties defined using propTypes. For React events the IDE will
automatically add {} instead of "". Non-DOM attributes are no longer
marked as unresolved, and similarly, component lifecycle methods are
not marked as unused anymore.
I'm currently working on a medium sized reactJS application and get the following error message after I click a button on a component:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.
How can I debug this more easily? Why doesn't reactJS give me a specific component name where this rule was violated?
How would you do it?
You can override console.warn to make it throw instead of log when the provided message matches a certain pattern. In your case, you'd do:
var warn = console.warn;
console.warn = function(warning) {
if (/(setState)/.test(warning)) {
throw new Error(warning);
}
warn.apply(console, arguments);
};
The stack trace of the error will then point to the line causing the warnings.
Actually, the best way to solve this issue is by changing some react code locally.
This pull-request specifically points out how to modify src/renderers/shared/reconciler/ReactUpdateQueue.js to get the component that illegaly sets state.
As this pull-request was already merged into the repo, it shouldn't be to long before it will be integrated into an npm version of react, one could hope.