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
Related
I added Flatpickr to my project which has been working perfectly fine, however when checking in mobile view I get the following error when clicking on the input to open the calendar:
Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
I have trawled through SO and google to try and find a solution, but nothing seems to work. I have tried the solution proposed in this thread but my project is using styled-components, which means I do not have a stylesheet to import. However I tried adding the import in my styled-component, I also tried adding a stylesheet which I imported in _app.tsx.
By playing with the responsive mode, I have noticed that the error activates when the screen width drops bellow 392px. Anything bigger than that and it all works perfectly fine.
I have opted for a temporary solution whereby on mobile I display the native inputs as opposed to the Flatpickr, as this seems to offer a better user experience.
Additionally the Flatpickr doc seems to indicate that this is what they do also, so I am thinking that this error is due to that as I was hijacking the CSS in _app.js
I spent some time today with Lit trying to make a simple WebComponent that makes a HTTP GET to a URI, which returns a fully formed HTML document, and I want to inject said HTML document into the WebComponent's shadow DOM; basically this WebComponent acts as a simple proxy for embedding an externally hosted (but trusted) web snippet on my web page. I ran into a few problems:
Lit considers all HTML unsafe, so i had to mark it with Lit's unsafeHTML directive.
Then, I noticed none of the script or link tags in the injected HTML were being followed, so I parsed the incoming HTML as a HtmlDocument, located all the script/link tags, and "re-created" them using document.createElement(...) and returned them in my render(). I'm now noticing that images arent showing up either.
I don't like scraping scripts/links and re-creating them and jamming them into my web component anyhow, but I'm curious - what's the right way to approach this syndicating/consuming syndicated HTML pages/fragments?
Is this a solved problem w/ oEmbed already?
Is this simpler to do with a different WebComponent library?
This seems way harder than it should be at this point.
I think that it has little to do with WebComponents but rather with the HTML5 specs. lit-html uses innerHTML to create elements.
Script elements inserted using innerHTML do not execute when they are inserted
There are still ways to execute JS but this has little to do with your question.
unsafeHTML(`<img src="triggerError" onerror="alert('BOOM')">`)
Regarding the images, it may be a path issue?
This should work:
unsafeHTML(`<img src='http://placehold.it/350x350'>`)
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.
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
Im developing a site and I would like the page to refresh when a change is detected to a CSS file. I used to be able to do this easily with the following bookmarks, but now none of them work on Chrome.
http://david.dojotoolkit.org/recss.html
http://calvincorreli.com/2006/02/13/re-recss/
http://www.paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/
I cant change the HTML of the site im working on so I cant use the livereload app. Ideally I would keep using Chrome but I would switch to another browser if necessary.
You have two ways:
Edit css file and use livereload to reload it automatically in Chrome
Change your CSS in Chrome and save it (without IDE using).
About livereload(it works not for css only).
Use livereload. You need download Livereload 2 and add javascript file to your page or use Chrome extension.
This script is meant to be included into the web pages you want to monitor, like this:
<script src="http://localhost:35729/livereload.js"></script>
LiveReload 2 server listens on port 35729 and serves livereload.js over HTTP (besides speaking the web socket protocol on the same port).
A slightly smarter way is to use the host name of the current page, assuming that it is being served from the same computer. This approach enables LiveReload when viewing the web page from other devices on the network:
<script>document.write('<script src="http://'
+ location.host.split(':')[0]
+ ':35729/livereload.js"></'
+ 'script>')</script>
However, location.host is empty for file: URLs, so we need to account for that:
<script>document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':35729/livereload.js"></'
+ 'script>')</script>
LiveReload.js finds a script tag that includes .../livereload.js and uses it to determine the hostname/port to connect to. It also understands some options from the query string: host, port, snipver, mindelay and maxdelay.
From GitHub
About changing CSS in Chrome devtools.
Just take a minuit and watch a demo from Paul Irish
Maybe it can fit your needs, since I don't know what editor you use there is two nice ones with embed live editing, are: Brackets IO (free) and JetBrains WebStorm. If you dont ever want to change editors, like Pinal said, Livereload it's a good one, but sometimes its litte bug to make it, but it's a good choice!
You can use Code Kit https://incident57.com/codekit/ and get the free trial and use it for 10 days or you can buy it for $29, I think its totally worth it. You can use Fire.app also http://fireapp.kkbox.com/. Tincr is also a nice app you can use and I think this one is free http://tin.cr/. Hope this helps!
Do you see any errors in chrome console? all 3 bookmarklets work fine for me on chrome 35.0.1916.153.
The change might come from your sites server, e.g some servers block requests with additional parameters. In that case you'll need to modify bookmarklet to not add it.