I am new to Gatsby and this is my first time building a website with gatsby and react. When I run gatsby develop command, everything looks fine. All the CSS classes are loaded.
And the output is like this:
However, after I run the gatsby build command and then run gatsby serve, the class="static-websites" is not added to 2 paragraphs and the output looks different.
A photo from the inspect element after gatsby build and serve
Output after gatsby build and serve
Here's the basic code
I have removed the svg code to make it look clean.
This entire exact same p tag is repeated 5 times inside the Paper.
Note: I commented out the second p tag and then the class got removed from the sample website 3 paragraph. So the class="static-website" is being removed from alternate p tags.
It is working fine in gatsby develop though. Also, I am using material-ui.
Not a browser issue as I have tried in the new Edge, firefox and chrome.
New to gatsby so any help is appreciated.
Related
A colleague is testing a new release of our Vue application and ran into an issue that is not reproducible on my end. I'm trying to figure out if its a problem with the build process itself or something I'm missing about how Vue generates its HTML output - basically if we made some change that is causing this or if its some environment issue on his side.
The problem was initially that the CSS didn't look correct, after doing some inspecting I noticed that it wasn't being applied to certain classes because the generated HTML and minified CSS class IDs do not match.
For example, the minified CSS has...
.message-bubble[data-v-72703b4a]
But the HTML page is being generated on the website renders this...
<div data-v-7822f308" tabindex="0" class="message-bubble">
Any insight as to where to start looking for a root cause would be very helpful. For just a bit more information, the application is Vue 2.6 and we are using the vue/cli-service to do the builds with a vue.config.json to handle the build rules.
I was reading about fluid dynamics and came across this awesome project. After building it, I noticed that the little option menu that appears in the demo is not showing.
So, as I am completely new to Haxe, I thought that adding the little GUI options panel would be a great little challenge in an attempt to familiarise myself with Haxe. However, I have fallen at the first hurdle as I am getting the following error whilst trying to build the GUI that sits on top of the fluid experiment as shown in the demo:
Uncaught ReferenceError: dat is not defined
Inside the projects route directory, I have an src folder, then Main.hx; inside Main.hx at the bottom of the init() function, I am doing the following:
import dat.GUI;
function init():Void {
//other unrelated code goes here
var gui = new dat.GUI({autoPlace: true});
//particle count
var particleCountGUI = gui.add(particles, 'count').name('Particle Count').listen();
}
When I run the program, the console prints the error mentioned.
Things I have done:
Inside project.flow in the route directory, I have made reference to dat in the build dependencies (and downloaded dat.gui of course).
I have even tried using other frameworks to build the GUI, but I keep getting errors in the console log even if the build is successful. I did have luck getting a panel added, but rather than sitting on top of the fluid experiment, it pushed the whole thing down so there was a space between the panel and the fluid experiment.
Ideally, I want to recreate the options panel shown in the demo, but make it a scrollable list instead. However, I need to understand why I am having issues with dat first!
The simplest solution I can think of is to add this to init() (assuming the .js is located in the project root):
haxe.macro.Compiler.includeFile("dat.gui.min.js");
includeFile() is a macro that directly embeds the file into the .js generated by Haxe (by default at the top of the file). That's enough to make the UI show up for me:
The alternative would be to add a <script> tag to the index.html file as documented here. I'm not familiar enough with the flow build tool to know that's done in this case, but you'd have to find a way to:
modify the index.html template to include the <script> tag
make it copy the min.js to the bin/web directory.
So yeah, includeFile() definitely seems like the more convenient option. :)
Gist of code: https://gist.github.com/FA-ViPer/325251949e6dc70d0278
Issue on package: https://github.com/eahefnawy/meteor-onepage-scroll-0.9/issues/1
I use a template to create my div sections and have one jquery call that executes when it is rendered on a new page. From trouble shooting, it looks like when I go from one page to the next the classes will still update but the webkit-transform fails to be updated in the style.
I've moved to using the fullPage.js package (meteor add lawshe:fullpage). I ran into the same issue, but it can be overcome by running fullpage.destroy in template.destroyed.
After logging into my admin panel in Magento, the dropdowns in the admin panel are not showing up. JavaScript error console revealed some errors. After a bit of googling I have tried:
changing permisions of js folder to 755
all .js files and index.php in js folder to 644
Finally I also tried replacing the is folder with the original js folder of the Magento package. However nothing seems to work.
The reason why the dropdowns won't show is that Magento uses JavaScript to assign classes to the hovered menu elements and uses those classes in the CSS to show dropdowns. Errors in the javascript prevent from loading every other javascript that appear after the line with an error.
Don't replace js folder with default one - every new js that's there is there for a reason (it sounds like your website was customized, so removing js files responsible for custom features won't help you). Instead, you have to work on fixing every javascript error.
Please provide more data on those errors or a link to your website.
For some reason the TODO Tags i added to my .js files are not showing up inside the Tasks View. I've already made sure, that the "TODO" tag itsself is set under Task Tags for javascript but thei're still not showing up in the list. I've made a filter for the view to show all Tasks in the working set i'm using but nothing is there.
nitind's answer is perfect. I would like to make it comprehensive.
Right click the project & select properties. In 'Builders' , select 'JavaScript Validator'.
Similarly, to parse tasks in HTML, CSS & XML files, goto Preferences->General->Editors->Structured Text Editors->Task Tags and click 'Enable searching for Task Tags'
NOTE: The answer is validated only in eclipse indigo (3.7.1)
You must have your files in JavaScript Source Folders within a project and be running the JavaScript Validator Builder (or having it installed and automatic builds enabled).