We Keep Coding

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 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

Unable to implement JSNLog to ASP.NET MVC solution

After I installed and referenced the JSNLog package into my MVC project, I'm experiencing an error when ever I click a link.
For example,
Link
usually produce
Link
but after I start using the JSNLog, it now produce
Link
which will direct to a link
http://localhost:51745/jsnlog.logger?action=Bar&controller=Foo
which shows
Exception Details: System.NullReferenceException: Object reference not
set to an instance of an object.
I believe JSNLog is trying to send back a exception or log event back to the server whenever it has a chance to access the server.
Am I missing something to make this functional?

This bug existed when the original post was created, but it has been fixed a few version ago now (I am the author of JSNLog).

This is actually caused by the Ignore route they inject in App_Start, moving it into your routes collection manually fixes the issue. It happens because you don't manually define routes for the rest of the controllers, so .net tries to resolve to the first one it finds defined.
In App_Start\JSNLogConfig.cs take out
RouteTable.Routes.Insert(0, new Route("jsnlog.logger/{*pathInfo}", new StopRoutingHandler()));
In RouteConfig.cs add
routes.IgnoreRoute("jsnlog.logger/{*pathInfo}");
And all your other routes should start working fine.

Meteor cannot read property 'click' of undefined

I'm having an issue where in production only (not development) I get hundreds of cannot read property 'click' of undefined with 3-30 on each click, and a few cannot read property 'submit' of undefined. This very well may not be an issue with Meteor but with my code, so I'm just looking for any ideas why this may be happening or how I can debug it. All my events are either in Template.events or Template.rendered. It happens on every page and no matter where I click.

There are a couple of things that can cause this.
The first is that in production mode latency is a lot higher. So if you've automatically assumed that when a template is rendered the data is ready you could get all sorts of undefined as the object's are null for a very short time when meteor initally loads.
You could check your code to see if you've used any findOne or find. You need to ensure that the result of your query is properly handled in the case that there aren't any results, for that initial load. i.e
var data = myCollection.findOne(...);
if(data) {
....
}
or
var data = myCollection.find(...);
if(data.count()>0) {
....
}
The other thing that might cause it are atmosphere packages that you're using that might not be mapped correctly.
To check this have a look at your network tab in the chrome inspector:
Look through for files whos extensions don't match their content (js & css files).
If a file is a .js file it might have HTML content (Meteor doesn't serve up 404 errors, instead giving them html whichever path is called, so no explicit errors are given).
If this is the case figure out which file it is and map it correctly. (You might be calling click to a plugin that didn't load correctly). In production mode files are minified and the package paths change so this might also be it.