Aurelia CLI Build-In Bundler - tempusdominus-bootstrap-4 does not exist on type 'JQuery<HTMLElement>

Help Requests
1

I recently updated the Aurelia CLI to latest, and followed the docs on how to configure my aurelia.json file, but I get the following error when I try to use moment: error TS2304: Cannot find name 'moment'. and error TS2339: Property 'datetimepicker' does not exist on type 'JQuery<HTMLElement>'. when I try to use tempusdominus.

Here is how aurelia.json is configured:

"name": "MigrationPortal",
"type": "project:application",
"bundler": {
    "id": "cli",
    "displayName": "Aurelia-CLI"
},
"httpProtocol": {
    "id": "http1",
    "displayName": "HTTP/1.1"
},
"build": {
    "targets": [
        {
            "id": "aspnetcore",
            "displayName": "ASP.NET Core",
            "output": "wwwroot/scripts",
            "index": "wwwroot/index.html",
            "baseDir": "./wwwroot",
            "baseUrl": "scripts"
        }
    ],
    "options": {
        "minify": "ci-dev & stage & prod",
        "sourcemaps": "local & dev & ci-dev & stage",
        "rev": "ci-dev & stage & prod"
    },
    "bundles": [
        {
            "name": "app-bundle.js",
            "source": [
                "**/*.{js,json,css,html}"
            ]
        },
        {
            "name": "vendor-bundle.js",
            "prepend": [
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/moment/min/moment-with-locales.min.js",
                "node_modules/popper.js/dist/umd/popper.min.js",
                "node_modules/bootstrap/dist/js/bootstrap.min.js",
                "node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js",
                "node_modules/requirejs/require.js"
            ],
            "dependencies": [
                "aurelia-bootstrapper",
                "aurelia-loader-default",
                "aurelia-pal-browser",
                {
                    "name": "aurelia-testing",
                    "env": "dev"
                },
                "text"
            ]
        }
    ],
    "loader": {
        "type": "require",
        "configTarget": "vendor-bundle.js",
        "includeBundleMetadataInConfig": "auto",
        "plugins": [
            {
                "name": "text",
                "extensions": [
                    ".html", 
                    ".css"
                ],
                "stub": false
            }
        ]
    },
    "copyFiles": {
        "node_modules/simple-line-icons/fonts/Simple-Line-Icons.eot": "wwwroot/simple-line-icons/fonts",
        "node_modules/simple-line-icons/fonts/Simple-Line-Icons.svg": "wwwroot/simple-line-icons/fonts",
        "node_modules/simple-line-icons/fonts/Simple-Line-Icons.ttf": "wwwroot/simple-line-icons/fonts",
        "node_modules/simple-line-icons/fonts/Simple-Line-Icons.woff": "wwwroot/simple-line-icons/fonts",
        "node_modules/simple-line-icons/fonts/Simple-Line-Icons.woff2": "wwwroot/simple-line-icons/fonts",
        "node_modules/font-awesome/fonts/fontawesome-webfont.eot": "wwwroot/font-awesome/fonts",
        "node_modules/font-awesome/fonts/fontawesome-webfont.svg": "wwwroot/font-awesome/fonts",
        "node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "wwwroot/font-awesome/fonts",
        "node_modules/font-awesome/fonts/fontawesome-webfont.woff": "wwwroot/font-awesome/fonts",
        "node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "wwwroot/font-awesome/fonts",
        "node_modules/font-awesome/fonts/FontAwesome.otf": "wwwroot/font-awesome/fonts"
    }
},
"platform": {
    "id": "aspnetcore",
    "displayName": "ASP.NET Core",
    "output": "wwwroot/scripts",
    "index": "wwwroot/index.html",
    "baseDir": "./wwwroot",
    "baseUrl": "scripts"
},
"transpiler": {
    "id": "typescript",
    "displayName": "TypeScript",
    "fileExtension": ".ts",
    "dtsSource": [
        "./custom_typings/**/*.d.ts"
    ],
    "source": "src/**/*.ts"
},
"markupProcessor": {
    "id": "maximum",
    "displayName": "Maximum Minification",
    "fileExtension": ".html",
    "source": "src/**/*.html"
},
"cssProcessor": {
    "id": "sass",
    "displayName": "Sass",
    "fileExtension": ".scss",
    "source": "src/**/*.scss"
},
"editor": {
    "id": "vscode",
    "displayName": "Visual Studio Code"
},
"testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
},
"unitTestRunner": {
    "id": "karma",
    "displayName": "Karma",
    "source": "test/unit/**/*.ts"
},
"paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources/elements",
    "attributes": "resources/attributes",
    "valueConverters": "resources/value-converters",
    "bindingBehaviors": "resources/binding-behaviors"
}

Have I missed something in my configuration? Is Typescript causing an issue? I would appreciate any help or advice I can get on this.

1 Like
2

These issues should go away when you do

<reference type="jquery-datepicker" />
<reference type="moment" />

Note: name is for example, please have a check. The fix is to include the file manually in your main.ts or app.ts file?

3

I was having issues as well when I (incorrectly for my project) was trying to access moment.
I was also using toastr in the prepend and it was working fine. When I examined a bit deeper it turns out toastr.d.ts was exporting slightly different, and when I did a test changing moment to use the same export it worked fine.

old moment.d.ts

export = moment;

updated moment.d.ts

declare module "moment" {
    export = moment;
}

I ended up just creating a custom typing from the original moment one with that change, and added to my project.

Just FYI, since I didn’t need to use prepend I still wanted both toastr and moment to be globally available and added this to the top of my main.ts

import * as toastr from 'toastr';
window['toastr'] = toastr;
//quick fix for bootstrap overwriting toastr styles
toastr.options.toastClass = 'toastr';

import * as moment from 'moment';
window['moment'] = moment;
1 Like
4

Thank you for the response but unfortunately, I’m still running into the same issue.

5

Thank you, your suggestion helped with getting moment working. That suggestion will be really helpful with other .js libraries. However, I still run into the following error when trying to use tempusdominus: error TS2339: Property 'datetimepicker' does not exist on type 'JQuery<HTMLElement>'

I tried creating a new aurelia project from scratch and I’m seeing the same issue. I’m not sure where I’m making a mistake in my configuration. I have even tried to shim the library with a brand new project but to no avail. Could it be just a typescript issue? Any insight or direction would be really helpful.

6

I mean that is only a compile time error. Just cast to any and see if it works

(<any>jqueryElement).datetimepicker();

7

Thanks for the response, and I tried casting it but the method still isn’t available. I followed the docs in setting up a new app to see if there’s an issue with my configuration but I’m running into the same problem. I will try with other packages that use jquery to see if I can get it to work. Perhaps this particular datepicker just won’t work.