如何使用Webpack包括jQuery和jQuery验证？

Question

I'm relatively new to Webpack and am trying to create a Universal React app using https://github.com/erikras/react-redux-universal-hot-example . I've included jQuery using:

var jquery = new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
})

and including it in module.exports plugins array to make it global. And in my JS file I am trying to include it like this

import $ from 'jquery';
import jqueryValidation from 'jquery-validation';

However I am getting the following error in NodeJS:

> error given was: TypeError: $.extend is not a function  
[1]     at /Users/admin/repo/learnReact/node_modules/jquery-validation/dist/jquery.validate.js:19:3  
[1]     at /Users/admin/repo/learnReact/node_modules/jquery-validation/dist/jquery.validate.js:13:20  
[1]     at Object.<anonymous> (/Users/admin/repo/learnReact/node_modules/jquery-validation/dist/jquery.validate.js:17:2)  
[1]     at Module._compile (module.js:570:32)  
[1]     at Module._extensions..js (module.js:579:10)  
[1]     at require.extensions.(anonymous function) (/Users/admin/repo/learnReact/node_modules/babel-register/lib/node.js:152:7)  
[1]     at Object._module2.default._extensions.(anonymous function) [as .js] (/Users/admin/repo/learnReact/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:260:68)  
[1]     at Module.load (module.js:487:32)  
[1]     at tryModuleLoad (module.js:446:12)  
[1]     at Module._load (module.js:438:3)  
[0] ./src/utils/validation.js

What am I doing wrong? After a quick search online, I also tried expose-loader as suggested by some post, which also did not seem to work. Any help in fixing this or any reference to a good webpack tutorial will be highly appreciated.

Answer 1

jquery can only be used on DOM. so does validation

https://www.npmjs.com/package/jquery#node

so if you want to include jquery you must inject it in your client entry file (webpack) using script tag

this way jquery will always run in an environment with DOM. after that you will be able to use jquery through window.$ inside your react app.

(componentDidMount) (componentWillMount does not support DOM afaik)