Search code examples
javascriptnpmmodernizr

Error in generated modernizr.js with config-all.json


I have a problem that I can't figure out :

  • I installed the latest release of modernizr (3.7.1) with npm install and a package.json

  • I generated the modernizr.js file with the following command ./bin/modernizr -c config-all.json as the documentation suggested it

  • Now that my modernizr file is included in my pages, i'm getting this error in the JavaScript console :

modernizr.js:6870
Uncaught TypeError: Cannot read property 'removeChild' of null
    at Object.fn (modernizr.js:6870)
    at testRunner (modernizr.js:144)
    at modernizr.js:10156
    at modernizr.js:10175

I don't know if it's blocking the well behavior of modernizr, still I can't figure out why it is occuring.

For more details, the function in modernizr.js where it's happening is this one :

Modernizr.addTest('localizednumber', function() {
    /* this extends our testing of input[type=number], so bomb out if that's missing */
    if (!Modernizr.inputtypes.number) { return false; }
    /* we rely on checkValidity later, so bomb out early if we don't have it */
    if (!Modernizr.formvalidation) { return false; }

    var body = getBody();
    var div = createElement('div');
    var firstChild = body.firstElementChild || body.firstChild;
    var result;

    body.insertBefore(div, firstChild);

    div.innerHTML = '<input type="number" value="1.0" step="0.1"/>';
    var input = div.childNodes[0];
    body.appendChild(div);

    input.focus();
    try {
      document.execCommand('SelectAll', false); // Overwrite current input value, rather than appending text
      document.execCommand('InsertText', false, '1,1');
    } catch (e) {} // prevent warnings in IE

    /* results */
    result = input.type === 'number' && input.valueAsNumber === 1.1 && input.checkValidity();

    /* cleanup */
    body.removeChild(div);
    if (body.fake) {
      body.parentNode.removeChild(body); // <==== ERROR HAPPENS HERE
    }

    return result;
  });

Solution

  • I included modernizr.js at the end of my body elemtn in my pages (before any other script) and the error doesn't occure anymore, because Modernizr doesn't use a fake body to run his tests.

    But I thought it was bad practice to include Modernizr there, that's why I included the file at the end of my head tag in the first place, any explanation ?