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

Hello,

I’m working on an isomorphic React app, in which I would like to require jQuery modules from Semantic UI. Each module adds itself to jQuery by accessing the global variable. I have spent hours scouring 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:

I’m clearly missing something here. Can someone point me to a (working) tutorial or explain the process by which I could get this working? I’ve spent so many hours on it now that I gave up and included both libraries manually…which completely defeats the purpose of converting to webpack anyway.

Thanks.

My webpack.config.js (for development)

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

var webpackConfig = {
    resolve: {
        extensions: ['', '.js', '.jsx', '.less', '.css'],
        resolve: {
            alias: {
                jquery: "jquery/src/jquery"
            }
        }
    },
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './client.js'
    ],
    output: {
        path: path.resolve('./dist'),
        publicPath: '/public/',
        filename: 'dev.js'
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loaders: [
                    require.resolve('react-hot-loader'),
                    require.resolve('babel-loader'),
                ]
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                loader: "style!css!less"
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    },
    node: {
        setImmediate: false
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
                BROWSER: JSON.stringify(true)
            }
        })
        // ,
        // new webpack.ProvidePlugin({
        //     $: "jquery",
        //     jQuery: "jquery"
        // }),
    ],
    devtool: 'eval'
};

module.exports = webpackConfig;

Author: Fantashit

4 thoughts on “Requiring jQuery at the global level for usage with Semantic UI modules

  1. window.$ = window.jQuery = require(“jquery”);

    This always worked for me… Just do this in your entry and you should be golden.

  2. Could make it work, but without explicit jQuery import/quire. It is global. Tried 1.000 variations and its the cleanest working one I’v found.

    ProvidePlugin. mapped global variables to jquery2 node lib.

    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery2',
        jQuery: 'jquery2'
      })
    ]

    module.loaders, you might need to adjust your include regex.

    module: {
      loaders: [
        {
          test: /\.css$/,
          include: /semantic/,
          loaders: ['style-loader', 'css-loader']
        },
        {
          test: /\.js$/,
          include: /semantic/,
          loaders: ['imports-loader?this=>window']
        },
        {
          test: /\.(png|jpg|jpeg|svg|woff|woff2|ttf|eot)$/i,
          loaders: ['file-loader']
        }
      ]
    },
  3. see the last loader, that does the trick, make jquery,$ available at the global level. I am using “webpack”: “1.13.2”,
    “webpack-dev-server”: “^1.16.1”

    var webpack = require('webpack');
    var HtmlWebPackPlugin = require('html-webpack-plugin');
    var path = require('path');
    
    module.exports = {
        entry:'./src/main.ts',
    
        output:{
            path:'./dist',
            filename:'app.bundle.js'
        },
        module:{
            loaders:[{test:/\.ts$/, loader:'ts-loader'},
            { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
            { test: /\.html$/, loader: 'raw-loader' },
            { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
          ]
        /*   loaders: [
          // .ts files for TypeScript
          { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
          { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
          { test: /\.html$/, loader: 'raw-loader' }
        ]*/
        },
        resolve:{
            root: [ path.join(__dirname, 'src') ], //add this for dev server
            extensions:['','.js','.ts']
        },
        plugins:[
    
            //inject all the files above into this file
            new HtmlWebPackPlugin({
                template: './src/index.html'
            }),
            new webpack.ProvidePlugin({
                jQuery: 'jquery',
                    $: 'jquery',
                    jquery: 'jquery'
            })
    
        ]
    
    
    }
    
  4. Have you tried using externals in lieu of the expose loader?

    // webpack config (I use this idea with webpack 2.1.0-beta25)
    module.exports = {
      ...
       externals: ['window']
    }
    
    // entry-point.js
    import jQuery from 'jquery'
    
    window.jQuery = jQuery
    console.log(window.jQuery);
    

Comments are closed.