this.domElm.datetimepicker is not a function

[NickSchweitzer]

My setup is not purely based on any of the installation instructions you have listed. I am using the dotnet new functionality to create a SPA Service outlined here: https://github.com/aspnet/JavaScriptServices/tree/dev/templates/AureliaSpa

When I attempt to use the datetime picker, I am running into the following issue when I try to view my model...

Uncaught (in promise) TypeError: this.domElm.datetimepicker is not a function at AbpDatetimePickerCustomElement.attached (abp-datetime-picker.js:117) at Controller.attached (vendor.js?v=esL2WJsKh4sgXJd2rb6lXD3qsUqDdkbOwsEe6XzMrE4:3657) at View.attached (vendor.js?v=esL2WJsKh4sgXJd2rb6lXD3qsUqDdkbOwsEe6XzMrE4:1722) at ViewSlot.add (vendor.js?v=esL2WJsKh4sgXJd2rb6lXD3qsUqDdkbOwsEe6XzMrE4:1885) at vendor.js?v=esL2WJsKh4sgXJd2rb6lXD3qsUqDdkbOwsEe6XzMrE4:25833 at

Any ideas what I'm missing?

[ghiscoding]

Sorry was in vacations for the past few weeks. Have you managed to find the issue? PR are welcome if you can spot the error, else I might need a sample to work with. Thanks

[ghiscoding]

Can you make a Github or a Plunker with instructions that I could follow to have the same setup as you? We are using .Net at work (not yet the new ASP Core) and I would like to push for the use of Aurelia at work with .Net Core, so I would also be interested in having a functional project if you have something already, that would be great.

[NickSchweitzer]

Take a look at my Sump Pump Project where I'm trying to use this. I've declared the date time picker in this html template https://github.com/NickSchweitzer/SumpPumpMonitor/blob/master/Portal/ClientApp/app/components/pump/pumpdetail.html

Maybe you can see what I'm doing wrong in the webpack configuration, or somewhere else in the same project.

Thanks!

[ghiscoding]

Hello, trying to help you find the error and looking at the error displaying on your original issue and the error of

Uncaught (in promise) TypeError: this.domElm.datetimepicker is not a function
at AbpDatetimePickerCustomElement.attached (abp-datetime-picker.js:117)

even though this is the minified version of the code, I can assume that it is referring to my code with this.domElm.datetimepicker(this.options); and this might be because you didn't import jQuery correctly as mentioned in the Aurelia-Datetimepicker README - Webpack configuration. You really to follow this jQuery config for it to work, did you do that? I think that you didn't since I don't seem to see it in your Webpack config, it won't work without it.

[NickSchweitzer]

I thought I did in the "vendor" webpack as can be seen here. Is this not sufficient? https://github.com/NickSchweitzer/SumpPumpMonitor/blob/master/Portal/webpack.config.vendor.js

[ghiscoding]

Ah ok, I'm not sure which webpack config is used in your project but anyhow it seems that you got most of it, except the last piece of resolve which goes right after new ProvidePlugin( ),

+  resolve: {
+     alias: {
+         // Force all modules to use the same jquery version.
+         'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
+     }
+  }

The comment does that say that it forces all modules to use same jQuery version, so it might help. I remember having issue with this.domElm.datetimepicker is not a function when the jQuery wasn't correctly imported at the beginning. So in your case, I would focus in making sure it's correctly configured in your webpack config.

[NickSchweitzer]

So... I already do have that section in the file, its just higher up. I have it near the top of module.exports on line 10. It shouldn't matter which section goes first should it?

[ghiscoding]

Ah ok I didn't see that. I'm not an expert with WebPack but if it's in sequence, wouldn't you need createPlugin before using it with later as an alias? I mean, if it's in sequence, then having it coded earlier might not use the same jquery at all. I could be wrong though...

Also there's couple things I don't understand in your config, how come you don't even need to do a require of the ProvidePlugin? The first one you use it like new webpack.ProvidePlugin which might work coming from webpack but your second one is without it new ProvidePlugin, when I was developing it, this was failing saying that ProvidePlugin is undefined or something, so how come yours isn't failing? In my case, I had to require them like this

+ const ProvidePlugin = require('webpack/lib/ProvidePlugin')
+ const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')

so that I could use ProvidePlugin afterward. In your case, this one new webpack.ProvidePlugin might work, but I would argue that the second one is suppose to fail and throw an error (unless I'm missing something).

I'm actually wondering if you are using the correct webpack config, you might be using the wrong one without knowing it, which could explain why it doesn't throw any errors that I'm expecting to see.

If you could make sure that you use the correct webpack config and make it as close as possible to my sample webpack config, that might help. Because I don't know what else could give you the error you created the issue with.

[NickSchweitzer]

I'm definitely not a webpack expert... the setup was part of a default setup that is part of the .NET new SPA templates I referenced in my original issue report. I guess I'll have to tinker some more to try to figure it out. None of the exceptions that you talk about are appearing in my output logs.

[ghiscoding]

This might help you, I just pushed a new client sample for ASP.Net Core - WebPack (typescript), this one is based on the all new jods template rebase. This template doesn't use @easy-webpack while the other sample that I have client-wp is based on the old skeleton with that @easy-webpack.

So in both of my WebPack samples, all plugins are working fine. I can only assume that the issue is really in your config somewhere (I would still bet that it's in your webpack.config).

Hope that helps somehow.

[ghiscoding]

Did you figure out the issue or you're still having problems with it? Have you had a chance to look at the ASP.Net Core - WebPack (typescript) that I recently added?

[ghiscoding]

Closing for no feedback and also because I believe it is a user configuration issue which is not related to the plugin itself.