I am getting this error in the console, when I am using a specific custom component that uses Material UI.
I got the component from here.
Here is a sandbox with the error:
https://codesandbox.io/s/nostalgic-dream-nxg4e
The answers I found on the internet don't work, as most of them refer to a custom _document.tsx file configured for using Material UI with next js which I already set up.
I don't get the console error in production, but instead I get weird CSS behaviour.
Related
I'm using the html2canvas module to make a screenshot of angular components made of d3.js and c3.js libraries to show charts.
Everything works fine in angular, the problem comes when i convert the angular components in custom elements and try to get the screenshot of the charts.
I get two different behaviors based on the browser using:
On Firefox I get in the console this error ERROR TypeError: this.ngElementStrategy is undefined but the screenshot works fine.
On Chrome I get this error SyntaxError: Error parsing CSS component value, unexpected EOF and the screenshot is not created.
My goal would be to make the library working also on chrome obviously; looking on the web the Chrome error should be related to a CSS class not supported by html2canvas, but i tried removing all the CSS imports from my test page and the error persists.
The different behaviors are strange assumed that in angular works but after the conversion to custom elements it doesn't only on chrome...
Anyone has any idea?
EJS documentation at ejs.co says "It's easy to debug EJS errors: your errors are plain JavaScript exceptions, with template line-numbers included.".
However, when debugging the code with an bug in the template, I only get references to the functions inside my cza.js module that calls the ejs.renderFile and references to the "internal" errors within the EJS (ejs.js) itself. Reference to the bug within the .ejs template (ideally the line-number) is missing, in fact the template goes unmentioned.
So, the screenshot is of an the error within ejs.js, where EJS itself got stuck processing the bugged template, NOT the template itself, and so worthless:
So, how do I get the debugger to point out the bug in my template?
So, I have just found out that EJS does print out the code to terminal, unless a debugger does not step in to handle the exception before EJS can point out the bug.
In my scenario, I debug the app using node --inspect app.js, with debug auto-attach in VS Code enabled. The debugger then describes the exception as shown in the question screenshot.
How I found out the debugger was blocking EJS's output to terminal? I had a browser already requesting the app, when I launched it and the exception occured within the second before the debugger was attached.
I am using the redux-form-material-ui DatePicker as described in the docs. However it just throws these errors.
React does not recognize the transitionAppear, transitionAppearTimeout, transitionEnter and transitionEnterTimeout props on DOM element...
I checked it in the developer tools and these transition properties are actually passing down to the child div from it's parent CSSTransitionGroup.
Due to this, the DatePicker dialog is not working as expected. I have already spent more than a day on this but can't seem to get it working. Please help me out!
The exact Bug you are reporting is discussed here: "Unknown props transitionAppear, transitionAppearTimeout, transitionEnter, transitionEnterTimeout and ripples #9328".
User kaytrance said: "It turned out that material-ui uses react-transition-group v1.x, but a chart library that I use has dependency on v2.x. So I had to put an older version of chart library in order to get rid of that errors.".
A further comment from user kevincolten was: "You can bring in both react-transition-groups in your package.json
"react-transition-group": "^1.2.0",
"react-transition-group-v2": "npm:react-transition-group",
".
The example given in your question runs fine on my browser.
Since you haven't provided your code (and modifications?) or a CodeSandbox (which is OK for me) I had to use a different example to reproduce the same error and determine the appropriate fix.
I get from this sandbox:
Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.
Warning: React does not recognize the staticContext prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase staticcontext instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in a (created by Link)
in Link
in CourseLink (created by Route)
in Route (created by withRouter(CourseLink))
in withRouter(CourseLink) (created by Course)
in li (created by Course)
in ul (created by Course)
in div (created by Course)
in Course (created by Route)
in Route (created by BasicExample)
in div (created by BasicExample)
in Router (created by BrowserRouter)
in BrowserRouter (created by BasicExample)
in BasicExample
No Results
That error was reported here "React does not recognize the staticContext prop on a DOM element".
The suggested fix from user timdorr is:
"You should do what NavLink does and wrap it in a Route inside CourseLink: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js ".
The Animation-Add-on isn't recognized.
That is due to the incorrect dependency, loading both is easier than fixing the one.
In AEM 6.3 classic UI, When i am trying to overlay
/libs/cq/security/widgets/source/widgets/security/data/AclStore.js
to
/apps/cq/security/widgets/source/widgets/security/data/AclStore.js
the following error is coming
TypeError: CQ.security.data is undefined CQ.security.data.UserAclStore
= CQ.Ext.extend(CQ.security.data.AclStore,{
Like this we are getting error for all the overlay js has issue in AEM 6.3
Correct me if I'm wrong but I don't believe the Sling Resource Resolution kicks in when resolving the contents of client libraries.
To extend the OOTB functionality, you need to:
create your own client library with a dependency to the original
be part of the appropriate category
override the functions/objects as you desire
More info: https://docs.adobe.com/docs/en/aem/6-2/develop/extending/customizing-page-authoring-touch.html
The Sling Resource Merger itself seems to be only applicable to Touch UI and I've only ever used it when making changes to the authoring UI (i.e. navigation menus)
The Sling Resource Merger and related methods can only be used with Granite. This also means that it is only appropriate for the touch-optimized UI; in particular overrides defined in this manner are only applicable for the touch-optimized dialog of a component.
source: https://docs.adobe.com/docs/en/aem/6-2/develop/platform/sling-resource-merger.html
I have resolved the issue using the below logic. Clientlibs js file creation logic is differed in AEM 6.3.
In AEM 6.1 Clientlibs js creation is binding the overlaid files from /apps/cq/security/widgets/source/widgets/js.txt and non overlaid files from /libs/cq/security/widgets/source/widgets/js.txt
In AEM 6.3 Clientlibs js creation is binding files from /apps/cq/security/widgets/source/widgets/js.txt only.
Because of this non overlaid files (CQ.security.js) are not binding into clientlibs js(widgets.js) and its gives the below error
TypeError: CQ.security.data is undefined CQ.security.data.UserAclStore
= CQ.Ext.extend(CQ.security.data.AclStore,{
So i have merged the js.txt of
/libs/cq/security/widgets/source/widgets/js.txt into
/apps/cq/security/widgets/source/widgets/js.txt and it's resolved the
issue.
Please provide your answer if there is any other way to resolve this issue.
I used ckBuilder to create my own custom editor with certain plugins.I chose the oembed plugin, followed the installation procedures but I kept getting a weird error.
Error:
Uncaught TypeError: Cannot read property 'button' of undefined
Are there other configurations that need to be adjusted before using it?!
Turns out if you modify the ckeditor multiple times, you need to clear your cache in order to reflect any new plugins.