CODEWITHSUNDEEP
modernizrwebpack
F21
F21

Reputation: 33421

Webpack and modernizr causes TypeError: document is undefined error

I am using webpack to bundle up my javascript files.

My Webpack config (which is passed to webpack using gulp) looks like 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 is a simple require:

require('modernizr/modernizr.js');

Webpack builds the file without any problems and the generated file contains modernizr.

The problem is that when I include the file on a page and test it, modernizr errors out:

TypeError: document is undefined

docElement = document.documentElement,

The bundled file from webpack looks like this:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;
/******/
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.loaded = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __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 the BSD and MIT licenses: www.modernizr.com/license/
     */

    /*
     * Modernizr tests which native CSS3 and HTML5 features are available in
     * the current UA and makes the results available to you in two ways:
     * as properties on a global Modernizr object, and as classes on the
     * <html> element. This information allows you to progressively enhance
     * your pages with a granular level of control over the experience.
     *
     * Modernizr has an optional (not included) conditional resource loader
     * called Modernizr.load(), based on Yepnope.js (yepnopejs.com).
     * To get a build that includes Modernizr.load(), as well as choosing
     * which tests to include, go to 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*/
        // option for enabling the HTML classes to be added
        enableClasses = true,
        /*>>cssclasses*/

        docElement = document.documentElement,

        /** rest of modernizr code here **/

        return Modernizr;

    })(this, this.document);


/***/ }
/******/ ])

What's causing this problem?

Upvotes: 4

Views: 8367

Answers (4)

Seif Tml
Seif Tml

Reputation: 2423

In Webpack config file added this :

module: {
    ...
    loaders: [
        ...
        { test: /[\\\/]modernizr dependecie path[\\\/]modernizr\.js$/,
            loader: "imports?this=>window!exports?window.Modernizr" }
        ...
    ]
}

for that you'll need to install the imports-loader and exports-loader .

Upvotes: 0

Ryan
Ryan

Reputation: 24073

On Webpack 2, I think I got it working by using {test: /modernizr/, loader: 'imports-loader?this=>window!exports-loader?window.Modernizr'}, in my module.rules.

See this Webpack bug filed here: https://github.com/webpack/webpack/issues/512#issuecomment-288143187

Upvotes: 3

Jasper Kuperus
Jasper Kuperus

Reputation: 1692

I had the same issue, but was not requiring Modernizr directly. I required a library that had Modernizr packaged in it. The earlier solution does not work in that scenario. I eventually ended up using the script-loader:

require('script!package/vendor-bundle.js);

Upvotes: 1

F21
F21

Reputation: 33421

This issue is caused by Modernizr passing this.document to the closure it creates. Unfortunately, webpack wraps all that in yet another closure of its own, causing this.document to return null.

The problem can be resolved by setting this using the imports loader when requiring:

require('imports?this=>window!modernizr/modernizr.js');

Upvotes: 1

Related Questions