Posted in Uncategorized

Uncaught TypeError: $(…).datetimepicker is not a function

   February 23, 2021  1 Comment on Uncaught TypeError: $(…).datetimepicker is not a function

Do you want to request a feature or report a bug?
A bug

What is the current behavior?
Uncaught TypeError: $(...).datetimepicker is not a function

If the current behavior is a bug, please provide the steps to reproduce.
Clone the repo: https://github.com/Sparkenstein/webpack_issue_repo.git

Then run: npm install

and then run webpack to produce webpack bundle. make sure you have webpack installed globally.

What is the expected behavior?
Datetimepicker should appear after clicking the input box

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.
webpack version: 4.1.1
OS version: windows 10

webpack log:

PS C:\opt\tmp\angularjs\npmtest> webpack
Hash: 662dfb7575cadde332c2
Version: webpack 4.1.1
Time: 1925ms
Built at: 2018-3-26 09:52:15
                               Asset      Size  Chunks                    Chunk Names
776d58f453c8fe5d6a89e9c31ee223ff.svg   248 KiB          [emitted]  [big]
4f0022f25672c7f501c339cbf98d9117.ttf   138 KiB          [emitted]
89889688147bd7575d6327160d64e760.svg   106 KiB          [emitted]
                           custom.js   289 KiB  custom  [emitted]  [big]  custom
                             main.js  2.11 MiB    main  [emitted]  [big]  main
                           styles.js  4.37 KiB  styles  [emitted]         styles
                      styles.min.css   602 KiB  styles  [emitted]  [big]  styles
Entrypoint main [big] = main.js
Entrypoint custom [big] = custom.js
Entrypoint styles [big] = styles.js styles.min.css
   [0] multi jquery bootstrap angular moment eonasdan-bootstrap-datetimepicker 76 bytes {main} [built]
   [1] multi ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/bootstrap/dist/css/bootstrap.min.css 40 bytes {styles} [built]
[./b.js] 571 bytes {custom} [built]
[./node_modules/moment/locale sync recursive ^\.\/.*$] ./node_modules/moment/locale sync ^\.\/.*$ 2.88 KiB {main} [optional] [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main} [built]
    + 158 hidden modules                                                                                                                       font-awesome.min.css:
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/font-awesome/css/font-awesome.min.css:
     2 assets
    Entrypoint undefined = extract-text-webpack-plugin-output-filename                                                                         s/bootstrap.min.css:
       8 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/bootstrap/dist/css/bootstrap.min.css:
     1 asset
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
       8 modules

All the code copied as it is from SO : bootstrap-datetimepicker-is-not-a-function

Author: Fantashit

1 thought on “Uncaught TypeError: $(…).datetimepicker is not a function”

  1. Well, the way i see this is that since datepicker.js is in another module, and you are using provide plugin, $ is replaced by jquery, but eonasdan-bootstrap-datetimepicker needs access to jquery to modify it maybe 😬, since the version of jquery you used is not modified, the error occurs, a workaround to this situation can be by introducing a side effect in your datetimepicker.js file

    import 'eonasdan-bootstrap-datetimepicker';
$(document).ready(function() {
...
};

    Then it works as expected.

Comments are closed.