gulp-durandal TypeError: req.toUrl is not a function - durandal

I try to implement gulp to my durandal project as explain on Durandal gulp doc
main.js file is successfully build, but when trying to click something that will open a modal dialog, it will show this error (firefox):
TypeError: req.toUrl is not a function
url = req.toUrl(nonStripName),
main.js (line 48306, col 16)
here my configuration on gulpfile.js
var gulp = require('gulp');
var durandal = require('gulp-durandal');
gulp.task('default', function(cb)
{
durandal({
baseDir: 'public_html/app',
main: 'main.js',
output: 'main.js',
almond: true,
minify: false
})
.on('error', function(err) {
console.error('error. ' + err);
})
.pipe(gulp.dest('public_html/build'))
.on('end', cb);
});
I'm also came across with this answer https://stackoverflow.com/a/23329383/1889014
But i'm not sure if this is related to my issue.
Can someone please help or guide me through this ? Thanks!

I also had this issue using gulp, Durandal and modal dialogs. Adding a getView function to the viewmodel that returns the url for the view fixes it.
eg
function getView() {
return "views/theView.html";
}
I am sure there must be a better way of solving this problem but this seems to work in the few places I have needed it.

I have experienced this error due to writing the view name using the wrong case. E.g. if the file is called myView.html but you require 'MyView'.

I am not building using gulp-durandal because it's giving very odd errors, and requirejs is working much better directly. I fixed this error by including all views manually in my requirejs build config.
include: [
'text!customWidgets/alertsSection/title.html', //custom
'text!customWidgets/alertsSection/body.html', //custom
'text!customWidgets/exclusions/body.html', //custom
'text!customWidgets/exclusions/title.html', //custom
'text!customWidgets/submit/body.html', //custom
'text!customWidgets/submit/title.html', //custom
]
There are many more files in my include due to the nature of durandal and the dynamic loading of views... but I don't want to spam everyone :)

Related

Local docusaurus plugins in typescript

I want to write local docusaurus plugins using typescript. (it works fine using js)
Is this possible? Like the docs here suggest to put them under ./src/plugins/name-of-plugin.
Reading the docs there are examples with ts, but if I just try and replace is with ts i get various errors. (eg "Cannot find module").
I'm using typescript for pages as well.
Adding the file extension worked for me.
For example:
plugins: ['./src/plugins/my-plugin.ts'],
my-plugin.ts
module.exports = async function myPlugin(context, options) {
return {
name: "my-plugin",
async loadContent() {
console.log("Hello World plugin wow!");
},
async contentLoaded({ content, actions }) {
console.log(content);
},
};
};
removing the extension shows the same error :)

Is it possible to use DayJs in ant design Vue (antdv) in DatePickers instead of MomentJs?

I tryed to replace momentjs in project on antdv, and find this advice:
"We also provide another implementation, which we provide with
antd-dayjs-webpack-plugin, replacing momentjs with Day.js directly
without changing a line of existing code. More info can be found at
antd-dayjs-webpack-plugin."
https://2x.antdv.com/docs/vue/faq
So then i tryed to do same steps like in instruction https://github.com/ant-design/antd-dayjs-webpack-plugin. But i just changed webpack-config.js on vue-config.js and in code:
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = {
plugins: [
new AntdDayjsWebpackPlugin()
]
}
// on
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = {
configureWebpack: (config) => {
config.plugins.push(
new AntdDayjsWebpackPlugin(),
);
}
}
But then i got mistake 502 Bad Gateway.
If i deleted configureWebpack mistake was still there. And then i deleted require and mistake was gone.
Also i found what in page with this plugin there was word about React but not about Vue.
So i had few questions:
Is it possible to use DayJs in antdv DatePickers? With plugins or any ways.
Is it mistake in FAQ? How i can tall about this issue (if it is)? I didnt found any method to communicate with them.

How debug Vue3 applications with chrome and native javascript debugger

i started a new application with vue3 (created with vue-cli) and I'm not able to exploit native debugger in chrome
I have read that I had to specify the source map in my vue.config.js
module.exports = {
pluginOptions: {
quasar: {
importStrategy: 'kebab',
rtlSupport: false
}
},
configureWebpack: {
devtool: 'source-map'
},
transpileDependencies: [
'quasar'
]
}
But I'm still not able to explore my component code with a debugger
the result I have
screenshot not working
and what i want (screen from a vue2 project)
screenshot working
To use the native js debugger in a vue 2 application. You can do something like this:
methods: {
doSomething () {
this.loading = true
// doing something
debugger // native js debugger, in console check => this.loading (= true)
this.loading = false
}
}
Hopefully, it works the same way in vue 3.
You may be tempted to use it in the life-cycle hooks such as mounted, created ... but unfortunately, that never worked for me. Once the debugger halts the program, you can test it in the console by seeing what kind of object this identifies as.
When the native js debugger is used in a method enclosed by the methods option, it acts in a helpful and expected way. However, when it is used in a lifecycle hook like created the this object is not what you would expect it to be.
Additionals:
I actually stumbled on this question because I was looking for ways to use the native js debugger in the life cycle hooks. I'm hoping there might be vue 2 life-cycle hooks that support it.

I'm trying to use react-call-detection to detect a missed call number but something is not working

Hey there to everyone!
I'm posting my first question so I'll try to be as clear as possible!
I'm building a native android app using react-native(0.61.5), I'm using setState hook instead of the classic state and I want to use the react-native-call-detection library(1.8.2).
What is the problem?
function startListenerTapped() {
console.log('start');
callDetector = new CallDetectorManager((event, number) => {
console.log(event);
console.log('inside call detector');
if (event === 'Missed') {
console.log(event);
console.log(number);
setMissedCaller(number);
}
},
true,
() => { console.error('access denied') },
{
title: 'Phone State Permission',
message: 'This app needs access to your phone state in order to react and/or to adapt to incoming calls.'
}
)
}
I run this function when my component mounts, callDetector is set as undefined, I get the 'start' log but when I simulate a call on my AVD nothing happens.
From what I understood the CallDetectorManager works like an event listener, right?
Or do I need to start it every time a call happens?
Another thing I've had a problem with was when I was trying to run a build for the app. I have Gradle 6.0 and I had an error with the react-native-call-detection:
Attribute application#allowBackup value=(false) from AndroidManifest.xml:13:7-34
is also present at [:react-native-call-detection] AndroidManifest.xml:21:9-35 value=(true).
Suggestion: add 'tools:replace="android:allowBackup"' to <application> element at
AndroidManifest.xml:7:5-117 to override.
I couldn't really understand what this meant, and the only thing that I've found that solved it was to create a react-native.config.js file with this line of code in it:
module.exports = { dependencies: { 'react-native-call-detection': { platforms: { android: null, }, }, }, };
Another thing that I've only noticed now is that I have a problem with the module of the library.
Could not find a declaration file for module 'react-native-call-detection'.
'c:/folders/projectName/node_modules/react-native-call-detection/index.js' implicitly has an 'any' type.
Try `npm install #types/react-native-call-detection` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-call-detection';`
Does anybody knows what that means?!
I think I start to think that it means that I need to find an alternative to this library... AHAHA!
Any kind of help or solution would be more than welcome!
Thanks in advance for everything!

Ember.JS : 'serializer.get is not a function'

So i'm learning EMBER JS from codeschool and i sometime like to save my current progress into my computer. Everything went nice and smoothly until we started to see Array Controller ( and by nice and smoothly i mean everything was working fine, as it does on codeschool ). Since then i got this error :
Error while processing route: index serializer.get is not a function TypeError: serializer.get is not a function
at ember$data$lib$system$store$serializer$response$$normalizeResponseHelper (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember-data.js:5696:24)
at http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember-data.js:7450:31
at Object.Backburner.run (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:222:25)
at ember$data$lib$system$store$$Service.extend._adapterRun (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember-data.js:13030:37)
at http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember-data.js:7449:19
at tryCatch (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:54770:14)
at invokeCallback (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:54785:15)
at publish (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:54753:9)
at http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:31568:7
at Queue.invoke (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:901:16)
So i thought, somehow, my ember.js or ember-data.js was the culprit but nay, it's not ( im up-to-date ). I think the bug is somewhere located in the way i initialize my Route ( eventho i copy/pasted the content of my local files from those on codeschool who works perfectly ) and according to the error message, i think the index route is responsible so here is my router map :
App.Router.map(function() {
this.route('credits', { path: '/thanks' });
this.resource('products', function() {
this.resource('product', { path: '/:product_id' });
});
this.resource('contacts', function() {
this.resource('contact', { path: '/:contact_id' });
});
});
And here's my route ( they're all made like this one, except that i sometime search in 'contact' rather than 'product' )
App.IndexRoute = Ember.Route.extend({
model: function(){
return this.store.findAll('product');
}
});
We also use the fixture adapter so it might come from this too :
App.ApplicationAdapter = DS.FixtureAdapter.extend({});
Does anybody ever got this bug about the serializer ? Thank you'all in advance !
I believe this is due to the removal of the Fixture Adapter in a recent ember-data release. I'm just learning ember myself, but I was finally able to get rid of this error using a combination of reverting to a slightly older ember-data version and installing the replacement Fixture Adapter addon.
In your application dir, update the ember-data line in both bower.json and package.json to:
"ember-data": "1.0.0-beta.19.2",
and in package.json add this line after the ember-data one:
"ember-data-fixture-adapter": "^1.0.0",
Delete the bower_components and node_modules dirs in your application, and then run npm install and bower install from your application's home dir.