My problem is very much like the Hem on windows problem: Uncaught module jqueryify not found
I can't deploy my spine mobile app to a android mobile devise using phonegap, it works perfectly in a browser (linux) but whenever I run it through eclipse on a android devise (various versions tested) I recieve:
06-17 18:39:36.878: E/Web Console(5976): ReferenceError: Can't find variable: require at file:///android_asset/www/index.html:9
Which is referencing:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>App</title>
<link rel="stylesheet" href="/application.css" type="text/css" charset="utf-8">
<script src="/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQuery = require("jqueryify"); //REFERENCED LINE 9
var exports = this;
jQuery(function(){
var App = require("index");
exports.app = new App({el: $("body")});
});
</script>
</head>
<body>
</body>
</html>
I have installed the dependencies through npm and also built it using Hem, I'm kind of lost to what the problem might be.
Any ideas why this might be happening?
** EDIT **
The problem was the .js file was not being found, needed:
<script src="./application.js" type="text/javascript" charset="utf-8"></script>
NOTICE THE '.' in the javascript file src att.
The error specifically means that the require function is undefined when it executes your inline script. Since require isn't a built-in part of browser JavaScript, that means whatever code (presumably a module-loader library) should be providing it either isn't getting executed or is failing. Given your code, that would have to be somewhere in application.js.
Related
I am working on a 3D viewer using express.
My problem is that I am trying to require the file system module in one (not the main one) of my JS files. When I try to load the browser, the console gives me the next message:
ReferenceError: require is not defined
My project structure is:
node_module
src
js
app.js // the problem is here
views
index.ejs
server.js
A short example of how to use importing with the browser:
Create index.html with next content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
Check script tag - we set type="module" - this instructs the browser that we are using module system
Create main.js script with:
import name from './name.js';
console.log(name);
Create name.js file:
const name = 'test';
export default name;
Now you need to run this app. The easiest way is to use WebServer For Chrome
Start the application and check the console. You should see that the 'test' is logged.
That's it. Please, keep in mind that this is just an example. We don't touch minification, caching and other important things.
I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?
Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.
I'm trying to host a simple (Typescript) Aurelia app on Heroku with a very simple Express server, but when I spin it up I get the following error in Firefox:
The resource from
“https://ub-edis.herokuapp.com/jspm_packages/system.js” was blocked
due to MIME type mismatch (X-Content-Type-Options: nosniff).
and then all sorts of subsequent errors because the code obviously can't resolve System.
Running this code locally works perfectly well. Since I'm not sure how to configure Heroku to install my JSPM and Typings dependencies, I'm using dropbox to upload my repo. So I just copy and pasted my whole project directory over (I know this isn't ideal, but I'm just a newby trying to get this thing to work with minimal effort, not to produce production code). If I look under the Sources tab in the Chrome dev tools it finds my config.js correctly, so I don't think I'm getting the error because it can't find system.js.
This is my index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EDIS</title>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="jspm_packages/system.js" type="text/javascript"></script>
<script src="config.js" type="text/javascript"></script>
<script type="text/javascript">
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
I'm a little out of my depth with this, so any help would be greatly appreciated!
I am using the BigNumber library of MikeMcl to handle my needs for big numbers. I use this library in an Ionic/Angular project.
As explained on Github, the way to install and use this library is to include a script tage in your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- compiled css output -->
<link href="css/ionic.app.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- ********* BIGNUMBER library ********* -->
<script src='lib/bignumber.js/bignumber.min.js'></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Now in my code, I can use this library as for instance:
x = new BigNumber(123.4567)
y = BigNumber('123456.7e-3')
z = new BigNumber(x)
x.equals(y) && y.equals(z) && x.equals(z) // true
I tested this and it works fine on Chrome and on Safari (even on device).
But when I install the app on my phone, using Phonegap Build, the app does not work anymore (I checked that this library is the cause by removing the BigNumber syntaxes from my code). Moreover, the Angular in the app just crashes and shows for instance {{variableName}} and nothing is working.
Because I develop in a cloud environment, I did try to debug the app using the Safari Developer Debug Console on a mac (by plugging my phone with an USB to the mac and then enabling Developer tools in Safari).
However, no errors were found with exception of one:
file not found: "path/to/ionic/lib/js/angular.min.js.map" 404
But this is not the cause of the problem.
What is going on? How can I still use this javascript library on my device?
I have just tested your code and it doesn't work because when you create the y variable you don't use the word new.
This is the code I've used and it works
x = new BigNumber(123.4567)
y = new BigNumber('123456.7e-3')
z = new BigNumber(x)
alert( x.equals(y) && y.equals(z) && x.equals(z));// I get true
#JohnAndrews,
If this is the extent of your code, it is missing the deviceready listener. On cordova/phonegap you typically cannot do stuff, until you get the deviceready event. So, this is the only thing I can think of, Can you add a function onDeviceReady() {} and see if that fixes your problem?
Oh and, of course, make sure you run your operations AFTER this event.
Found the solution. If you are also experiencing that a javascript library is not working on your device, but it does in the browser, then this answer might help you.
The problem occured that when I ran npm install to install the package, that it did not update my .git dependencies properly. What happened is that every time I packaged my app through Github and Phonegap Build, the folder of BigNumber was not taken into account. So basically, the file bignumber.js was not available in the app and thats why it did not work.
I solved it by copying all the files from the BigNumber folder to a new custom folder.
A related question is here: Git not pushing all files and folders
I think, mocha does not recognise jQuery in the scope of my tests, because it tests plain JavaScript without a problem. I tried to require jQuery's full code in the beginning of the .js file with my tests, tried to manually define $ with
before(function() {/* some code */}), but I always get this ReferenceError: $ is not defined when I try to run my tests and there is jQuery code tested with some of them.
Any ideas of how do I fix this?
In docs:
Mocha runs in the browser. Every release of Mocha will have new builds
of ./mocha.js and ./mocha.css for use in the browser. To setup Mocha
for browser use all you have to do is include the script, stylesheet,
tell Mocha which interface you wish to use, and then run the tests. A
typical setup might look something like the following, where we call
mocha.setup('bdd') to use the BDD interface before loading the test
scripts, running them onload with mocha.run().
So you can include any scripts, but the first you include libs, like jQuery, then tests
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="jquery.js"></script>
<script src="expect.js"></script>
<script src="mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="test.array.js"></script>
<script src="test.object.js"></script>
<script src="test.xhr.js"></script>
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
mocha.run();
</script>
</body>
</html>