I am trying to use fingerprintjs2 for the identification of devices. However, I am new to using Libraries and I get the error Uncaught ReferenceError: Fingerprint2 is not defined.
Here is my code:
<script src="https://github.com/Valve/fingerprintjs2"></script>
<script>
if (window.requestIdleCallback) {
requestIdleCallback(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
})
} else {
setTimeout(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
}, 500)
}
</script>
Can someone tell me why this is not working? I have done the yarn install to this.
Is this not the correct way to use javascript libraries?
Also, please tell me if there are any alternatives to remembering devices, however, there seems to be none as far as I have done some research.
Edit:
I am now thinking that it might be about CORS since it gives the warning: Cross-Origin Read Blocking (CORB) blocked cross-origin response https://cdnjs.com/libraries/fingerprintjs2 with MIME type text/html
I fixed this issue by downloading the file locally and setting the source of the script to that fingerprint2.js file
In my case, download all the github repository and install it locally in my plugins folder is working. After that, you can minify it again.
Related
Using Nativescript & Angular I have been trying to implement a clock counter in a Web Worker thread.
Currently, the app initiates the clock counter using a setInterval function and although that works, it implies that the clock counter is on the main thread where it doesn't need to be.
So, the intention is to move the clock counter to a different thread and therefore not burden the main thread.
I started of simple, trying to write similar code that I got from this page: frenetic.be
However, trying to initialize the worker process as w = new Worker("simple-timer.js");
But this lead me to the error:
ERROR Error: com.tns.NativeScriptException: Failed to find module: "simple-timer.js" relative to app//
despite the fact that the file was in the same folder as the component from which it was called.
So, digging deeper, I ended up trying to make sense of the nativescript page on web workers
This seems to imply that it should be relatively simple and that the new Worker() should be called with a valid path argument. Though this failed, with the same error as above.
So taking the deep-dive, I tried to follow the following instructions: github page
Though this managed to f*ck up things even further.
Though there is one step that I couldn't do (step 2 in Usage Typescript) github page, section
Which refers to the references.d.ts but that file is apparently no longer part of the nativescript file set for an app.
So, I reduced to simpler means and downloaded the angular-demo file and looked if I could understand the method they followed. Copied the service, almost 1-1 and added a testmethod to my component.
That gave an plugin error, so, I added the plugin reference as per section 7 & 8 on the github page
Although this get's me quite far, I now still end up with the same error?
For some reason, the file paths simply do not seem to be translated correctly and hence the correct files are not found?
I have also looked at:
How to use Nativescript worker with typescript?
and this one
Is it feasible to use web worker (multi-threading) in Angular and Typescript in NativeScript?
Anybody have usefull tips on how to implement this correctly?
You have to include your worker(s) files to Webpack using config file so I have just added this line to webpack.config.js and it worked!
new CopyWebpackPlugin([
{ from: { glob: 'css/**', dot: false } },
->{ from: { glob: 'backgroundTasks/**', dot: false } },
{ from: { glob: 'images/**', dot: false } },
{ from: { glob: 'fonts/**', dot: false } },
{ from: { glob: 'sounds/**', dot: false } },
{ from: { glob: '**/*.jpg', dot: false } },
{ from: { glob: '**/*.png', dot: false } },
], copyIgnore),
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.
While using Vue.js 2.3.4 in development on Chrome 58.0.3029 I keep getting this error in developer tools console:
Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING
:8080/__webpack_hmr
Everything appears to be working OK, but after updating everything I still see this error and wondered if it's something I need to pay attention to.
Also, I want to clear out any unnecessary errors.
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat: 2000
})
Worked for me, and also this:
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000
})
and you must run again npm run dev command.
Thanks to #Jack Barham
Note: im using the PWA Template.
There's a pull request to fix this in the webpack template repo, but it hasn't been merged as of this writing.
I've implemented the fix from the PR in several projects and it seems to work fine.
In build/dev-server.js, add heartbeat: 2000 to the options object passed to require('webpack-dev-middleware') so it ends up looking like:
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat: 2000
})
Edit: it seems as though a newer identical PR was just accepted/merged.
using SeedStack 14.7 we are facing a cache issue when uploading a new version on servers: every user have to clear their cache to get the last version of files.
I tried to use "urlArgs": "version=2" in the requireConfig part of the fragment JSON file. It do the job by adding argument on every files and so we can use it when changing version, but it also affect the urls in the config of each modules !
As we are using this config to pass the REST base url to each module, it breaks all REST requests by adding the argument to the base url.
My fragment JSON file :
{
"id": "mac2-portail",
"modules": {
"gestionImage": {
"path": "{mac2-portail}/modules/gestionImage",
"autoload": true,
"config": {
"apiUrl": "muserver/rest"
}
}
},
"i18n": {...},
"routes": {...},
"requireConfig": {
"urlArgs": "version=2",
"shim": {...}
}
}
Any idea to solve the cache issue without breaking REST requests ?
EDIT : it is not a duplicate of Prevent RequireJS from Caching Required Scripts. Yes SeedStack uses RequireJS and this configuration solve the cache issue, but it also affect other modules defined in the fragment so I need to find another solution to prevent browser to cache files
The module configuration values, like apiUrl in your example, are not touched by RequireJS unless you call require.toUrl() on them explicitly. I think this is what is happening in your case. To avoid this problem, you should always do the concatenation first and only then call require.toUrl() on the full resulting URL.
So, instead of doing:
var fullUrl = require.toUrl(config.apiUrl) + '/my/resource';
Do this:
var fullUrl = require.toUrl(config.apiUrl + '/my/resource');
By the way, instead of setting the version directly in the RequireJS configuration, you can simply add the version of your application to the data-w20-app-version attribute on the <html> element of the master page:
<html data-w20-app data-w20-app-version="2.0.0">
This will provide the same behavior but will work correctly in the case of Angular templates in $templateCache. If your master page is automatically generated by the backend, this is done automatically. Check this page for the details.
I cannot seem to access a global variable in Ext.application after I do a production or test build with Cmd 4. This happens during the first application launch. I have read other similar threads but there is nothing new in there that can solve my problem for whatever reason.
Before I started using Cmd, I would run my application from a server against the application directory, and things ran just fine. I had no problems with my other files picking up the global variables.
Now that I have moved to Cmd 4 / ST2.3.1, the test and production builds get built into one big app.js file. So it seems that when code that is earlier in the js file calls a global variable, it cannot find it, with the console exception:
Uncaught TypeError: Cannot read property 'targetServer' of undefined
This happens during the first application launch, and the app just hangs. The loading indicators are not even removed. I noticed that the Ext.application code is at the end of the app.js. Could it be some code is launching before the application is fully loaded?
In my app.js, I have the following. This is last in my app.js at line 76623. The global variable not being read is "targetServer":
Ext.application({
name: 'qxtapp',
targetServer: 'http://192.168.1.70:8080'
...
});
One of my stores looks like this. This is where I get the exception. The below code is earlier in my app.js, at line 70742:
Ext.define('qxtapp.store.AccountsListStore', {
extend : Ext.data.Store ,
xtype : 'accountsListStore',
config: {
model: 'qxtapp.model.AccountsList',
data: [
{ accountName: qxtapp.app.targetServer+'/account_one' },
// ^ Causes exception- cannot read property "targetServer"
// of undefined
{ accountName: qxtapp.app.targetServer+'/account_two' },
...
]
}
})
Any idea what I'm missing here? Any help is greatly appreciated.
Thanks!
This is an order-of-operations error.
In development, your Ext.application() code (in app.js) is run first because any other classes (e.g. qxtapp.store.AccountsListStore) are loaded dynamically after the browser physically reads app.js.
But when you use Cmd to bundle your classes together, the resulting single JS file is read entirely at once by the browser. What happens is that the Ext.define() methods all run BEFORE Ext.application()... so qxtapp.app isn't yet assigned.
The easiest way to circumvent this problem is to use a true global variable, not just a property assigned to the global "app" object (in app.js):
var TARGET_SERVER = 'http://192.168.1.70:8080';
Ext.application({
//...
})
And in your other classes...
Ext.define('qxtapp.store.AccountsListStore', {
extend : Ext.data.Store ,
xtype : 'accountsListStore',
config: {
model: 'qxtapp.model.AccountsList',
data: [
{ accountName: TARGET_SERVER + '/account_one' }
//...
]
}
});