Requiring jQuery at the global level for usage with Jquery UI modules

I’m working on angular 2, in which I would like to require jQuery from Jquery ui. Each module adds itself to jQuery by accessing the global variable. I have spent hours searching pretty much every corner of Github and Stackoverflow (and other random websites) looking for solutions, but so far, not a single one has worked.

Methods I have tried:

ProvidePlugin for $, jQuery, and window.jQuery, expose loader imports loader various other combinations of requiring jQuery at different locations in my stack I’m clearly missing something here. Every time I write import “jquery-ui” , I get “jQuery is not defined

Thanks.

webpack.common.config.ts

   var path = require('path');
  var autoprefixer = require('autoprefixer');
  var webpack = require('webpack');
  const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
  const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');


  var commonConfig = {
    resolve: {
      extensions: ['', '.ts', '.js']
    },
    module: {
      loaders: [
        // TypeScript
        { test: /\.ts$/, loaders: ['ts-loader'] },

        { test: /\.css$/, loaders: ['style','css'] },
        {
          test: /\.html/,
          loader: 'html',
          query: {
            minimize: true,
            removeAttributeQuotes: false,
            caseSensitive: true,
            // Teach html-minifier about Angular 2 syntax
            customAttrSurround: [
              [/#/, /(?:)/],
              [/\*/, /(?:)/],
              [/\[?\(?/, /(?:)/]
            ],
            customAttrAssign: [/\)?\]?=/]
          }
        },
        { test: /\.scss$/, loaders: ['to-string', 'css', 'postcss', 'resolve-url', 'sass?sourceMap'] },
        { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
      ]
    },
    'uglify-loader': {
      mangle: false
    },
    postcss: function () {
      return [autoprefixer];
    },
    plugins: [
      new webpack.optimize.OccurenceOrderPlugin(true),
      new webpack.DefinePlugin({
        ENV: JSON.stringify(process.env.ENV)
      })
    ],
    devtool: process.env.ENV == 'dev'? 'source-map' : null
  };

  module.exports=commonConfig;

Author: Fantashit

1 thought on “Requiring jQuery at the global level for usage with Jquery UI modules

Comments are closed.