BuildFire: buildfire is not defined - buildfire

I have created a plugin for an app, that is working perfectly fine in local machine and on app.buildfire. But when I have published my changes and tried testing on device I am getting below error.
04-27 10:32:33.741 6512-6512/? I/chromium: [INFO:CONSOLE(173)] "Uncaught ReferenceError: buildfire is not defined", source: file:///data/user/0/com.bf.app698324/files/files/pluginTemplate/plugins/84dad72d-0641-4ebd-8349-ff9bd3d7c2b6/widget/index.html?fid=pluginFrame0.3707975031273656&v=1556341353636 (173)
Below is the path for buildfire.min.js setup in my index.html file in widget folder.
<script src="../../../../scripts/buildfire.min.js"></script>
I don't know why buildfire is not defined, my guess was if it is working perfectly on app.buildfire.com then it should work on device too.
I need your help guys, if there is some other path for this for release purpose.

I have managed to find out an answer for this.
When we are publishing our plugin, buildfire resources are available at one level down as compared to it's SDK hierarchy. So instead of below line :
<script src="../../../../scripts/buildfire.min.js"></script>
We have to include below line in order to make our plugin work :
<script src="../../../scripts/buildfire.min.js"></script>
This issue is happening with SDK 1.19.3

Related

jHipster shows "An error has occurred :-(" While opening the application in the Internet explorer but works fine in chrome browser

JHipster throws the following error message at me when tried to open the application in internet explorer. But works fine in the Chrome browser.
My jhipster has spring boot with react and is connected to IBM db2 database.
Tried opening the application after running the command 'mvnw'
and also tried with 'npm start'.
Both the commands give the same result.
An error has occurred :-(
Usual error causes
1.You started the application from an IDE and you didn't run npm start or npm run webpack:build.
2.You had a network error while running npm install. If you are behind a corporate proxy, it is likely that this error was caused by your proxy. Have a look at the JHipster error logs, you will probably have the cause of the error.
3.You installed a Node.js version that doesn't work with JHipster: please use an LTS (long-term support) version, as it's the only version we support.
Building the client side code again
If you want to go fast, run ./mvnw to build and run everything.
If you want to have more control, so you can debug your issue more easily, you should follow the following steps:
1.Install npm dependencies with the command npm install
2.Build the client with the command npm run webpack:build or npm start
3.Start the server with ./mvnw or using your IDE
Getting more help
If you have a question on how to use JHipster
Go to Stack Overflow with the "jhipster" tag.
If you have a bug or a feature request
First read our contributing guidelines.
Then, fill a ticket on our bug tracker, we'll be happy to resolve your issue!
If you want to chat with contributors and other users
Join our chat room on Gitter.im. Please note that this is a public chat room, and that we expect you to respect other people and write in a correct English language!
Check out this issue - https://github.com/jhipster/generator-jhipster/issues/8250
Looks like IE is not supported at all
Finally, after some research and help from others, I figured out we need to add the polyfills to the jhipster project, Usually in the head tag of index.html file.
I tried downloading the polyfills.js and loading into my application via a script tag, but nothing seems to work, What I did instead was used the cdn from cloudflare and inserted in index.html, Which started to work like a charm.
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.js"></script>
Note: An important thing which I learned over my experience is, It makes necessary to include these polyfills to the react project if it has to work in Internet Explorer.
Suggestion from https://github.com/jhipster/generator-jhipster/issues/11566
A quick dirty workaround, set all compile option to es5 :
tsjconfig.json "target": "es5" "lib": ["es5", "dom"],
webpack.common.js mainFields: [ 'es5', 'browser', 'module', 'main'],
Fixed!
Google is doing a great job in discovering new websites and content, but sometimes we need to force Google to crawl(reindex) our website, either all of it or individual pages.
So the reason we see "An error has occurred" - it's because at the first time Google saw our site (index.html file) it indexed without additional tags.
Step 1:
Add additional meta tag in head part your index.html page:
<meta name="Description" content="your-description-here">
Step 2:
Use Google Search Console for reindex your site.
https://search.google.com/search-console/welcome
P.S. Ask question to google: "How do I get Google to recrawl my website?". It will help you to better understand Google Search Console and why you need to use it for fixing your error.
After a little research, I found we have to run the UI app also in another window using npm start, which solved the problem for me.
I had the similar challenge recently and the application was not working on Google Chrome only. It was solved by adding the lines highlighted in blue below to the application yaml in spring-boot:
Also not that the content-security-policy needs to be understood properly before altering these changes because of injection.
Reference materials: https://www.baeldung.com/spring-security-csp and https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src

Bluemix DevOps Editor Syntax Error Marker

I'm new in Bluemix DevOps. I created an application based on the SDK for node.js.
I modified an HTML source to test a simple application. My application is working well. But I don't know why below errors is displayed.
What should I do?
If everything is actually working fine, it might be that jQuery isn't a part of your ESLint environment.
Does adding /*eslint-env jquery */ before the function that uses jQuery fix this?
edit: Additionally, is there an option when you click on the error to add that declaration to your file?

vstirbu/InstagramPlugin on Steroids

I am attempting to use vstirbu's Instagram plugin (https://github.com/vstirbu/InstagramPlugin) for Cordova with my app. My app is using the Appgyver Steroids platform. after adding the plugin to my build the app builds fine and I am able to install it on the phone fine. there is only one page where the Instagram functionality is needed and when that page is opened I get the "undefined is not an object (evaluating 'window.plugins.Instagram.share')" error. are there other Instagram plugins available that I might try out or are there steps to initialize the plug in that I might be missing.
I am assuming you built a debug scanner version with the plugin. I had this issue with a BLE plugin. I was trying to reference the plugin as window.plugins.nameOfPluginObject and it didn't exist. It didn't exist that way, but it did exist as nameOfPluginObject. I could make calls to it that way. nameOfPluginObject.someMethod();.
See if you can debug the app in Safari / Chrome and use the console to type typeof window.plugins.Instagram and then typeof Instagram. I am guessing typeof Instagram returns object and the other returns undefined.
Is Cordova loaded in that page? Are you making the calls after deviceready (although if it's the console, I suppose you're alright). The plugin JavaScripts are loaded when cordova.js loads. Also, you can extract the IPA file (just rename it to .zip) and see if the plugin files are correctly in the package (although if it builds correctly, it should be fine).

NodeJs started, working but nothing is displayed

I am working on a NodeJs/Angular application that is based on the article example provided through the MEAN.js stack. I have been spending many hours developing things, and everything worked fine - until just now.
When I start my application using 'npm start' my app is found and everything seems to work as expected, but nothing is shown in my browser, even though it seems like all scripts can be found and the browser receives HTML.
When I inspect the source code in the browser window it shows a complete HTML file with all required CSS and JS files. The files can be found; clicking on a link shows the source.
I did an 'npm update' recently, and I suspect that the problems started there. Maybe there is an updated external module that doesn't interact with some other module, but I have no idea how I can find out which one.
Any ideas? Thanks in advance.
you are missing JQuery in <script>

scala/lift jetty IntelliJ Idea: imported javascript files not showing changes in served page

I have never asked a forum question before so if I'm breaking a rule its unintentional and I'm sorry.
I have a webapp that I am making using scala/lift and jetty in the IntelliJ Idea IDE. I have a javascript debug webapp that I designed for .net frame work although all I used the .net server for was to serve it because it runs strictly in in html and javascript. I want to use my debug tool for pages that are served by the lift/scala/jetty server and I am currently porting it so that it will work on the new server. The problem that I am having is that the html pages in my debug tool import external javascript files like so:
<script type = "text/javascript" src = "jsFile.js"></script>
now this seemed to work at first but when I made changes to the src javascript file they were not happening in the page that was served by lift. I verified this by following the link in the view page source page from the browser and it showed the version of the file before I added it into the project. If I change the name of the file in the file system the IDE recognizes right away that it can't resolve the path to jsFile.js. I have tried serving the pages through the site map as well as dumping my project in the /static directory. I have restarted, browser,ide, server, os. I have rebuilt the project, remade the module and have done a synchronize. I have created a new project from scatch and ran into the same problem. I believe that if I where to dynamically use lift to insert my javascript with JsRaw it would fix the problem but I still want to know why this isn't working in case its something that I'm doing wrong that will rear up bite me again someday. Any thoughts would be greatly appreciated.
In your template, try to enclose your tags with the lift tag with-resource-id
like
<lift:with-resource-id>
<script type = "text/javascript" src = "jsFile.js"></script>
</lift:with-resource-id>
If this does not solve the problem, are you using SBT to build your lift app? If this is the case, you can have one terminal running
~prepare-webapp
which basically watches for changes on scala files as well as html/css/js files and updates the running jetty (which has to be started by sbt as well running:
jetty-run

Resources