I am currently implementing a Part-of-speech-tagger in Kotlin and when building / running on JVM everything works just fine (the tagger tags things correct and the program is reasonable fast when it comes to tagging sentences). However when I exported the program to JS I get the following error message:
TypeError: tags.iterator is not a function. (In 'tags.iterator()', 'tags.iterator' is undefined)
Trigram — Trigram.kt:13
Globaler Code
evaluateWithScopeExtension
(anonyme Funktion)
_wrapCall
Things I tried:
1. I had this exact JS-Code within the HTML-File, then it worked but the performance was awful (took 2-3 seconds to tag one sentence, if I tag the same sentence via the JVM it takes like 0.2 seconds or less).
2. replaced for(word in tags)with for(word in tags.toList(), the iterator was still undefined
I am on macOS using Safari, the error occurs on chrome as well.
Thank you for your help!
Kotlin-Class producing errors
class Trigram (private val probabilities: Probabilities, tags: List<String>){
// Creating the list mit all possible tags
init {
val list = ArrayList<String>()
for(word in tags) { // This is where the error occurs
list.add(word)
}
}
JS-File that returns the testing-strings
function getTags() {
return ["NN", "$.", "$(" ... , "PPOSS"]
}
function getJsonString() {
return ... // Returns a valid JSONString
}
Test-HTML-File
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Part-of-speech-tagger</title>
<!-- Loading kotlin.js -->
<script src="../../../js/packages_imported/kotlin/1.3.72/kotlin.js" charset="utf-8"></script>
<!-- Loading kotlinx-serialization-kotlinx-serialization-runtime -->
<script src="../../../js/packages_imported/kotlinx-serialization-kotlinx-serialization-runtime/0.20.0/kotlinx-serialization-kotlinx-serialization-runtime.js" charset="utf-8"></script>
<!-- Loading the generated js file -->
<script src="../../../js/packages/postagger/kotlin/postagger.js" charset="utf-8"></script>
<!-- Loading the js file containing the strings -->
<script src="strings.js" charset="utf-8"></script>
</head>
<body>
<h1>This is a test html file to check for js support</h1>
</body>
</html>
build.gradle
plugins {
id 'java'
id 'org.jetbrains.kotlin.multiplatform' version '1.3.72'
id 'org.jetbrains.kotlin.plugin.serialization' version "1.3.70"
}
group 'my group'
version '1.0-SNAPSHOT'
repositories {
mavenCentral()
jcenter()
maven { url "https://kotlin.bintray.com/kotlinx" }
}
kotlin {
// JVM Target
jvm() {
withJava()
jvmJar {
manifest {
// Specify main-class
attributes(
'Class-Path': configurations.compile.collect { it.getName() }.join(' '),
'Main-Class': 'postagger.MainKt'
)
}
}
}
targets {
fromPreset(presets.js, 'js') {
nodejs {}
configure([compilations.main, compilations.test]) {
tasks.getByName(compileKotlinTaskName).kotlinOptions {
sourceMap = true
moduleKind = "umd"
metaInfo = true
}
}
}
}
sourceSets {
commonMain {
dependencies {
implementation kotlin('stdlib-common')
implementation "org.jetbrains.kotlinx:kotlinx-serialization-runtime-common:0.20.0"
}
}
commonTest {
dependencies {
implementation kotlin('test-common')
implementation kotlin('test-annotations-common')
}
}
jvmMain {
dependencies {
implementation kotlin('stdlib-jdk8')
implementation "org.jetbrains.kotlinx:kotlinx-serialization-runtime:0.20.0"
}
}
jvmTest {
dependencies {
implementation kotlin('test')
implementation kotlin('test-junit')
}
}
jsMain {
dependencies {
implementation(kotlin('stdlib-js'))
implementation "org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:0.20.0"
}
}
jsTest {
dependencies {
implementation kotlin('test-js')
}
}
}
}
In a similar (although not same) environment, I had the same problem: a correct kotlin file compiled to javascript code that would fail with
iterator is not a function.
The object missing the iterator method was deserialized from a Json string.
If this is the case for you, then making sure that all the below conditions hold:
build.gradle contains the serialization plugin
plugins {
...
id 'org.jetbrains.kotlin.plugin.serialization' version "1.3.70"
...
}
deserialization (json string to object) uses
kotlinx.serialization.json.Json(JsonConfiguration.Stable)
.parse<YourObject>(jsonString)
instead of kotlin.js.JSON.parse(jsonString) method.
Class YourObject has the #Serializable annotation
solved the problem for me.
Related
Hello !
I tried using import/exports for the first time, and I have this issue in my code :
The requested module '../Ajout/script.js' does not provide an export named 'flagMap'
I have these files Supprimer.js, containing at the first line :
import{flagMap, findUrl, createUrl,texteValide} from '../Ajout/script.js';
And in Ajout.js contained in another forlder in the parent folder:
var flagMap={/*really long map*/}
function findUrl(isoCode){/*long url finder*/}
function createUrl(svgUrl) {
return `https://upload.wikimedia.org/wikipedia/${svgUrl}`;
}
function texteValide(element){/*text validation for a form*/}
export{flagMap,findUrl,createUrl,texteValide};
/*
other non-exported functions
*/
There is the type="module" in my html when I'm importing the script, and my Ajout.js also contains other functions, maybe it's causing issues ?
Also : The issue is not only flagMap but every import, because it shows another file if I remove flagMap from the imports
This works fine for me:
<!-- index.html -->
<html>
<head> ... </head>
<body>
<script type="module" src="path/to/Supprimer.js"></script>
</body>
</html>
// Ajout.js
var flagMap = {
// ...
};
function findUrl(isoCode) {
// ...
}
function createUrl(svgUrl) {
// ...
}
function textValide(element) {
// ...
}
// Export functions and variables
export {
flagMap,
findUrl,
createUrl,
texteValide
};
// Supprimer.js
import { flagMap, findUrl } from "path/to/Ajouter.js";
console.log(flagMap); // Prints map
findUrl("EN"); // Can call function
I am trying to utilize grunt-wiredep to alter my source-code in a spring-boot project.
Using bower works as expected by pulling down the JS/CSS and the dependencies, and grunt-wiredep will update the sourcecode, but i need to surround the URL with #{URL_GOES_HERE} due to the way i utilize thymeleaf.
Is this possible? Does grunt-wiredep have a prefix/suffix option? (I have not found this so far).
Current output:
<!-- bower-js:start -->
<script src="bower_components\bootstrap-colorpicker\js\bootstrap-colorpicker.js">
</script>
<!-- bower-js:end -->
Desired output:
<!-- bower-js:start -->
<script src="#{\bower_components\bootstrap-colorpicker\js\bootstrap-colorpicker.js}">
</script>
<!-- bower-js:end -->
grunt-wiredep can utilize any configuration option provided by the original wiredep.
On the above link you can see that the output format can be configured too, the github readme gives an example of appending a random class to the script tag:
fileTypes: {
fileExtension: {
block: /match the beginning-to-end of a bower block in this type of file/,
detect: {
typeOfBowerFile: /match the way this type of file is included/
},
replace: {
typeOfBowerFile: '<format for this {{filePath}} to be injected>',
anotherTypeOfBowerFile: function (filePath) {
return '<script class="random-' + Math.random() + '" src="' + filePath + '"></script>';
}
}
}, //...
So for example, you can override the default HTML fileExtension config block like this:
html: {
block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"]([^'"]+)/gi
},
replace: {
js: '<script src="#{\\{{filePath}}}"></script>'
}
},
Hi i have been facing this issue for over a long time. I can able to found at the place,it is due to the ng-app in the html page. However i have the proper food module in js. What could the be the cause of this error? any idea? my code
INDEX.HTML
<!DOCTYPE html>
<html ng-app="food">
<head>
<title>Scratchpad</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--Twitter Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!--STYLES-->
<link rel="stylesheet" href="/styles/importer.css">
<!--STYLES END-->
</head>
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class = "container-fluid">
<div class = "navbar-header">
<a class = "navbar-brand" ui-sref = "scratchpad">FoodForShare</a>
</div>
</div>
</nav>
<p>SAMPLE PAGE</p>
<div class = "container">
<div ui-view></div>
</div>
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/bower_components/angular/angular.min.js"></script>
<script src="/js/bower_components/angular-route/angular-route.min.js"></script>
<script src="/js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/main.js"></script>
<script src="/js/routes.js"></script>
<script src="/js/service/crud.js"></script>
</body>
</html>
MAIN.JS
/**
* Defines module-scratchpadModule for the application
*#dependencies: ui-router , Angular - resource
*#states: 2 Parent states and 1 Child state
*#Controllers: Controllers for listing, viewing and adding a scratch
*#Factory Service: Notes for the angular resource
*
*
*
*
*/
var foodshareModule= angular.module('food',['ngRoute','ngResource']);
console.log("Main file getting included");
foodshareModule.controller("personController", function($scope) {
console.log($scope);
$scope.firstName = "John";
$scope.lastName = "Doe";
console.log($scope.firstName);
console.log($scope.lastName);
});
foodshareModule.controller('scratchListController', function($scope,$state,Notes){
console.log("working");
$scope.scratchpad =Food.query();
$scope.deleteScratch = function (scratch,flag) {
if(flag === 0) { //Checks if Bulk delete or single delete
if(confirm("You Clicked DELETE !! Are you sure ?")) {
scratch.$delete(function() { //Single delete
window.location.href = 'http://localhost:1337';
});
}
}
else { //Bulk delete
scratch.$delete(function() {
window.location.href = 'http://localhost:1337';
});
}
}
$scope.emptyScratchpad = function () {
var ask = false;
if (confirm ("You are about Empty Scratchpad. Sure ????")) {
ask = true;
}
if(ask === true) {
for (var i = 0; i < $scope.scratchpad.length; i++) {
$scope.deleteScratch($scope.scratchpad[i],1);
}
}
}
})
foodshareModule.factory('Food', function($resource) {
return $resource('http://localhost:1337/Food:id', { id: '#_id' }, {
update: {
method: 'PUT'
}
});
});
ERROR:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=food&p1=TypeError%…calhost%3A1337%2Fjs%2Fbower_components%2Fangular%2Fangular.min.js%3A17%3A1)
you have not included ngResource script file. ngResource doesnt come pre bundled with angular.js
<script src="path-to-js/angular-resource.min.js"></script>
I've got an Google Recaptcha it uses the Recaptcha.create. However for some reason the Recaptcha.create works locally but not on the server. Here is my html and js.
HTML
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<div id="recaptcha"></div>
<div id="fError">Waiting for input.</div>
<script src="/assets/js/upload-flash.js"></script>
And this is the upload-flash.js
var captchaused = false;
function showRecaptcha() {
Recaptcha.create("6LfHYvgSAAAAAJ9G7fNYW5vwQkxUZDNSFhweiOPp", "recaptcha", {
theme: "clean",
callback: Recaptcha.focus_response_field});
}
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
if(captchaused === false){
captchaused = true;
showRecaptcha();
} else {
Recaptcha.reload();
}
}
}
/*... and after this comes the uploading part. Removed it so that it doesn't become too long*/
Here are pictures
Local
Server
I made a mistake with the public and private keys I get from google and used the wrong ones. After changing the keys I used it started working perfectly again.
An interesting problem about dojo toolkit and javasacript.
I am using a visual studio to developing application
I have created a module as following and named its file as calc.js
djConfig.js
var pathRegex = new RegExp(/\/[^\/]+$/);
var locationPath = location.pathname.replace(pathRegex, '');
var dojoConfig = {
async: true,
packages: [
{
name: 'application',
location: locationPath + '/js/application'
}
};
calc.js
define(["dojo/_base/declare"], function(declare) {
return declare(null, {
Sum: function(x,y) {
return x + y;
}
}); })
Once created this file I references this file in index.html file as following,
index.html
<script type="text/javascript" src="/js/application/djConfig.js"></script>
<script type="text/javascript">
require(["application/calc"],
function(calc) {
var c = new calc();
console.log(c.Sum(1, 2));
}
);
</script>
This code is wirking at first.Calculating sum and writing in concole of browser.
But than I am changing something in calc.js (ex. return x+y-1;).
The browser is giving a script error.
If I change something in index.html page - for example type a whitespace- than script is working.
All changes in calc.js file is throwing script error, if I do not change somewhere in index.html
Even If I type a whitespace or add a line in index page, every thing is working.
Did you encounter a problem like this?