I use webpack and want to use bootstrap-datetimepicker. In my webpack config I use ProvidePlugin to get "jquery module".
In my code I get error $(...).datetimepicker is not a function
when I call $('#datetimepicker12').datetimepicker
function. I don't why $
variable doesn't contain datetimepicker
function, which should be defined in var datetimepicker = require('eonasdan-bootstrap-datetimepicker');
webpack.config.js
var webpack = require('webpack'); var merge = require('webpack-merge'); var NpmInstallPlugin = require('npm-install-webpack-plugin'); var autoprefixer = require('autoprefixer'); const TARGET = process.env.npm_lifecycle_event; console.log("target event is " + TARGET); var common = { cache: true, debug: true, entry: './src/script/index.jsx', resolve: { extensions: ['', '.js', '.jsx'] }, output: { filename: 'index.js', sourceMapFilename: '[file].map' }, module: { loaders: [{ test: /\.js[x]?$/, loaders: ['babel'], exclude: /(node_modules|bower_components)/ }, { test: /\.css$/, loaders: ['style', 'css'] }, { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] }, { test: /\.less$/, loaders: ['style', 'css', 'less'] }, { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]" }, { test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]" }, { test: /\.(eot|ttf|svg|gif|png)$/, loader: "file-loader" }] }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], postcss: function() { return [autoprefixer({ browsers: ['last 3 versions'] })]; } }; if (TARGET === 'dev' || !TARGET) { module.exports = merge(common, { devtool: 'eval-source-map', devServer: { historyApiFallback: true }, output: { publicPath: 'http://localhost:8090/assets' }, plugins: [ new NpmInstallPlugin({ save: true // --save }) ] }); }
index.jsx
var React = require('react'); var ReactDOM = require('react-dom'); var bootstrap = require('bootstrap'); var bootstrapStyle = require("../../node_modules/bootstrap/dist/css/bootstrap.css"); var datetimepicker = require('eonasdan-bootstrap-datetimepicker'); class DateTimePicker extends React.Component { componentDidMount(){ $('#datetimepicker12').datetimepicker({ inline: true, sideBySide: true }); } render() { return ; } } ReactDOM.render( , document.getElementById('content'));
package.json
{ "name": "webpack-bootstrap-datetimepicker", "version": "0.0.0", "description": "webpack-bootstrap-datetimepicker", "main": "index.jsx", "scripts": { "start": "npm run serve | npm run dev", "serve": "./node_modules/.bin/http-server -p 8080", "dev": "webpack-dev-server -d --progress --colors --port 8090" }, "devDependencies": { "babel": "^6.5.2", "babel-core": "^6.5.2", "babel-loader": "^6.2.2", "babel-preset-es2015": "^6.5.0", "babel-preset-react": "^6.5.0", "bootstrap": "^3.3.6", "css-loader": "^0.23.1", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.8.1", "http-server": "^0.8.5", "jquery": "^2.2.0", "less": "^2.6.0", "less-loader": "^2.2.2", "node-sass": "^3.4.2", "npm-install-webpack-plugin": "^2.0.2", "postcss": "^5.0.15", "postcss-loader": "^0.8.1", "react": "^0.14.7", "react-dom": "^0.14.7", "sass-loader": "^3.1.2", "style-loader": "^0.13.0", "url-loader": "^0.5.7", "webpack": "^1.12.13", "webpack-dev-server": "^1.14.1", "webpack-merge": "^0.7.3" }, "dependencies": { "eonasdan-bootstrap-datetimepicker": "^4.15.35" } }