jQuery requires a window with a document in webpack

问题

I'm using ReactJS.net (server-side render) and when I use jquery in Webpack then I got error here is my error

Error while rendering "Components.ToDoListSkeleton" to "react_0LmYYfSk30qdrKJQe4McUQ": Error: jQuery requires a window with a document at module.exports (Script Document [5]:51:87) -> module.exports=global.document?factory(global,true):function(w){if(!w.document){throw new Error("jQuery requires a window with a document");}return factory(w);};}else {factory(global);} // Pass this if window is not defined yet at new ToDoListSkeleton (Script Document [5]:26:903) at ReactCompositeComponentMixin._constructComponentWithoutOwner (Script Document [2]:8271:28) at ReactCompositeComponentMixin._constructComponent (Script Document [2]:8253:22) at ReactCompositeComponentMixin.mountComponent (Script Document [2]:8172:22) at ReactReconciler.mountComponent (Script Document [2]:1977:36) at Script Document [2]:19549:37 at Mixin.perform (Script Document [2]:3788:21) at renderToStringImpl (Script Document [2]:19544:25) at renderToString (Script Document [2]:19574:11) at Script Document [7] [temp]:1:16 Line: 19549 Column:37

here is my webpack config

"use strict";

var path = require('path');
var WebpackNotifierPlugin = require('webpack-notifier');
var webpack = require("webpack");
module.exports = {
    context: path.join(__dirname, 'Content'),
    entry: {
        server: './server'
    },
    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            // Transform JSX in .jsx files
            { test: /\.jsx$/, loader: 'jsx-loader?harmony' },
            { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }
        ]
    },
    resolve: {
        // Allow require('./blah') to require blah.jsx
        extensions: ['', '.js', '.jsx']
    },
    externals: {
        //// Use external version of React (from CDN for client-side, or
        //// bundled with ReactJS.NET for server-side)
        react: "React"
    },
    plugins: [
      new WebpackNotifierPlugin(),
      new webpack.ProvidePlugin({
          $: "jquery", 
          jQuery: "jquery", 
          "window.jQuery": "jquery",    
      })
    ]
};

Any help or suggestions would be appreciated, Thanks.

回答1:

jQuery is only designed for use in a browser, and does not support server-side rendering. You'll need to remove jQuery from any of your code that you want to use server-side.

来源：https://stackoverflow.com/questions/39240241/jquery-requires-a-window-with-a-document-in-webpack

标签

reactjs

Webpack

reactjs.net