CODEWITHSUNDEEP
jquery-uidatepickerwebpack
Rafael Mora
Rafael Mora

Reputation: 1221

use jquery-ui with webpack having a particular file structure

I would like you to help/suggest the best way to use datepicker from jquery-ui having the following file structure:

-single_pages
  -admin
    -admin.js
    -webpack.config.js
  -common
    -DatesFilter
      -DatesFilter.js
  -node_modules
  -package.json

I already installed jquery-ui

My webpack.config.js file is:

var path = require('path');
var webpack = require("webpack");

module.exports = {
  resolve: {
    alias: {
        'jquery': require.resolve('jquery'),
    },
    root: [
      path.resolve(__dirname, './../admin'),
      path.resolve(__dirname, './../common')
    ],
    extensions: ['', '.js'],
    fallback: path.resolve(__dirname, './../node_modules')
  },
  resolveLoader: {
    fallback: path.resolve(__dirname, './../node_modules')
  },
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    publicPath: "/"
  },
  externals: {
      // require("jquery") is external and available
      //  on the global var jQuery
      "jquery": "jQuery"
  },
  plugins: [
    new webpack.ProvidePlugin({
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, './')
        ],
        loader: "babel-loader"
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, './../common'),
        babelrc: false,
        loader: require.resolve('babel-loader'),
        query: { // load the same presets as in the .babelrc file, but in a way that resolves in the parent directory
          presets: [require.resolve('babel-preset-es2015'),     require.resolve('babel-preset-react'),
        require.resolve('babel-preset-stage-0')]
        }
      }
    ]
  }
};

I'm using React.js.

I import DatesFilter.js inside admin.js. I get to see the component. The problem comes when I want to use the datepicker.

DatesFilter.js uses datepicker from jquery-ui

I'm using: import { datepicker } from 'jquery-ui' inside DatesFilter.js but it keeps saying TypeError: $(...).datepicker is not a function

What can I do?

Thank you

Upvotes: 1

Views: 4789

Answers (1)

Brandon Culley
Brandon Culley

Reputation: 1344

Try importing just the module, see this link jquery-ui-and-webpack-how-to-manage-it-into-module

in your case you would import "jquery-ui/ui/widgets/datepicker"

Upvotes: 3

Related Questions