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.
Related
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.
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. :)
creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.
You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).
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.
I'm having trouble configuring my initial installation of dojo to include the widget framework correctly.
Following most of the code I see, including dijit should look like this:
dojo.require("dijit");
and that's that. Unfortunately, that doesn't seem to work.
Using this initializes the widgets correctly, but there's some weird behavior from the standard dijit methods that makes me think that I'm doing it wrong:
dojo.require("dijit.dijit");
Is there an element of configuring dojo that I'm missing? The files are all placed as they are in the 1.2.3 distribution, underneath another javascript folder.
You don't actually have to include dijit, just point directly to widgets you want to use: dojo.require("dijit.Dialog");. Weird widget behavior could be explained also by:
missing theme css files: check with FireBug that everything gets loaded
missing theme class attribute: add class="tundra" to the body element
missing djConfig="parseOnLoad: true"