TypeError: this.elem.datetimepicker is not a function

[fagubla]

I'm submitting a ... (check one with "x")

[ X] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• eonasdan-bootstrap-datetimepicker version : 4.17.47
• Vue.js version : 2.4.4
• Browser name and version : Chrome|Firefox
• This package version : 3.1.2

Current behavior Adding it as a component (inside a component file) and it doesn't work. An empty input box shows up, but that's it. Here's the exception I see on the console:

vue.esm.js?65d7:476 [Vue warn]: Error in mounted hook: "TypeError: this.elem.datetimepicker is not a function"

found in ` --->

   <DatetimeField> at src/components/core/fields/datetimeField.vue

     <Formu> at src/components/core/form/Formu.vue

       <App> at src/App.vue

         <Root>

` Expected behavior Should work as described in the documentation

Minimal reproduction of the problem with instructions Follow the documentation. (README.md)

[ankurk91]

@fagubla Are you using webpack ? Then you should follow the instructions in readme. https://github.com/ankurk91/vue-bootstrap-datetimepicker#using-webpack

// webpack.config.js
plugins: [
    new webpack.ProvidePlugin({
      Vue: ['vue/dist/vue.esm.js', 'default'],
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      $: 'jquery',
      moment: 'moment',
    }),
  ]  

[fagubla]

@ankurk91 thanks. It's working.

[restless]

@ankurk91 Any hints on how to make this work with browserify?

[ankurk91]

I have no experience with browserify. I just found these links, https://github.com/browserify/browserify/issues/868 https://github.com/thlorenz/browserify-shim

[rvasoya]

i'm getting same error and im using vue-cli how to solve it?

[ankurk91]

@rvasoya

I have no experience with vue-cli, always do custom webpack configuration.

I believe you are using some webpack template, but which one ? https://github.com/vuejs-templates/webpack-simple https://github.com/vuejs-templates/webpack

Ultimately you need to configure webpack described in README.md

[restless]

@ankurk91 Thanks for the answer. Sadly I didn't succeed with that browserify setup, however I had some other priorities so didn't spent too much time on that one - read: maybe it's possible to make this work :D

[rvasoya]

i'm using https://github.com/vuejs-templates/webpack so i've to add plugins: [ new webpack.ProvidePlugin({ Vue: ['vue/dist/vue.esm.js', 'default'], jQuery: 'jquery', 'window.jQuery': 'jquery', $: 'jquery', moment: 'moment', }), ] in webpack.dev.conf.js & webpack.prod.conf.js or webpack.base.conf.js?

[ankurk91]

You need to edit https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.prod.conf.js Something like this - https://gist.github.com/anonymous/9417e6dce06acad13ca557460dabd6a3

[rvasoya]

solved it by using it inside webpack.base.conf.js. Thnx