Posted in Uncategorized

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

   February 23, 2021  4 Comments on 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.