0

I bundled my node application with webpack2, I used JQuery with jade for my frontend. while run my application I am getting this error, 

node_modules\jquery\dist\jquery.js:31
throw new Error( "jQuery requires a window with a document" );
^
Error: jQuery requires a window with a document

i used

var $ = require("jquery");

in all frontend javascript files.

I tried with this these solutions,

this to ,

    {
        test: require.resolve('jquery'),
        loader: 'expose?$!expose?jQuery'
    },

how I can handle this problem?

webpack.config.js

var path = require('path');
var nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    target: 'node',
    entry: {
        app: ['babel-polyfill', './bin/run.js'],
    },
    output: {
        path: './build',
        filename: '[name].min.js'
    },
    externals: [nodeExternals()],
    plugins: [
        new HtmlWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /lodash/
            },
            {
                test: /\.jade$/,
                loader: 'jade-loader'
            },
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            },
        ],
        noParse: [/ws/]
    }
};
Community
  • 1
  • 1
Ddr Dushy
  • 23
  • 1
  • 5
  • Refer to - http://stackoverflow.com/questions/39240241/jquery-requires-a-window-with-a-document-in-webpack – daniel aagentah Apr 04 '17 at 14:02
  • thanks for the reply, i installed jquery through npm, and I passed Jquery to client using `app.use(express.static("node_modules/jquery/dist"));`, after getting some errors from webpack, i used this declaration. if i removed this i get this error `$(function () { ^ ReferenceError: $ is not defined ` @danjonescidtrix – Ddr Dushy Apr 05 '17 at 04:11

1 Answers1

1

jQuery is to be used on the frontend (browser) only.

It looks like you are trying to use it in Node itself to reference back to $.

It's important to note that jQuery does not support server side rendering.

-> var $ = require("jquery"); won't work..

AO_
  • 2,573
  • 3
  • 30
  • 31
  • thanks for the reply, i installed jquery through npm, and I passed Jquery to client using `app.use(express.static("node_modules/jquery/dist"));`, after getting some errors from webpack, i used this declaration. if i removed this i get this error `$(function () { ^ ReferenceError: $ is not defined ` @0x616f – Ddr Dushy Apr 05 '17 at 04:11
  • You should be including it as a script tag src `` in your browser rendered HTML code (in the HEAD) – AO_ Apr 05 '17 at 07:57
  • yes, i included in my jade file like this, `script(src='/jquery.js', type='text/javascript' , crossorigin="anonymous")` @0x616f – Ddr Dushy Apr 05 '17 at 08:14
  • If you 'view-source' and open that '/jquery.js' file, does it open correctly? Also it needs to be pulled in before any of the `$(function() {)` stuff – AO_ Apr 05 '17 at 08:59