Rendering DraftJS Editor on IE11 gives the following error -
Invariant Violation: PluginEditor.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
This same setup works fine in Chrome/FF. We already use babel for transpiling ES6.
A related Github thread (https://github.com/facebook/draft-js/issues/296) mentioned multiple versions of React (since draft includes version 15+) while my app uses v0.14... I tried this, but upgrading isn't feasible right now)
The documentation mentions using es6-shim along with es5-shim (https://facebook.github.io/draft-js/docs/advanced-topics-issues-and-pitfalls.html#polyfills). I tried this but it didn't help. I get the same error.
Anything else I might be missing? Looking forward to your inputs.
Related
On my site (written in React) I use a calendar so that the user can select a date and time range. For this I use the react-advanced-datetimerange-picker library.
Also in index.js file I use <React.StrictMode>. Because of this, when working with the library, I have some warnings. I would like to get rid of them.
I know the easiest way to remove <React.StrictMode>.
But this is not entirely true.
Below is a part of my code
return (
<DateTimeRangeContainer
ranges={ranges}
autoApply={true}
start={time.start}
end={time.end}
local={local}
applyCallback={handleDateRangeChange}
forceMobileMode
years={[2022, 2025]}
style={styleRange}
>
</DateTimeRangeContainer>
);
The whole problem lies in the DateTimeRangeContainer component. If I remove it, the warnings disappear. So here are the warnings I have:
react-dom.development.js:86 Warning: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Please update the following components: FormControl. Learn more about this warning here: https://reactjs.org/link/legacy-context
and second..
react-dom.development.js:86 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DateTimeRangeContainer which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
Help me fix them
The issue is most likely because of an older version of react used in the library. One workaround is to use another library or another one is to wait for the author to update the library.
I created an issue on the library repo. Please find it here
I'm using consoletvs/charts to display charts in my Laravel application.
This works fine in all modern browsers, but I get an syntax error (and no charts displayed) in Internet Explorer 11 and below.
Tracing it down it seems this line (from consoletvs/charts, e.g. in init.blade.php line 8) is causing the (initial) error:
data => data.json()
So the culprit is the arrow operator, not supported in IE11. Using a polyfill seems to impossible (see Is there a polyfill for es6 arrow function?).
Now my questions:
Did I miss a feature in consoletvs/charts?
Is there a "Laravel" way to solve this (e.g. using babel/babel)?
Anybody got consoletvs/charts running on IE11?
Looks like you already got the answer to your question from the suggestion you got on the GitHub issues page for ConsoleTVs/Charts.
I will be changing this library to use my other tool:
https://github.com/Chartisan
This have a babel compilation step on the front-end or a pre-compiled
one. Also, the only thing needed will be the fetch() function. This
can be polyfilled.
Just stay tunned. I am writting the docs of Chartisan, and this lib
will soon be ported to that.
Reference:
Syntax Error on IE11 #554
As suggested, you should wait for the docs of Chartisan
I am getting "'Promise' is undefined" error on IE 11, Chrome and Firefox are not giving this error.
I am using below package for OIDC client, I already submitted an issue to that author as well.
https://github.com/IdentityModel/oidc-client-js/issues/826
If I click the link SCRIPT5009 I get directed to
https://learn.microsoft.com/en-us/scripting/javascript/misc/undefined-identifier
I installed below two, the issue is still continuing
https://www.npmjs.com/package/babel-polyfill
https://www.npmjs.com/package/promise-polyfill
Also, I read articles on StackOverflow and on the web that promise errors come from using arrow functions and having ES6 code, but this issue is coming up within OIDC package so none of the code in the app giving this error.
Try to install es6-promise polyfill, You could refer to this thread: Getting Error Promise is undefined in IE11.
Using Polymer 2.0, I wrote an app whose entry point is a page in a CMS. The page loads the polyfills, imports the app's entry point, and puts the custom element into the page. This process works well in Chrome and Firefox; in Edge, however, there is a problem. I'm getting errors like this in the JavaScript console:
Object doesn't support property or method 'PropertyEffects'
Unable to get property '__mixinSet' of undefined or null reference
Function is not a constructor
The app is using the regular, unbuilt source code. How can these errors be interpreted or resolved?
Which Version of Edge do you use?
Note from polymer serve source (https://github.com/Polymer/polyserve/blob/master/src/compile-middleware.ts#L150)
// Note: The Edge user agent uses the EdgeHTML version, not the main
// release version (e.g. EdgeHTML 15 corresponds to Edge 40). See
// https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history.
//
// Versions before 15.15063 may contain a JIT bug affecting ES6
// constructors (see #161).
So for Edge up to this version you still need to provide an alternative ES5 Version.
If you are using polymer serve it will transpile your ES6 to ES5 on the fly if needed.
For everything else you should use polymer build to provide ES5 code. Which you then serve if needed. (check on server via user agent string)
I've recently updated from an older 1.x version of jQuery to the latest 2.2.1 and mostly it seems to be running just fine. Unfortunately I'm constantly receiving 2 error messages in raygun which I don't know how to handle:
The first one is Cannot find function createHTMLDocument in object and only happens in Firefox 24.0 under Win 7 (according to raygun).
The second one states Cannot convert a Symbol value to a string and only happens in Firefox 38.0 in the OS reported as Linux Core.
Both errors don't provide any stack trace (at function () line null, column null (null:null)) and I can't reproduce neither one myself using the same FF & OS version using browserstack.
I'm not quite sure if those errors where already happening earlier in the older jQuery version since I was loading this version from a different CDN which didn't provide any useful errors from within jQuery at raygun at all due to same origin stuff.
One more thing: If it turns out, that those errors actually happen in some legacy browsers which just report an incorrect version 24 & 38, I'd also be happy to know, how to detect those browsers early so that I can show them an appropriate message before the errors occur.
I'd really appreciate any help/input on how to tackle this issue since I'm a little clueless by now.
Thanks