I am having a problem using the "Tabs" component: https://material-ui.com/components/tabs/ In fact, when developing locally, the rendering of the component is fine. But pushing to the server, it looks weird (with differences in the borders on each side of the bar).
Moreover: when refreshing the page in which it has been embedded or browsing manually to this page, the whole template is broken all of a sudden!
I tried generating a build folder locally and launching the page from that build, and fell back on the same problem.
Thank you in advance for your help
From your description, I saw that your "build" is not work even in local development. That's mean it should not work on the production, of course.
The thing is, what is your actual "build" action? Depends on what library/framework you use, but basically with Material-UI, most popular problem comes from not load some CSS before using it's components.
Please read here first: https://material-ui.com/guides/server-rendering/#server-rendering
Just in case you use Gatsby, read here: https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/.
I'm using Gatsby and use this following config to fix some CSS issues.
stylesProvider: {
injectFirst: true,
}
Hope this help.
Related
I'm interested in using Hot Module Replacement with a newly created React app.
Facebook Incubator's create-react-app uses Webpack 2 which can be configured to support HMR, however in order to do so, one needs to "eject" the create-react-app project.
As the documentation points out, this is a "one way" operation and cannot be reversed.
If I'm to do this, I want to know what I might be giving up. I've been unable to locate any documentation that explains the potential drawbacks of ejecting.
The current configuration allows your project to get updates from create-react-app core team. Once you eject you no longer get this.
It's kind of like pulling in bootstrap css via CDN as opposed to downloading the source code and injecting it directly into your project.
If you want more control over your webpack, there are ways to configure/customize it without ejecting:
https://www.npmjs.com/package/custom-react-scripts
I am still a beginner in GWT . Firstly I write a sample project and run it . And open with browser giving url by Development Mode of my Eclipse IDE. At this time , I noticed that my browser was stopped just a few seconds and I can't do anythings on my browser . If I have some other pages are loading to open , they also stop loading . I think in this time browsers will download JavaScript files these need to show my page. That is worse thing for me .
By using RPC , I retrieve many datas from my database and try to render to my view page. That may also happen stop for a moment to my browser. So , I had add a Gif image in my web-page and press some button to retrieve data and try to render my view page. Supprisingly , this Gif image also stop animation. Why has this situation happend with GWT project ?
I am testing it in localhost. Can I avoid it ? Any suggestions ? Thanks...
Development mode (localhost) is very different from the production mode. It is many times slower, and it requires a lot of memory. This is why your browser freezes. You can:
Try a different browser. You may have a better performance on your system.
Add memory to your computer.
Optimize your code. There are many ways to do it. As a first step you need to understand what causes a problem: processing data or rendering of a page.
Finally, deploy your code to the production environment and check if you experience the same problems.
For example, I have an ajax request and it returns <script src='buggy.js'></script>.
Problem is, it doesn't show up in sources or resources panel. That means I can't do all the cool stuffs like adding breakpoint and inspecting the elements as they run.
I could only see the source of the js file under the Network panel.
Is there anyway to make chrome add them to the sources panel?
Or how do you guys go about debugging dynamically added scripts?
Using Canary.
I was having the same problem, and I found a workaround that is better than the deliberate exception. It does still require changing the code as opposed to just setting a breakpoint inside the chrome dev tools.
I tried using the "//# sourceURL=dynamicScript.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me unless it already existed in my tabs from a previous time when it produced an exception.
Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.
Please refer to https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript
(Original link is broken-- archived link below)
http://web.archive.org/web/20141016164821/https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript ("Breakpoints in Dynamic JavaScript").
I have applications which are displayed as tabs in Facebook pages which have been working fine. They suddenly started displaying this output in the tab:
/1336720089,176820405/
if (window.CavalryLogger) { CavalryLogger.start_js(["EgxV3"]); }
__d("UFIUpdate",
Any ideas what is going on???
Here is a link to one of them: http://www.facebook.com/TweakShoes/app_132692060112327
A temporary solution is to add https:// to facebook itself. This doesn't solve the problem, but it'll allow you to see your page on a per client basis.
The best fix in the longer term until facebook fixes this issue is to go to your account settings > Security > Enable secure browsing. This will enforce HTTPS wherever it can and should resolve the issue for a lot of pages you're trying to access.
Good Luck!
After encountering this issue yesterday, I tracked it down to an apparent conflict with the JS log wrapper included as part of HTML5 Boilerplate's script.js file. In particular, the "make it safe to use console.log always" snippet. After commenting it out, the FB lib error went away and my app displayed properly.
I didn't dig into what the conflict was, but here is the snippet. If you use something similar on your page, then it may be worth investigating.
/* make it safe to use console.log always */
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
{console.log();return window.console;}catch(err){return window.console={};}})());
It's probably not a coincidence that FB's own logger bugs out with this.
Facebook has opened a bug for this issue and recently triaged it to medium priority - no word on when it will be addressed.
So, this is a pretty trivial thing to accomplish apparently, but for some reason it just will not work for me. I created a VERY SIMPLE GWT app. It uses UIBinder just to display a label and a button, no actual processing or handling takes place. I did this to test deploying the app using strictly JS and html that is not hosted by Eclipse and Jetty or whatever.
I compile my app, run it in eclipse, and it works fine. However, when I try to run the html page directly from the WAR directory, it does not work.
Do I need this running on a webserver for it to work? It is just html and js, so I shouldn't? I've been to the GWT site about deploying, and surfed quite a few forums. They seem to always mention the necessity of a server, but it seems like it should not be necessary?
Since it is a pure JavaScript and HTML it should work properly without server. Checkout this link: Compile and run in Production Mode with Eclipse
In your EntryPoint class, in onModuleLoad() there's a RootPanel.get("someDivId") call somewhere. Make sure your html page (=the host page) contains a div with that id.
Also make sure your host page calls the right java script file. It's easy to forget to edit the host page after you renamed your GWT module (see rename-to in your .gwt.xml), as the generated JavaScript file matches your module name.
This will work locally on all browsers except Chrome for security reasons.
See http://code.google.com/p/chromium/issues/detail?id=31068
and http://code.google.com/p/chromium/issues/detail?id=70088