Dojo Build System - using async plugin with google maps api - javascript

I'm trying to build a dojo app and am encountering one error that I can't seem to fix.
The app runs without error unbuilt and I am trying to use the Dojo Build System to optimize the files into one layer.
The error is related to the following import:
define([
'plugins/async!//maps.google.com/maps/api/js?v=3'
//...
The error is
error(308) Failed to evaluate AMD define function.
module: gis/dijit/StreetView; text:
'gis/plugins/async!
error: SyntaxError: Unexpected token ILLEGAL
error(352) Optimizer reported errors; consult build report for details.
The async plugin looks something like this:
define(function () {
var cb = '_asyncApiLoaderCallback';
return {
load: function (param, req, loadCallback) {
if (!cb) {
return;
} else {
window.dojoConfig[cb] = function () {
delete window.dojoConfig[cb];
cb = null;
loadCallback();
};
require([param + '&callback=dojoConfig.' + cb]);
}
}
};
});

The solution to this problem was to switch to the google maps loader from bower/npm.
https://github.com/Carrooi/Js-GoogleMapsLoader
The dojo build system appears to treat the // in the path like a comment, which makes paths like
'my/plugin!http://www.google.com'
show up as
'my/plugin!http:
This causes an error because everything after the // is a comment now and there's no apostrophe.. In addition the path www.google.com is obviously missing.

Related

Uncaught Error: Script error for "core.js" - Trying simple console log from module

I'm making a Chrome extension and therefore trying to use require.js, but unsuccessful to "require" the first file to be load.
What i am doing wrong?
Project details
Error:
Project structure:
app.js:
var jq = $.noConflict(true);
function docReady() {
requirejs.config({
baseUrl: 'app',
paths: {
}
});
require(['core'], function(core) {
core.log();
});
}
jq(document).ready(docReady);
core.js:
define(function () {
var methods = {};
methods.log = function() {
console.log('testing...');
}
return methods;
});
Yes, i do load require.js in content_scripts inside the manifest.json, before loading app.js
I'm trying to do something simple as displaying a console.log from my second file, but after so many tries idk what to do.
May someone help me?
Your manifest needs to loading the core.js before or after the content load event

Unknown named module in React Native when trying to make module optional

Here's my previous question on this:
Unable to resolve module in React Native - however I want to make the module optional
And here is the resource I was pointed to:
How to require module only if exist. React native
This is my current code:
let GoogleSignin;
const GoogleSigninInit = '#react-native-community/google-signin';
try {
GoogleSignin = require.call(null, GoogleSigninTest);
} catch (e) {
console.log("Google Signin is not found");
}
let FBSDK;
const FBSDKInit = 'react-native-fbsdk';
try {
FBSDK = require.call(null, FBSDKInit);
} catch (e) {
console.log("Facebook SDK is not found");
}
let InAppBrowser;
const InAppBrowserInit = 'react-native-inappbrowser-reborn';
try {
InAppBrowser = require.call(null, InAppBrowserInit);
} catch (e) {
console.log(e);
console.log("InApp Browser is not found");
}
let AppleAuth;
const AppleAuthInit = '#invertase/react-native-apple-authentication';
try {
AppleAuth = require.call(null, AppleAuthInit);
} catch (e) {
console.log("Apple auth is not found");
}
However, when I try to use react-native-inappbrowser-reborn, which is absolutely in my node_modules folder, I get the following error:
Unknown named module: "react-native-inappbrowser-reborn"
So the code I have has definitely gotten rid of the error from optional modules, however it doesn't seem to actually load them.
Is there a way to actually load the modules that I have in node_modules?
EDIT:
Here is the full stack trace for this particular module, but again, it happens with other modules too.
Unknown named module: "react-native-inappbrowser-reborn"
- node_modules/metro/src/lib/polyfills/require.js:95:12 in metroRequire
- node_modules/react-native-keycloak-social-login/src/Login.js:25:25 in <global>
- node_modules/metro/src/lib/polyfills/require.js:321:4 in loadModuleImplementation
- node_modules/metro/src/lib/polyfills/require.js:201:20 in guardedLoadModule
- node_modules/metro/src/lib/polyfills/require.js:128:6 in metroRequire
- node_modules/metro/src/lib/polyfills/require.js:657:4 in runUpdatedModule
- node_modules/metro/src/lib/polyfills/require.js:532:23 in metroHotUpdateModule
- node_modules/metro/src/lib/polyfills/require.js:53:15 in define
* http://127.0.0.1:19001/node_modules/react-native-keycloak-social-login/src/Login.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:1 in eval
- node_modules/metro/src/lib/bundle-modules/injectUpdate.js:65:4 in inject
According to README, the installation is not completely automatic and you need to follow further process depending on the platform and react-native version.
If you have followed the above, then try deleting your node_modules, running npm cache clean and reinstalling node_modules and running the app again.

Rendering a twig template in a Chrome extension

I'm trying to render a twig (with twigjs) template within a chrome extension. I'm currently compiling the following typescript with a browserify build script.
import * as twig from "twig"
const MAIN_TEMPLATE: string = chrome.runtime.getURL("twig/main.html.twig");
document.addEventListener("DOMContentLoaded", () => {
twig.renderFile(MAIN_TEMPLATE, (err: Error, html: string) => {
document.querySelector("body").innerHTML = html;
});
});
I've made sure to include the files in my manifest.json, as such.
...
"web_accessible_resources": [
"twig/*.html.twig"
]
...
However, upon running this, I get the following stacktrace. I'm not really sure what to do, as the URL that chrome.runtime.getURL returns does resolve if I punch it into my address bar.
Uncaught TypeError: t.stat is not a function
at Object.<anonymous> (twig.js:1)
at Object.e.Templates.loadRemote (twig.js:1)
at Object.e.exports.twig (twig.js:1)
at Object.e.exports.renderFile (twig.js:1)
at HTMLDocument.<anonymous> (browser-action.ts:7)
Digging through some of the twigjs source code, it looks like it was a mistake of mine to use the renderFile helper. This is more correct.
const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false};
document.querySelector("body").innerHTML = MAIN_TEMPLATE.render({tabs, tabListTemplate: TAB_LIST_TEMPLATE_URI});
I used async false since it's only going to be getting from a local connection, so there really shouldn't be any lag loading the template synchronously.

Issues Integrating ACE Editor with Keystonejs App

It says here(http://ace.c9.io/#nav=embedding) just copy one of src* subdirectories somewhere into your project
I have put it in mykeystoneapp/public/js(my default home is mykeystoneapp/public)
Here are the errors I get:
1.Uncaught TypeError: $.cookie is not a function(ui.js:8)
2.Uncaught Error: Missed anonymous define() module: function …(require.js:141)
http://requirejs.org/docs/errors.html#mismatch
Here is my Jade code:
script(src='/js/ace/demo/kitchen-sink/require.js')
script.
require.config({paths: {ace: "/js/ace/build/src"}});
define('testace', ['ace/ace'],
function(ace, langtools) {
console.log("This is the testace module");
var editor = ace.edit("editor_container");
editor.setTheme('eclipse');
editor.session.setMode('javascript');
require(["/js/ace/lib/ace/requirejs/text!src/ace"], function(e){
editor.setValue(e);
})
});
require(['testace']);
Secondly if I put debugger in EventEmitter(https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js#L3300)
I can see it’s properly reaching EventEmitter._dispatchEvent with
eventName=‘changeMode’ but it returns without any operation as there are no !listeners or defaultHandler
editor.session.setMode('javascript'); is wrong, it should be editor.session.setMode('ace/mode/javascript'); instead. Same for theme which is supposed to be ace/theme/eclipse.
error in ui.js is not related to ace, since ace doesn't have a file named ui.

Importing other .js files in Buster.js tests

I'm making my first attempt at Javascript testing, with Buster.js
I've followed the instructions at the Buster site to run "states the obvious" test. However, I haven't been able to import any of my existing .js files into the tests.
For instance, I have a file js/testLibrary.js, containing:
function addTwo(inp) {
return inp+2;
}
and a file test/first-test.js, containing:
// Node.js tests
var buster = require("buster");
var testLibrary = require("../js/testLibrary.js");
var assert = buster.referee.assert;
buster.testCase("A module", {
"Test The Library": function() {
result = addTwo(3);
console.log(result);
assert(true, 'a message for you');
}
});
Running buster-test gives:
Error: A module Test The Library
ReferenceError: addTwo is not defined
[...]
Replacing result = addTwo(3); with result = testLibrary.addTwo(3); gives:
Error: A module Test The Library
TypeError: Object #<Object> has no method 'addTwo'
[...]
I'm probably missing something really basic, but at present, I'm completely stumped. Can someone point me in the right direction?
That is because you are not exporting this function from the module.
Take a look at that:
http://nodejs.org/api/modules.html#modules_module_exports

Categories

Resources