My index.html has the following scripts.
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data.min.js"></script>
When I run the electron app, I get an Uncaught Error: Cannot find module 'moment'. The timezone library seems unable to tell that I have included moment.js.
This does appear to be a problem with Electron, as doing the same thing in a regular HTML file structure leads to everything working fine.
EDIT:
I have tried modifying my code in the following manner.
<script src="js/moment.js"></script>
<script onload="window.moment = require(__dirname+'/js/moment.js');" src="js/moment-timezone-with-data.min.js"></script>
This still does not appear to produce any results.
This works for me in the current electron project I am working on:
<head>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script type="application/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
In case you want to write javascript in the html which is not electron related, you can do the following:
<script>
/* Javascript */
</script>
<script>if (window.module) module = window.module;</script>
<script>
const ipc = require('electron').ipcRenderer;
/* Rest of electron related javascript */
</script>
Great! this solves my problem with moment and timezone, working fine in app and in browser
<script>
if (typeof module === 'object') {window.module = module; module = undefined;}
</script>
my code:
<!-- inject:js -->
<script src="lib/index.js"></script>
<script src="lib/moment/moment-with-locales.min.js"></script>
<script src="lib/moment-timezone/moment-timezone-with-data.min.js"</script>
<script src="lib/mdg-foundation/mdg2.js"></script>
<!-- endinject -->
<script>if (window.module) module = window.module;</script>
Huzzah! This problem appears to be solved from this answer.
Electron: jQuery is not defined
Copy-pasted, the answer is as follows:
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Basically, insert the first and last lines before employing script attachments.
Related
I am following this tutorial to add Firebase auth to an appengine app. It works except I always get the warning as if (typeof firebase === 'undefined') in index.html is always true. I may have put something in the wrong place (noob at web stuff). Here is what I have done (I have removed some comments and the msgbox display code):
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See ...";}
</script>
<script src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css">
<script src="{{ url_for('static', filename='script.js') }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
the secrets from firebase which work };
the rest is verbatim from the example
I have tried putting firebaseConfig in the header, same problem.
firebase won't have a value until after you include firebase-app.js. Right now, you are checking it before the inclusion. The order matters a lot. Just move the scripts above the code that uses them.
Also, the versions of your firebase scripts need to match exactly - what you show right now have version conflicts.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See ...";}
// now you can call firebase.initializeApp()
</script>
My code depends on both Bootstrap 4 and Popper.js. Bootstrap has a bundled JS file that includes Popper.js, but I can't figure out how to tell if the bundled or non-bundled version is loaded.
If bootstrap.js and popper.js are both included separately, I can test if Popper is defined, but if bootstrap.bundle.js is included Popper is not defined but the Bootstrap components that rely on Popper still work.
I can use something like typeof $().modal to check if bootstrap is included, but this is true of both the bundled and non-bundled verison.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Bundle Test</title>
<!-- Load jQuery JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
<!-- Load Bootstrap Bundled JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log('jQuery type is: ' + typeof $);
console.log('Bootstrap modal type is: ' + typeof $().modal);
console.log('Popper type is: ' + typeof Popper);
});
</script>
</head>
<body>
</body>
</html>
In this example, I would expect Popper to be a function since it's included in the Bootstrap bundle, but it is undefined.
You can try to check if a proper method available in global space. And if it's give you true it's then you know bootstrap.js and popper.js are both included separately otherwise it's bootstrap.bundle.js
I have paperscript code in offset-utils.js file. It contain:
var OffsetUtils = new function() { ... }
I load it in index.html:
<script src="vendor/vendor.js"></script>
<script src="utils.js"></script>
<script src="offset-utils.js" type="text/paperscript" canvas="canvas" ></script> <!-- -->
<script src="index.js"></script>
paper.js is included in vendor.js
In my code in index.js I got error
Uncaught ReferenceError: OffsetUtils is not defined
How I can load my paperscript library for use it in javascript code?
If you're declaring it with var then it's local to that source file. You need to export it, like:
window.OffsetUtils = new function() ...
I am trying to update an old cometd javascript wrapper and test client (was 1.3.x) that I have to the newer comet 2.5.1 javascript implementation. I have all of the dependencies and the browser can find them all, yet I am getting errors in Firebug's console (see below)
The head of my HTML is as below:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
All of these are found by the browser. Looking at Cometd.js I see the following:
org.cometd.Cometd = function(name)
{
....
}
So is that not defining org? Note that none of the errors in the Console are from Cometd.js. Otherwise I see no other definition of "org.cometd". I would really appreciate it if anyone can help me out. I am using Tomcat 7 and below is the dir structure:
Thanks.
UPDATE - Further testing
I reduced the header to:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
</head>
And removed ALL JS from the index.html. The only JS now included is the Cometd.js from the comet.org. There is still the same error... coming from the very first line in that script:
org.cometd.Cometd = function(name)
Not sure what I have missed here.
EDIT - Add jquery.cometd-reload.js
This is the contents of the file. It looks like it is "re-binding" functionality from the cometd library to use the jquery one instead (?). I'm not up to speed enough in JS to debug this (I'm a C++ dev really).
(function($)
{
function bind(org_cometd, cookie, ReloadExtension, cometd)
{
// Remap cometd COOKIE functions to jquery cookie functions
// Avoid to set to undefined if the jquery cookie plugin is not present
if (cookie)
{
org_cometd.COOKIE.set = cookie;
org_cometd.COOKIE.get = cookie;
}
var result = new ReloadExtension();
cometd.registerExtension('reload', result);
return result;
}
if (typeof define === 'function' && define.amd)
{
define(['org/cometd', 'jquery.cookie', 'org/cometd/ReloadExtension', 'jquery.cometd'], bind);
}
else
{
bind(org.cometd, $.cookie, org.cometd.ReloadExtension, $.cometd);
}
})(jQuery);
So the problem was that I misunderstood the project layout from the Comet.org site. I should have followed the direction posted at cometd primer for non-maven setups a lot more closely. Basically when you are setting up the project you download the distribution, and then you need to take the code from the war files bundled inside the tarball.
SO, once you have extracted the tarball...
Take the org folder from cometd-javascript-common-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\jquery\target) or cometd-javascript-jquery-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\common\target)
Take the jquery folder from cometd-javascript-jquery-2.5.1.war
The org namespace definition was in the file org/cometd.js which I did not have before, as I wrongly assumed that it had been replace by the org/cometd/Cometd.js file. The namespaces org and comet are defined as below starting on line 17 of that file:
// Namespaces for the cometd implementation
this.org = this.org || {};
org.cometd = {};
org.cometd.JSON = {};
The functions are working correctly now.
Try loading jQuery before any of the other JavaScript files -
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script> <!-- load first -->
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
I'm trying to add the ace editor to my app. I downloaded it from github, dropped the "ace/lib/ace" directory into my app's directory, included:
<script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>"
in my body tag and:
editor = ace.edit "editor"
in my script tag. I've tried to load the page in Chrome and Firefox and I get "define is not defined" in ace.js:46. The line in ace.js is:
define(function(require, exports, module) {
Does anyone know why ace is expecting the define() function to exist and why it's not finding it? Here's my source:
<html>
<body>
<div id="editor">some text</div>
<script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
</script>
</body>
</html>
I hacked it by putting window.define = ace.define; in my DOMload handler.
If you already have the source, then it is pretty easy to do still. Just go in the directory where you copied all the ace source.
Then, do:
npm install
node Makefile.dryice.js
See the wiki for additional details
https://github.com/ajaxorg/ace/wiki/Building-ace
You are getting this error because the RequireJS JavaScript library has not been included in your page.
To fix this either use an ace build or include RequireJS in your page.
If you choose to include RequireJS your html fragment will look something like this:
<!-- Editor will go here -->
<div id="editor"></div>
<!-- Load RequireJS -->
<script src="lib/requirejs/require.js"></script>
<!-- Initialize ace -->
<script>
// Tell RequireJS where ace is located
require.config({
paths: {
'ace': 'lib/ace'
}
});
// Load the ace module
require(['ace/ace'], function(ace) {
// Set up the editor
var editor = ace.edit('editor');
editor.setTheme('ace/theme/monokai');
editor.getSession().setMode('ace/mode/javascript');
// etc...
});
</script>
In React, if at all you are importing anything from ace-builds, your import order matters.
It should be like this
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-json';
Not like this
import 'ace-builds/src-noconflict/mode-json';
import AceEditor from 'react-ace';
Alternatively you can use a cdn
http://cdnjs.com/libraries/ace/
http://www.jsdelivr.com/#!ace
And replace
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
With something like
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>