I am developing a mobile application using Appcelerator and am including some configuration functions using commonJS.
The code that I am running is as follows:
app.js
var well = {};
well.config = require('config');
config.js
var configJson = JSON.parse(Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,'config.json'));
exports.getFeed = function(_feed){
return configJson.feeds.sermon[_feed];
};
When I try to run the code, I get the following error:
Location:
[3,0] file:///android_asset/Resources/app.js
Wrapped java.lang.IllegalArgumentException: size must be >= 0 (file:///android_asset/Resources/app.js#3)
Am I doing something wrong to include the module?
you need to turn off fastdev and it will work fine, add this to yout tiapp.xml
<property name="ti.android.fastdev" type="bool">false</property>
<property name="ti.android.compilejs" type="bool">true</property>
I am using 1.7.2 and it is running fine on android
Related
I'm a total beginner with Vue.js and struggling to find the answer to what I feel is a fairly basic need.
I have a JavaScript library that cannot be installed locally and must be imported via script tag in the index.html file in the old-fashioned way:
<script src="https://foo.bar/scriptyscripts.js"></script>
This library has a bunch of methods in it that I need to use in various spots throughout my app, so it's not going to be a problem to load it globally. The issue I'm facing is that it's loading fine, but the methods are not being recognised in components.
I can use the methods and whatnot if I put them all in a script tag in the index.html however doing that rather defeats the whole point of having components.
Can anyone help me with the step that I'm missing to register all of the methods in this loaded js file so my components don't get mad?
Specifically, the script contains require.js and a collection of other things including JQuery.
Including the library makes the method 'require' available, which is used to load other modules on demand - the example being "js/qlik" in the below snippet. "js/qlik" loads JQuery and a stack of stuff associated with "qlik".
//async login method here. not relevant to this problem
login().then(() => {
require.config({
baseUrl:
(config.isSecure ? "https://" : "http://") +
config.host +
(config.port ? ":" + config.port : "") +
config.prefix +
"resources",
webIntegrationId: config.webIntegrationId,
});
//Load js/qlik after authentication is successful
require(["js/qlik"], function (qlik) {
qlik.on("error", function (error) {
$("#popupText").append(error.message + "<br>");
$("#popup").fadeIn(1000);
});
$("#closePopup").click(function () {
$("#popup").hide();
});
var app = qlik.openApp("caa866be-c8e1-44c8-b67b-dac9d24421fa", config);
});
});
The problem I have is that if I load this library in the index.html file and then try to execute the methods in the snippet above in any component, it does not know that the methods are available.
I see:
'Module not found: Error: Can't resolve 'js/qlik'
66:11 error '$' is not defined
which indicates that the components are unaware of the methods because they're not registered like they would be if I were importing a packaged afterinstalling it locally via NPM
i.e. Your original js code: function abc(){// sth...}
What you need: window.abc = ()=>{// sth...}
Even if you want it in Vue dom.
You should add vue.prototype.abc = ()=>{//sth...}
I used create-react-app(typescripts) to build a project, and added antd#3.26.13 with customize-cra as the website I was following told me.
I would like use the module.css, and I want to use module.less, like css, but encountered some error messages:
./src/layout/basic.module.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-3!./src/layout/basic.module.less)
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'localIdentName'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
My code follows:
const {
override,
addWebpackAlias,
fixBabelImports,
addLessLoader,
addDecoratorsLegacy
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"#":require('path').resolve(__dirname,"src")
}),
fixBabelImports('import',{
libraryName:'antd',
libraryDirectory:'es',
style:true
}),
addLessLoader({
javascriptEnabled:true,
modifyVars:{'#primary-color':'#1DA57A'},
}),
addDecoratorsLegacy()
);
The current version of customize-cra isn't compatible with the latest version of create-react-app, to be precise with css-loader. Try to install customize-cra#next to get alpha version. They fixed that issue there.
I make the setup as given in the documentation and always get the following error message: "Error: Requested module not found: android.app.Activity", how to solve this ?
function doClick(e) {
alert($.label.text);
}
var Activity = require('android.app.Activity');
var ac = new Activity();
$.index.open();
If you're working with LiveView - disable LiveView and clean your project. That was the case for me on Android.
I'm using this code to get the Android activities (i.e. open, pause, resume, stop etc..):
var activity = Ti.Android.currentActivity;
But in your situation, you probably need to use this:
var Activity = require('android.app.Activity');
var ac = new Activity(Ti.Android.currentActivity)
Make sure hyperloop module is available in your tiapp.xml file modules section.
<modules>
<module platform="android">hyperloop</module>
<module platform="iphone">hyperloop</module>
</modules>
Please see the following doc links
- http://docs.appcelerator.com/platform/latest/#!/guide/Enabling_Hyperloop
- http://docs.appcelerator.com/platform/latest/#!/guide/Hyperloop_Guides
Hope this helps.
I try to use Arcgis javascript API in Liferay 7.0 but it's fail. I think because Liferay 7.0 using requireJS for using javascript which conflict with dojo of Arcgis javascript API. I am using this code for implement Arcgis API:
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arcgis_js_api/library/3.14/3.14/init.js"></script>
<script>
require([
"esri/map", "dojo/dom"
], function(Map, dom) {
var map = new esri.Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
This is console log:
java.lang.IllegalArgumentException: Path esri/map.js does not start with a "/" character
java.lang.IllegalArgumentException: Path dojo.js does not start with a "/" character
This is javascript error:
Error: defineAlreadyDefined
Anyone has solution help me please. Thanks!
As you mention Liferay7 and your script tag makes use of <%=request.getContextPath()%>, you most likely have a mismatch between your portlet and the servlet API: request is not aware of any portlet context (but is still there, because JSPs have been designed for servlets and it's a mandatory object that's around, irritating a lot of people)
The URLs for your own Javascript files are just not relative to the context root, but Liferay makes them available on a different path. The easiest way, without messing around with this location, is to just mention the file you'd like to include in your portlet's configuration. In Liferay 7 OSGi portlet modules, it works like this (pseudocode, simplified)
#Component(
immediate = true,
property = {
"com.liferay.portlet.footer-portlet-javascript=/js/main.js",
"javax.portlet.display-name=My Portlet",
},
service = Portlet.class
)
In JSR-286 portlets packaged in WARs, you'd use the footer-portlet-javascript value in WEB-INF/liferay-portlet.xml.
Alternatively, use the header-* variant.
I personally prefer this way over memorizing how the path of resources is being constructed.
I use this code before implement arcgis (javascript):
if(typeof define !== "undefined" && typeof require !== "undefined"){
window.__define = window.define;
window.__require = window.require;
window.define = undefined;
window.require = undefined;}
It will be resolved.
We have an existing React Native project (version 0.22.2) and I'm trying to set up the Flow type checker (version 0.23) on certain files. However, Flow is giving a lot of errors for the require()s calls we're using for <Image> sources. For example, we have this code in one of our components in Header.js:
<Image source={require('./images/nav.png')} style={styles.navIcon} />
Which React Native handles fine and it works. However, Flow seems to be trying to treat the require() as a regular module require and not finding it, and giving errors like this:
Header.js:30
30: <Image source={require('./images/nav.png')} style={styles.navIcon} />
^^^^^^^^^^^^^^^^^^^^^^^^^^^ ./images/nav.png. Required module not found
How can I tell Flow to stop giving these errors? I've tried adding .*/images/.* to the [ignore] section of my .flowconfig, but that doesn't change anything.
You can use the module.name_mapper.extension option in .flowconfig. For example,
[options]
module.name_mapper.extension= 'png' -> '<PROJECT_ROOT>/ImageSourceStub.js.flow'
which will map any module name ending in .png to an ImageSourceStub module, as if instead of writing require('./foo.png') you had written require('./path/to/root/ImageSourceStub').
In ImageSourceStub.js.flow you can do
const stub = {
uri: 'stub.png'
};
export default stub; // or module.exports = stub;
so that Flow knows that require('*.png') returns a {uri: string}.
See also the Advanced Configuration docs.
I don't have a real answer besides to say that flow in React Native seems really dodgy today and it would not surprise me if flow just simply doesn't support this usage at all, but I'd love to be totally surprised!
Personally, as a work-around, I'd just add a higher level component and ignore the flow errors in that file.
// Picture.js
// (No #flow tag at top of file)
const Picture = ({ source }) => (
<Image source={require(source)} />
)
Then use <Picture source="my/path/pic.jpg" /> instead.
Had same issue, for JPG files, solved with this .flowconfig
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.jpg$' -> 'RelativeImageStub'