Warning: <Unknown Component /> is being rendered by both [Unknown] and [Unknown] - javascript

I am getting this error while working with react:
Warning: <Unknown Component /> is being rendered by both [Unknown] and [Unknown] using the same key (null) in the same place. Currently, this means that they don't preserve state. This behavior should be very rare so we're considering deprecating it. Please contact the React team and explain your use case so that we can take that into consideration.
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.
Here is some context about what we are doing:
We are building an application that dynamically adds and removes views from a container. These views are stored in a ViewStore. There are ViewActions to add and remove views.
All views that are managed in that store have a static ViewKey, which is uniquely used for this view. To add a view you can call ViewActions.addView(<SomeComponent />). If the view is already present, it will be replaced.
A ViewContainer renders these views by listening for changes from the ViewStore and renders the view with the key property set to the ViewKey.
When I add a view, which is already present, in reaction to a mouse-click event, everything is fine. When I add the exact same view from the developer console of chrome, and the view is already present, I am getting warnings mentioned above, but everything is working fine (probably, because the view has been rendered before).
How can I get rid of this warning?
EDIT: After some more investigation I found out, that this only happens, when firing the action from the Chrome Developer Console. In Firefox and IE (from the Developer Consoles) this works without problems.
Why do I only see this issue in Chrome?

when you add it with the developer console it will be an other type than a react component. you should see that if you shows the type with:
typeof <Component />
use that in the console and in the code. you should see a difference.

Related

React view isn't getting updated even after redux store is being upated

After the page load the changes to the store are not being captured by the react, but if i make any changes to the any of the reducer files after a live-reload the entire page starts working, but if i reload the page the becomes the same and store updates stop being rendered.
i have tried a lot of things already, diffrent store configuarations, different methods of getting store values namely connect and useSelector.
i have checked dispatch and stores with logs they are working fine, selectors seem not be the issue as well.
I have wasted more than 4 hours on something that i was supposed to take 30mins, any help would be nice to catch whatever i am missing.
link to code sandbox sample here, https://codesandbox.io/s/confident-oskar-30ow2z?file=/src/App.js
there appears to be some issue with using StrictMode and ReactDOMClient.createRoot. Perhaps you could remove the strict mode in index.js or just use ReactDOM.render. I tried with your sandbox removing the strict mode and it appears to be working fine.
Here is the updated sandbox -
https://codesandbox.io/s/modern-sun-6u5icq?file=/src/index.js

I'm getting a Failed to mount component: template or render function not defined in IE11 but not other browsers. How to locate point of failure?

We have an established Vue/Nuxt app running in production, and for our latest sprint I implemented a bunch of pretty common changes we'd normally make for a new feature.
The changes did not include any structural changes to the primary page component or underlying layout component(s), rather the bulk of the changes were in an existing child component.
The page works perfectly fine in Chrome, Edge, Firefox, etc... usual story... but not in IE11.
I am unexpectedly receiving the following error upon page load;
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Nuxt>
<VApp>
<Layouts/default.vue> at layouts/default.vue
<Root>
The same page component works fine in other colleague's branches. So obviously it's 'one' of my changes but I just cannot identify anything component related. Especially given it works in other browsers.
For example, could this occur because of a unexpectedly needed polyfill that's not being loaded? I haven't used any ES5/ES6 features that we haven't used elsewhere - or on this page already - so it seems odd that would suddenly cause it.
Steps I've tried to debug;
Comment out the child component the bulk of my changes were in - no change
Replace EVERYTHING in the template block with `Hello World! - no change
Ensure an import exists for EVERY component within the failing page component (to ensure the Nuxt configured auto import isn't wigging out in IE - it's been working fine for months)
Killed the server and rebuilt the app multiple times just to be sure hot reload isn't being a problem
Hard re-cached the page in IE regularly just in case it's being a bleeeep and remembering something it shouldn't
Can confirm;
NO changes/updates have been made to packages
NO changes have been made to app configuration
NO changes to the folder location - thus route - the page component resides in
NO changes have been made to the underlying layout files (despite where the error message suggests the issue is)
As Vue developers know, often you'll see this generic error when you've messed up a component somewhere deep within your app that are completely unrelated to the layout component - and once fixed - this generic error goes away. Hence I commented out my child component to see if that was causing the issue.
I am vexed as to what might have changed to only break this page in IE11.
Apart from it being IE11 of course. Ugggh. I know. But we can't... yet :(
Any suggestions/help on what else I could test/debug would be greatly appreciated.
I figured out what was causing this, but it is a bit weird.
So clearly this was an issue inside a template, however nothing inside the scope of templates involved contained code that wasn't use elsewhere that was still working fine in IE11.
The template chain;
Default.vue (layout)
> pages
> {program}
> {form}
> _id.vue (this was the 'anonymous' template above)
> ServiceClaim.vue (shared component, changes were made here)
The process;
Commented ServiceClaim reference from _id.vue template - _id didn't render
Commented ServiceClaim import as well - _id rendered
Uncommented ServiceClaim - _id didn't render (definitely here, great)
In ServiceClaim component;
Commented all template markup - _id rendered
Commented all but previous claim list - _id rendered
Commented just the form markup - _id rendered
Issue is within the form...
Commented fields populated using .include ES6 function - _id didn't render
So it's a control with list items...
Commented fields retrieving list items - _id rendered
Confirmed...
Commented controls one by one until I found it was a radio group control
Refactored storage and retrieval of list items - no change
Added field-id attribute for consistency - no change
Change field-id and field-name attributes to use static values i.e. not using directive - _id rendered
Eureka!
Change field-id and field-name attributes to static values but using directive again - _id rendered
Curious
Change field-id and field-name attributes back to dynamic values using directive - _id rendered
Eh? But... ok fine
_id now renders in IE11 but effectively with the same code as before. Hmmmmm.
NB: I have since changed :row="true" to just row (used to be dynamically set hence the directive)
Conclusion;
To be fair I'm not entirely sure - perhaps someone else can explain but - this is ultimately a build issue that could not be rectified until the offending code was changed, restored, and the solution rebuilt.

How do I access the redux store in Safari?

Context
I'm trying to debug a React application but cannot modify the source code to log redux variables. In chrome I'm able to access the redux store via the associated extension but it seems no such equivalent exists for safari.
Question
How can I access the redux store in Safari? Can I do so using the console?
The simplest solution, unfortunately, is to modify the source code to set a global variable to the Redux store. (It may be worth preemptively modifying any applications you can control to do this, just to make Safari easier to debug.)
Without modifying the source code, it should be possible, although it's awkward. The following instructions work for React 16.12.0.
In Safari's Web Inspector (dev tools), go to the Elements tab and find your React root element (the <div id="root"> or similar that you pass to ReactDOM.render).
Click on it. Web Inspector should show a = $0 next to it, indicating that you can now reference that DOM node in the Web Inspector console as $0.
In the Web Inspector's Console tab, type Object.keys($0) and press Enter to see the internal properties that React adds to the DOM node. For my app, I see ["__reactContainere$8yexuoe6iiv", "_reactRootContainer"].
Dump the internal React object to the console by typing $0["__reactContainere$8yexuoe6iiv"] (substituting your internal property name) and pressing Enter.
Inspect the object properties to find the Redux store: on my app, it's under child, under memoizedProps, under store, but this may depend on the specifics of your React component hierarchy and where and how you mount Redux's <Provider>.
Use the store reference you just found to call Redux's getState. For my app, that means typing $0["__reactContainere$8yexuoe6iiv"].child.memoizedProps.store.getState() and pressing Enter.
A simpler one-line alternative to the above:
document.getElementById('root')['_reactRootContainer']._internalRoot.current.child.memoizedProps.store.getState()
In case you are using Nextjs framework, you can achieve this by opening the console in safari. Type window in it. Expand it. Now just check in the window object property. You will find a key something like '__REDUX' or something like that. In my case it was __NEXT_REDUX_STORE__.
Now after you find it just enter the following in your console.:
__NEXT_REDUX_STORE__.getState();
you can now check your current redux state of your application.
I'm not aware of a safari extension for redux debugging (corrections welcome). This thread suggests that it's due to a lack of a dev-tools API: https://github.com/zalmoxisus/redux-devtools-extension/issues/435
Redux state isn't in the global scope, so you won't be able to access it through the console without modifying the source code.
You could just extract state using the connect function. Then just stringify it?
<pre>JSON.stringify({this.props.store, null, 2})</pre>
Then you could visually see it.
Adding to #josh-kelley's answer...
In 2021, tested with Safari Version 12.1 (14607.1.40.1.4), following line did the trick for me:
document.getElementById('root')['_reactRootContainer']
._internalRoot.current.child.memoizedProps
.children.props.store.getState()
Notice the children.props difference from what #josh had mentioned.
According to its GitHub repository for other browsers use remote-redux-devtools.

Unknown props - react and material-ui

Currently I'm using react and material-ui and I've the following code in my component.
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}>
Are you sure that you want to proceed?
</Dialog>
I've imported
import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
But I'm always getting the following error message
Warning: Unknown prop `onKeyboardFocus` on <button> tag. Remove this prop from the element.
Warning: Unknown prop `keyboardFocused` on <button> tag. Remove this prop from the element.
Use react-tap-event-plugin to resolve this issue. After installing do this -
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
First, this is a warning and not an error message i.e. your code is still working. If you follow the link in the warning message, you can find out that:
The unknown-prop warning will fire if you attempt to render a DOM
element with a prop that is not recognized by React as a legal DOM
attribute/property. You should ensure that your DOM elements do not
have spurious props floating around.
There are more details and the possible reasons, but if I have to speculate you are passing all props to the button element.
Also interesting is a comment bellow the note:
For anyone who is curious/wondering why this new warning exists...
Historically, React has maintained a whitelist of all valid DOM
attributes, and we would strip unrecognized attributes. This approach
has a couple major downsides:
Performance: It means we must do a check for every prop on every DOM element, to sanity check that the prop is valid, and strip the
prop if it is not legal. This is silly, because the majority of
elements are completely safe (no illegal attributes) and thus the
checks are just wasted CPU cycles.
The old technique forced us to maintain a huge whitelist of all possible DOM attributes. This is a pain to maintain, but more
importantly, if we accidentally miss one or browser vendors add a new
one, it means that prop can't be used until we update our whitelist
The old technique is less flexible because it is impossible to render a non-standard attribute. While rendering non-standard
attributes is not recommended (you should use a data- attribute
instead), sometimes there are situations/frameworks that require
it. It sucks that React previously couldn't support it.
As we move toward removing this whitelist, we need to give people an
opportunity to clean up their existing apps. This way, an upgrade
doesn't result in us dumping a ton of unexpected props into the DOM.
EDIT:
Most probably this is coming from the jsx of the library you are using ( material-ui ) Check if you are using the latest version or if you are, they should probably address it soon
This is an issue with material-ui that they've already fixed. Wait for their 0.15.2 release or get their master branch now.

How to access a known Ember component from console

Using Ember debug Chrome extension, I have identified this component in a website I am trying to automate (but do not have direct access to change the code):
<MYAPP#component:zipcode-field::ember592>
Which is shown in hierarchy as:
application
engine
myui
zipcodeField
If I edit the value property of that element in the debugger, it updates the UI and model as desired. Can I do this via a one-liner from the console?
Update: So far, I am able to enter this in the console:
Ember.lookup.$E.container.lookup("MYAPP#component:zipcode-field")
But unable to access/alter its value property as in the debugger.
Update:
In feedback to one of the answers, my aim is to have a console one-liner, which could be given to someone without any debuggers installed in order to run the code with the same behaviour. Using a variable such as $E within the console requires that the element has been manually selected prior to running the code, which would not be sufficient.
Correct me if I am wrong but it seems that you aren't using the ember inspector (available on firefox and as a bookmarklet).
Once you have that installed it is really easy to inspect debug and modify anything ember related, for the purpose of this answer I will be using the chrome version.
Open up your chrome dev tools in the tab that has your ember app running,
once there head to the ember tab in the developer tools.
In order to see the components you will have to tick a checkbox
Once enabled you will be able to see all of the components currently used.
Clicking on a component will open up a panel that contains all of the component's properties.
In order to access those properties from the console all you need to do is click on the $E next to the components.
Once clicked you should see something similar in the console.
Ember Inspector ($E): Class {helperName: (...), logout: (...), isOpenBinding: StreamBinding, currentUserBinding: StreamBinding, _morph: Morph…}
Now all you need to do in order to get the property values:
$E.get('myProperty');
And To set them:
$E.set('myProperty', newValue);
A component is just a view, so the following should work:
Ember.View.views[<GUID>]
So in your example:
Ember.View.views['ember592']
You need to use get/set if you want to modify/read the value property, for example:
Ember.View.views['ember592'].get('value')
Ember.View.views['ember592'].set('value', 'newValue')
Found a gist that works with Ember 2.13
App.__container__.lookup('-view-registry:main')[componentId]; // componentId i.e. "ember4322"
Credit goes to ngyv: https://gist.github.com/ngyv/819e2cc78eca2a3b19599707e1461205

Categories