I am having an issue where I am trying to import an API, specifically the what3words API, in to my react native app. The problem is that every time I try to import the module, I receive the error 'Unknown named module'
I have managed to pinpoint the issue. When i go in to the node_modules folder, and go to the what3words/api folder and comment out all the 'requires', the error goes away, but then I am unable to use the api.
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "./constants", "./requests/autosuggest", "./requests/autosuggest-selection", "./requests/available-languages", "./requests/convert-to-3wa", "./requests/convert-to-coordinates", "./requests/grid-section", "./utils"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.valid3wa = exports.getWords = exports.getOptions = exports.setOptions = exports.gridSectionGeoJson = exports.gridSection = exports.convertToCoordinatesGeoJson = exports.convertToCoordinates = exports.convertTo3waGeoJson = exports.convertTo3wa = exports.availableLanguages = exports.autosuggestSelection = exports.autosuggest = exports.W3W_REGEX = void 0;
var constants_1 = require("./constants");
Object.defineProperty(exports, "W3W_REGEX", { enumerable: true, get: function () { return constants_1.W3W_REGEX; } });
// var autosuggest_1 = require("./requests/autosuggest");
Object.defineProperty(exports, "autosuggest", { enumerable: true, get: function () { return autosuggest_1.autosuggest; } });
// var autosuggest_selection_1 = require("./requests/autosuggest-selection");
Object.defineProperty(exports, "autosuggestSelection", { enumerable: true, get: function () { return autosuggest_selection_1.autosuggestSelection; } });
// var available_languages_1 = require("./requests/available-languages");
Object.defineProperty(exports, "availableLanguages", { enumerable: true, get: function () { return available_languages_1.availableLanguages; } });
// var convert_to_3wa_1 = require("./requests/convert-to-3wa");
Object.defineProperty(exports, "convertTo3wa", { enumerable: true, get: function () { return convert_to_3wa_1.convertTo3wa; } });
Object.defineProperty(exports, "convertTo3waGeoJson", { enumerable: true, get: function () { return convert_to_3wa_1.convertTo3waGeoJson; } });
// var convert_to_coordinates_1 = require("./requests/convert-to-coordinates");
Object.defineProperty(exports, "convertToCoordinates", { enumerable: true, get: function () { return convert_to_coordinates_1.convertToCoordinates; } });
Object.defineProperty(exports, "convertToCoordinatesGeoJson", { enumerable: true, get: function () { return convert_to_coordinates_1.convertToCoordinatesGeoJson; } });
// var grid_section_1 = require("./requests/grid-section");
Object.defineProperty(exports, "gridSection", { enumerable: true, get: function () { return grid_section_1.gridSection; } });
Object.defineProperty(exports, "gridSectionGeoJson", { enumerable: true, get: function () { return grid_section_1.gridSectionGeoJson; } });
// var utils_1 = require("../es2015/utils.js");
Object.defineProperty(exports, "setOptions", { enumerable: true, get: function () { return utils_1.setOptions; } });
Object.defineProperty(exports, "getOptions", { enumerable: true, get: function () { return utils_1.getOptions; } });
Object.defineProperty(exports, "getWords", { enumerable: true, get: function () { return utils_1.getWords; } });
Object.defineProperty(exports, "valid3wa", { enumerable: true, get: function () { return utils_1.valid3wa; } });
});
After searching online, it appears that this issue is to do with metro and the require function. Please help, Thanks
Managed to fix it!! With some help from one of the contributors of the what3words api. It seems that this is an issue with metro not being able to bundle umd modules. Luckily, the what3words api has es2015 module which we can use instead, so i just used
const api = require('#what3words/api/es2015');
Instead of the previous
const api = require('#what3words/api');
Check https://github.com/what3words/w3w-node-wrapper/issues/28 for the full debugging
Related
I am testing if a function works,
The function doesn't return anything but infact changes the data in the component
This is the test I am trying to write
describe('ModalAddCollectionCSV', () => {
it('Test load csv function', () => {
const localVue = createLocalVue()
const wrapper = shallowMount(AddCSV, {
localVue,
propsData: {
visible: true,
},
})
var fileDict = [{ file: new Blob([wrongDateFormat]) }]
wrapper.vm.loadcsv(fileDict)
expect(wrapper.html()).toContain('error')
})
})
I am expecting some changes to the data of the component
data() {
return {
collections: [],
inlineVisibility: false,
inlineTitle: '',
inlineSubtitle: '',
inlineKind: 'info',
loading: false,
}
},
This is the function I am testing in unit test, as you see it doesn't return anything just changes the data at the end of it
async loadcsv(element) {
const reader = new FileReader()
const file = element[0].file
this.toggleLoading()
reader.onload = async (e) => {
try {
//Normalising headers
const results = e.target.result
let resultSplit = results.split('\n')
const header = resultSplit[0]
.toLowerCase()
.replace(/[^a-zA-Z,]/g, '')
.trim()
resultSplit[0] = header
let table = resultSplit.join('\n')
const rows = await d3.csvParse(table)
await Promise.all(
rows.map(async (row) => {
if (!(this.getSerial(row).length == 9)) {
if (!this.getName(row)) {
throw `Please enter Person of interest`
}
if (!row.country) {
throw `Country for ${this.getName(
row,
)} is empty`
}
}
)
this.inlineVisibility = false
this.$emit('rowEmit', {
collections: this.row,
})
this.toggleLoading()
this.collections = []
this.$refs.modal.hide()
} catch (err) {
this.collections = []
this.inlineNotification('error', 'Unable to process CSV', `${err}.`)
}
}
reader.readAsText(file)
},
Is there a way to check emit action or error action?
I tried wrapper.text()
Wrapper.html()
but no difference
turns out this error please help where the problem
** Uncaught (in promise) DOMException: Error processing ICE candidate **
here is the source code of the call
ConOut.getStartScreenSharing => ConIn.socket.on('OnMessage') => onOffer()
there the getStartScreenSharing function is called
did everything according to the example
using Chrome 68.0.3440.106 browser
import Vue from "vue";
export default class ConOut {
constructor() {
let t = this;
t.pc = new RTCPeerConnection();
this.socket = Vue.prototype.$signalR;
this.socket.on('OnMessage', (chName, message) => {
var desc = JSON.parse(message);
if (desc.type === 'candidate') {
t.pc.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex: desc.label,
candidate: desc.candidate
}))
}
if (desc.type == 'answer') {
t.pc.setRemoteDescription(desc);
}
});
this.socket.start().then(function () {});
}
send = function (message) {
this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
}
getStartScreenSharing() {
let t = this;
navigator.getUserMedia({
audio: false,
video: true
}, function (stream) {
t.pc.addStream(stream);
t.pc.createOffer().then(function (ff) {
t.pc.setLocalDescription(ff);
t.send({
type: "offer",
offer: ff
});
});
t.pc.onicecandidate = function (event) {
if (event.candidate) {
t.send({
type: 'candidate',
label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
candidate: event.candidate.candidate
})
};
t.pc.onaddstream = function (s) {
t.CreateVideoTag(s)
}
};
})
}
};
here we wait for the Offer and answer
import Vue from "vue";
export default class ConIn {
constructor() {
let t = this;
t.pc = new RTCPeerConnection();
this.socket = Vue.prototype.$signalR;
this.socket.on('OnMessage', (chName, message) => {
var desc = JSON.parse(message);
if (desc.type === 'candidate') {
console.log(desc)
t.pc.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex: desc.label,
candidate: desc.candidate
}))
} else {
t.onOffer(desc.offer)
}
});
this.socket.start().then(function () {});
}
send = function (message) {
this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
}
onOffer(offer) {
let t = this;
navigator.getUserMedia({
audio: false,
video: true
}, function (stream) {
t.pc.addStream(stream);
t.pc.setRemoteDescription(new RTCSessionDescription(offer), function () {
t.pc.createAnswer(function (answer) {
t.pc.setLocalDescription(answer);
t.send(answer)
});
});
t.pc.onicecandidate = function (event) {
if (event.candidate) {
t.send({
type: 'candidate',
label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
candidate: event.candidate.candidate
})
}
t.pc.onaddstream = function (s) {
t.CreateVideoTag(s)
}
};
})
}
};
here is the code that works without errors
ConOut.js
import Vue from "vue";
export default class ConOut {
constructor() {
let t = this;
t.pc = new RTCPeerConnection();
t.pc.onicecandidate = function (event) {
if (event.candidate) {
t.send({
type: 'candidate',
candidate: event.candidate
})
};
};
t.pc.onaddstream = function (s) {
console.log('onaddstream')
t.createVideoTag(s)
}
this.socket = Vue.prototype.$signalR;
this.socket.on('OnMessage', (chName, message) => {
var desc = JSON.parse(message);
if (desc.type === 'candidate') {
t.pc.addIceCandidate(new RTCIceCandidate(desc.candidate))
}
if (desc.type == 'answer') {
t.pc.setRemoteDescription(new RTCSessionDescription(desc), function () {
console.log('Setting remote description by answer');
}, function (e) {
console.error(e);
});
}
});
this.socket.start().then(function () {
console.info('SignalR connection is opened.');
});
}
send = function (message) {
this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
}
getStartScreenSharing() {
let t = this;
navigator.getUserMedia({
audio: false,
video: true
}, function (stream) {
t.pc.addStream(stream);
t.pc.createOffer().then(function (ff) {
t.pc.setLocalDescription(ff);
t.send({
type: "offer",
offer: ff
});
});
})
}
createVideoTag = function (s, isRemote = false) {
let videoContener = document.getElementById('videoContener');
let x = document.createElement("VIDEO");
x.setAttribute("width", "320");
x.setAttribute("height", "240");
x.srcObject = s.stream;
x.controls = true
x.playsinline = true
x.autoplay = true
videoContener.appendChild(x);
return x;
}
};
ConIn.js
import Vue from "vue";
export default class ConIn {
constructor() {
let t = this;
t.ic = [];
t.isSetRD = false
t.pc = new RTCPeerConnection();
t.pc.onicecandidate = function (event) {
if (event.candidate) {
t.send({
type: 'candidate',
candidate: event.candidate
})
};
};
t.pc.onaddstream = function (s) {
console.log('onaddstream')
t.createVideoTag(s)
}
this.socket = Vue.prototype.$signalR;
this.socket.on('OnMessage', (chName, message) => {
var desc = JSON.parse(message);
console.log(desc)
if (desc.type === 'candidate') {
setTimeout(function () {
t.pc.addIceCandidate(new RTCIceCandidate(desc.candidate))
}, 5000);
} else {
t.onOffer(desc.offer)
}
});
this.socket.start().then(function () {
if (t.enableLogs) {
console.info('SignalR connection is opened.');
}
});
}
send = function (message) {
this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
}
onOffer(offer) {
let t = this;
navigator.getUserMedia({
audio: false,
video: true
}, function (stream) {
t.pc.addStream(stream);
t.pc.setRemoteDescription(new RTCSessionDescription(offer))
.then(() => t.pc.createAnswer())
.then(answer => {
t.pc.setLocalDescription(answer)
t.send(answer)
})
.catch(e => console.error(e));
})
}
createVideoTag = function (s, isRemote = false) {
let videoContener = document.getElementById('videoContener');
let x = document.createElement("VIDEO");
x.setAttribute("width", "320");
x.setAttribute("height", "240");
x.srcObject = s.stream;
x.controls = true
x.playsinline = true
x.autoplay = true
videoContener.appendChild(x);
return x;
}
};
I'm trying to call a method from another method and for this I've used this. But my console is causing me an error.
How to call a method inside another method in Vuejs?
code
methods: {
searchLocations: function() {
var address = this.search
var geocoder = new window.google.maps.Geocoder()
geocoder.geocode({
address: address
}, function(results, status) {
if (status === window.google.maps.GeocoderStatus.OK) {
this.buscarLojas(results[0].geometry.location)
}
})
},
buscarLojas: function(center) {
console.log(center)
}
}
console:
this.buscarLojas is not a function
You have an anonymous call back function that overwrites this keyword, you can either assign this to another variable ref before using it in your anonymous function:
methods: {
searchLocations: function () {
var address = this.search
var geocoder = new window.google.maps.Geocoder()
var ref = this
// ^^^^^^^^^^^^^^
geocoder.geocode({address: address}, function (results, status) {
if (status === window.google.maps.GeocoderStatus.OK) {
ref.buscarLojas(results[0].geometry.location)
//^^^
} else {
alert(address + ' not found')
}
})
},
buscarLojas: function (center) {
console.log(center)
}
}
Or use an arrow function:
methods: {
searchLocations: function () {
var address = this.search
var geocoder = new window.google.maps.Geocoder()
geocoder.geocode({address: address}, (results, status) => {
// ^^
if (status === window.google.maps.GeocoderStatus.OK) {
this.buscarLojas(results[0].geometry.location)
} else {
alert(address + ' not found')
}
})
},
buscarLojas: function (center) {
console.log(center)
}
}
Use arrow function for callback
geocoder.geocode({address: address}, (results, status) => {
if (status === window.google.maps.GeocoderStatus.OK) {
this.buscarLojas(results[0].geometry.location)
}
})
I know there is an answer here already, but this can also be a convenient alternative
methods: {
var self = this; //this line will take control of **this** which can be use later
searchLocations: function() {
var address = self.search
var geocoder = new window.google.maps.Geocoder()
geocoder.geocode({
address: address
}, function(results, status) {
if (status === window.google.maps.GeocoderStatus.OK) {
self.buscarLojas(results[0].geometry.location)
}
})
},
buscarLojas: function(center) {
console.log(center)
}
}
How can I make this
// ...
gulp.watch(source.app, gulp.series(
lint(source.app),
transpile(source.app),
ATDD,
));
To keep watching even if error occurred from linter or transpiler?
My task function looks like this:
// ...
function lintWorker(source) {
return gulp.src(source)
.pipe(tslint({
configuration: "tslint.json",
options : {
formatter: "prose"
}
}))
.pipe(tslint.report(stylish, {
emitError: false,
sort: true,
bell: true
}));
};
export function lint(source) {
let fn = () => {
return lintWorker(source);
};
fn.displayName = ["linting", ...source].join(" ");
return fn;
};
I found the simple way how to do it.
gulp.watch(source.app, (done) => {
gulp.series(
lint(source.app),
transpile(source.app),
ATDD,
)((err) => {
if (err) {
console.error("error", err);
}
done();
});
});
I can not add new action in Odoo9
openerp.pr_finance = function(instance, local) {
var _t = instance.web._t, _lt = instance.web._lt;
var QWeb = instance.web.qweb;
var Widget = instance.web.Widget;
var core = instance.web.core;
var data = instance.web.data;
var session = instance.web.session;
var utils = instance.web.utils;
var Model = instance.web.Model;
var ControlPanelMixin = instance.web.ControlPanelMixin;
instance.web.ListView.include({
init: function() {
//console.log('JS loaded');
this._super.apply(this, arguments);
},
render_buttons: function(data) {
console.log('JS loaded load_list');
console.log(data);
this._super(data);
if (this.$buttons) {
this.$buttons.find('.oe_my_button').click(this.proxy('do_import_file_csv_ya_tz')) ;
}
},
do_import_file_csv_ya_tz: function () {
console.log('123123123123123123 ooops....');
this.do_action(
{
name: _t("IMPORT MY FILE"),
type: "ir.actions.client",
tag: 'import_csv',
params: {}
}
);
}
});
var import_csv_yandex = Widget.extend({
template: 'ImportViewYaTC',
start: function () {
console.log("ImportViewYandexTC page loaded");
},
});
var DataImport = Widget.extend(ControlPanelMixin, {
template: 'ImportView',
init: function(parent, action) {
console.log("init ImportView");
this._super.apply(this, arguments);
action.display_name = _t('Import a File');
},
start: function () {
console.log("ImportView page loaded");
},
});
console.log("core.action_registry.add");
try {
instance.web.core.action_registry.add('import_csv', DataImport);
} catch (err) {
console.log(err);
}
console.log("core.action_registry.add - OK!");
}
I received error here:
instance.web.core.action_registry.add('import_csv', DataImport);
Error:
TypeError: instance.web.core is undefined Stack trace:
openerp.pr_finance#http//localhost:8069/web/content/2798-e13ba1c/web.assets_backend.js:4579:1276
start_modules#http//localhost:8069/web/content/2798-e13ba1c/web.assets_backend.js:3235:1
.init#http//localhost:8069/web/content/2798-e13ba1c/web.assets_backend.js:3229:3951
OdooClass.extend/Class.include/
Why this variable is undefined?
You need to use require to get the variables of the env: ie.
odoo.define('yourmodulename.pr_finance', function (require) {
"use strict";
var core = require('web.core');
});
a good place to look at to understand inheritance in odoo is the github.com/oca/web repo.