I have an application which support multi languages and I want to translate accessibility props like "aria-label". In my case I'm using Next.js with next-i18next.
I created a namespace specifically for those translations (a11y)
<IconButton
aria-label={t('a11y:TogglePassVisibility')}
onClick={handleClickShowPassword}
edge="end">
{showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
The component is using HOC withTranslation from from next-i18next like:
export default withTranslation(['common', 'auth', 'a11y'])(SignUp);
But I got this message: Warning: Prop aria-label did not match. Server: "toggle password visibility" Client: "TogglePassVisibility". If I inspect DOM I can see that it is working but the warning persist.
Not sure if it is supported by the framework. I made my research but not luck so far.
Aria-label is a regular DOM attribute, you can translate it.
Since Next.js is a Server & client side renderer, from you error looks like your server side render is different from the client side.
There are many possible reasons for this, one of them is that the language in the server side is different from the one that is in the client side.
Related
Recently, I have been trying new next 13 app directory using styled-jsx as a styling option. Soon after that I came to a contant warning conserning styles:
Error: This module cannot be imported from a Server Component module. It should only be used from a Client Component
Yet according to styled-jsx docs, it should work on both client and server side. So, what am I missing?
My guess is that next 13 is by default renders on the server side, whereas styled-jsx in its nutshell supports only client; cause as soon as I set "use client" at the start of the file, the problem disappears.
I'm having exactly same problem and would def want this to render on the server rather than using use client.
Putting styled-jsx away until this is somehow sorted.
EDIT: There is a description how to use styled-jsx here: https://beta.nextjs.org/docs/styling/css-in-js
Just upgraded to DNN EVOQ BASIC v. 09.01.01 (113) and 2sxc 9.32.1
After placing the Content module on a page, some of our templates do not have Edit options and some of them that have an Add Item option doesn't do anything after clicked.
When I click on Add Item, I get this error:
Uncaught SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse (<anonymous>)
at Object.t.showDetailedHttpError (ToSic.Sxc.Instance.ts:73)
at fire (jquery.js?cdv=209:1037)
at Object.fireWith [as rejectWith] (jquery.js?cdv=209:1148)
at done (jquery.js?cdv=209:8076)
at XMLHttpRequest.callback (jquery.js?cdv=209:8598)
This sounds like a skin / container compatibility issue, the "content module" you mention, is this the core text / html module or something else?
As a test, change the page skin and or module container to one that comes with the core 9.1.1 install and retest
DC
I don't know for sure what's happening, but let me give you a bit of background. When an editor is on the page, 2sxc adds some configuration information as json in the html-attributes, which the UI the needs to know what you were clicking on etc.
To me it sound like something is breaking this - either because a server-side filter is changing the HTML (not likely, but possible), or another javascript is running which changes the DOM, resulting in removed or broken attributes.
To get this resolved, pls verify that you can find these jsons in the html-tags (they are very obvious) by looking at the html-source. If they are there and look ok, it's not the server that's breaking it.
Then check if they are still there in Chrome-Debugger (F12) which doesn't show you the source as the server sent it, but the source as the browser currently has it. I'm pretty sure it will be off somehow, because maybe a neat jQuery mangles the HTML.
Love from Switzerland,
iJungleboy
I am trying to create the possibility for a page to display itself so long as the data is there - I'm using WordPress REST API and the end user will be able to create pages for themselves that obviously won't appear in the Router as I can't possibly forsee all of the pages they will eventually want to create.
The way I'm trying to resolve this is to pass something of a wildcard into react-router (picture 1).
Picture 1:
So, in my understanding, if the user visited my site and put in /giraffe, it would take them to the <About /> component, and would put /giraffe in the pageSlug parameter. However, it puts :slug in that parameter.
When I use the React Dev Tools, I can see that there is an element between my <App /> (top level) component and my <About /> component with no name and has parameters - see Picture 2:
This has a component with the following information <component location={pathname: "/giraffe", search: "", hash: ""} params={slug: "giraffe"} /> etc. Is there any way that I can pass these params into the route?
Here is how I am returning my <About /> component - Picture 3:
This is the first time I've used React and React-Router, so I appreciate that this may be a stupid question or I may be doing this all wrong, however I've been trawling through questions and answers for a few hours and am none the wiser. I feel like I should be able to access those parameters, but no idea.
Help?
From the docs:
A route's component is rendered when that route matches the URL. The router will inject the following properties into your component when it's rendered.
params
The dynamic segments of the URL.
So if your route is defined as follows:
<Route path="/:slug" component={About} />
you could access this.props.params.slug to get the parameter value.
We have a Tridion use case related to curated content where we are creating multimedia components for images associated with our content which are pointing to External resource types instead of uploaded resource types.
One of the issues we have run into with this use case is that despite explicitly setting the Multimedia Type for the resource, if the URL of the image has either a query string in it: http://cdn.hw.net/UploadService/1c8b7f28-bb12-4e02-b888-388fdff5836e.jpg?w=160&h=120&mode=crop&404=default or uses a ‘friendly url’: http://www.somewhere.com/images/myimage/ when we save the component, Tridion barfs with error messages similar to : ‘Invalid value for property 'Filename'. Unexpected file extension: jpg?w=160&h=120&mode=crop&404=default. Expecting: jpg,jpeg,jpe.’
So far, the only way we’ve been able to figure out to potentially get around this issue is to do something hacky like appending an extra query string parameter to the very end of the urls which end with the expected file extension: http://cdn.hw.net/UploadService/1c8b7f28-bb12-4e02-b888-388fdff5836e.jpg?w=160&h=120&mode=crop&404=default&ext=.jpg Obviously, this is not the best solution and in fact may not work for some images if the site they are being served from strictly validates the requested URL.
Does anyone have any ideas on how we can work around this issue?
Unfortunately I can't really think of an easy solution to this, since Tridion "detects" the Mime type by checking the file extension.
You could perhaps add it while saving and remove it when reading (via Event System)? Definitely a worthwhile enhancement request, to my knowledge this behavior has not been changed for the soon-coming Tridion 2013... See comment below, it has been changed for 2013.
+1 for Nuno's answer. Recognizing that the title of your question is specific to multimedia components, you may want to consider another approach which is to use normal Components, not Multimedia Components. You can create a normal component schema called something like "External Image" that has an External Url field to store your extentionless url.
Content authors will then include these images via regular component linking mechanisms in the Tridion GUI.
You will then need a custom link resolver TBB that will parse the Output item (via Regex) looking for any Tridion anchor tags <a tridion:href="tcm:x-y-z"> and for each one replace them with an <img src=...> tag where the src path would come from this linked component.
For an example of a similar approach, but with videos, and sample code for a custom link resolver TBB have a look at the code in the following post: http://www.tridiondeveloper.com/integration-sdl-tridion-jw-media-player.
Is there any way to open the file explorer setting the filtering options like a desktop application does?, and I don't want to validate the file after is selected, I want my users to view only valid files throught filtering them before.
NO, this is not possible using the asp:FileUpload Control.
How to filter files in file upload control
seems like there is a way using JavaScript.
There is an "accept" attribute which can be set for the upload control however as discussed here, many browsers don't impliment this attribute.
Your best bet is to use Javascript as astander recommends so that you can check the extension of the file being uploaded before it hits the server.
You'll also want to do a check on the server side since client-side validation cannot be relied on for this type of thing.
No, for web applications there is no way yet (Dec 2009) to set the File Selector filtering. According to the INPUT tag (used by the UploadFile control to render) documentation it should be possible by adding the 'accept' attribute and setting the file mime type(s)... so bad that any major browser supports the accept attribute of input tags.
The best workaround is to validate the files on the client and server side.