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

**URL:** <https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285>\
**Category:** Help Requests\
**Created:** [February 15, 2019, 8:10pm UTC](https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285 "2019-02-15T20:10:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![newjackscity](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/newjackscity/32/1346_2.png) [@newjackscity](https://discourse.aurelia.io/u/newjackscity)\
**Post date:** [February 15, 2019, 8:10pm UTC](https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285/1 "2019-02-15T20:10:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 15, 2019, 10:21pm UTC](https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285/2 "2019-02-15T22:21:23Z")

</div>

These issues should go away when you do

```auto
<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?

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [February 15, 2019, 11:50pm UTC](https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285/3 "2019-02-15T23:50:15Z")

</div>

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

```auto
export = moment;

```

updated moment.d.ts

```auto
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

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![newjackscity](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/newjackscity/32/1346_2.png) [@newjackscity](https://discourse.aurelia.io/u/newjackscity)\
**Post date:** [February 18, 2019, 5:31pm UTC](https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285/4 "2019-02-18T17:31:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![newjackscity](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/newjackscity/32/1346_2.png) [@newjackscity](https://discourse.aurelia.io/u/newjackscity)\
**Post date:** [February 18, 2019, 5:41pm UTC](https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285/5 "2019-02-18T17:41:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [February 18, 2019, 8:32pm UTC](https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285/6 "2019-02-18T20:32:38Z")

</div>

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

`(<any>jqueryElement).datetimepicker();`

---

<div class="post-metadata">

**Author:** ![newjackscity](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/newjackscity/32/1346_2.png) [@newjackscity](https://discourse.aurelia.io/u/newjackscity)\
**Post date:** [February 20, 2019, 5:43pm UTC](https://discourse.aurelia.io/t/aurelia-cli-build-in-bundler-tempusdominus-bootstrap-4-does-not-exist-on-type-jquery-htmlelement/2285/7 "2019-02-20T17:43:13Z")

</div>

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.