Webpack and modernizr causes TypeError: document is undefined error -
i using webpack bundle javascript files.
my webpack config (which passed webpack using gulp) looks this:
var webpackconfig = { context: __dirname, entry: { "app": "./js/app.js" }, output: { path: path.join(__dirname, ".."), filename: "/js/[name].js", chunkfilename: "/js/[id].js" }, plugins: [ new webpack.resolverplugin( new webpack.resolverplugin.directorydescriptionfileplugin("bower.json", ["main"]) ) ], resolve: { modulesdirectories: ['js', 'bower_components', 'node_modules'] } }; my app.js simple require:
require('modernizr/modernizr.js'); webpack builds file without problems , generated file contains modernizr.
the problem when include file on page , test it, modernizr errors out:
typeerror: document undefined docelement = document.documentelement, the bundled file webpack looks this:
/******/ (function(modules) { // webpackbootstrap /******/ // module cache /******/ var installedmodules = {}; /******/ /******/ // require function /******/ function __webpack_require__(moduleid) { /******/ /******/ // check if module in cache /******/ if(installedmodules[moduleid]) /******/ homecoming installedmodules[moduleid].exports; /******/ /******/ // create new module (and set cache) /******/ var module = installedmodules[moduleid] = { /******/ exports: {}, /******/ id: moduleid, /******/ loaded: false /******/ }; /******/ /******/ // execute module function /******/ modules[moduleid].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // flag module loaded /******/ module.loaded = true; /******/ /******/ // homecoming exports of module /******/ homecoming module.exports; /******/ } /******/ /******/ /******/ // expose modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose module cache /******/ __webpack_require__.c = installedmodules; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ // load entry module , homecoming exports /******/ homecoming __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports, __webpack_require__) { __webpack_require__(1); /***/ }, /* 1 */ /***/ function(module, exports, __webpack_require__) { /*! * modernizr v2.8.3 * www.modernizr.com * * copyright (c) faruk ates, paul irish, alex sexton * available under bsd , mit licenses: www.modernizr.com/license/ */ /* * modernizr tests native css3 , html5 features available in * current ua , makes results available in 2 ways: * properties on global modernizr object, , classes on * <html> element. info allows progressively enhance * pages granular level of command on experience. * * modernizr has optional (not included) conditional resource loader * called modernizr.load(), based on yepnope.js (yepnopejs.com). * build includes modernizr.load(), choosing * tests include, go www.modernizr.com/download/ * * authors faruk ates, paul irish, alex sexton * contributors ryan seddon, ben alman */ window.modernizr = (function( window, document, undefined ) { var version = '2.8.3', modernizr = {}, /*>>cssclasses*/ // alternative enabling html classes added enableclasses = true, /*>>cssclasses*/ docelement = document.documentelement, /** rest of modernizr code here **/ homecoming modernizr; })(this, this.document); /***/ } /******/ ]) what's causing problem?
this issue caused modernizr passing this.document closure creates. unfortunately, webpack wraps in yet closure of own, causing this.document homecoming null.
the problem can resolved setting this using imports loader when requiring:
require('imports?this=>window!modernizr/modernizr.js'); modernizr webpack
No comments:
Post a Comment