$(…).datetimepicker is not a function

Question

In my code I get error $(...).datetimepicker is not a function when I call $('.date-picker').datetimepicker function. I don't know why $ variable doesn't contain datetimepicker function, which should be defined in main.bundle.js

There is $.fn.datetimepicker in the main.bundle.js file.

If I use "jquery": "3.6.0" in the package.json file - it works correctly but I have to use "jquery": "1.11.3".

If I remove all the imports from the index.js file and add:

<script src="node_modules/moment/moment.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" type="text/css"
          href="node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"/>
    <script src="node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>

to the index.html file (even with "jquery": "1.11.3") - it works correctly but I can't use any script in the index.html file and have to use import in my project.

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        loaders: [{
            test: /\.m?js$/,
            exclude: /node_modules(?!\/lof)/,
            loader: 'babel-loader?' + JSON.stringify({
                presets: ['babel-preset-es2015', 'babel-preset-stage-2'].map(require.resolve)
            })
        },{
            test: /\.html$/,
            loaders: ['html']
        }]
    },
    resolve: {
        'root': __dirname
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules')
    }
}

package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "test.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "browserslist": "> 0.25%, not dead",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "2.9.0",
    "jquery": "1.11.3",
    "eonasdan-bootstrap-datetimepicker": "^4.17.49"
  },
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-2": "^6.5.0",
    "expose-loader": "^3.0.0",
    "express": "^4.17.1",
    "html-loader": "^0.4.4",
    "imports-loader": "^3.0.0",
    "webpack": "~1.13.2",
    "webpack-cli": "^4.7.2",
    "webpack-node-externals": "^3.0.0"
  }
}

index.js

import moment from 'moment'
import $ from 'jquery';
import 'eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js';

console.log('jquery - ' + $().jquery);
console.log('moment - ' + moment.version);

$(document).ready(function() {
    $(".date-picker").datetimepicker();
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Some title</title>


    <script src="./dist/main.bundle.js"></script>
</head>

<body>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date date-picker' id='datetimepicker1'>
                    <input type='text' class="form-control"/>
                    <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

I have tried solutions from: $(...).datetimepicker is not a function and a lot of others answers from the stackoverflow and didn't find the solution. Please any help in my case I would be appreciate.

What about using the [`providePlugin` option](https://webpack.js.org/plugins/provide-plugin/)? — Terry, Jun 28 '21 at 09:07
@Terry I removed all the imports from the index.js and added to the webpack.config.js -> plugins: [ new webpack.ProvidePlugin( { $: 'jquery', jQuery: 'jquery', datetimepicker: 'eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js' } ) ] and I have the same error. — Roman Motovilov, Jun 28 '21 at 09:25

$(…).datetimepicker is not a function

0 Answers0