Still getting "ReferenceError: document [/window] is not defined"

[sengeezer]

I'd love to use this module, but it fails on build (es6/babel/webpack/yarn):

Error: ./.modernizrrc
Module build failed: ReferenceError: document is not defined
    at /Users/fabioa/Development/projects/mfsjs/.modernizrrc:4:1876
    at Object.<anonymous> (/Users/fabioa/Development/projects/mfsjs/.modernizrrc:6:3)
    at Module._compile (module.js:571:32)
    at Object.exec (/Users/fabioa/Development/projects/mfsjs/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7)
    at Object.module.exports (/Users/fabioa/Development/projects/mfsjs/node_modules/modernizr-loader/index.js:20:26)

I took a look at merge request #25 but even after implementing it I still got the same error.

Any ideas on how to fix this? Should I be including jsdom somewhere?

If I include #25 and

modulesDirectories: [
      'node_modules',
      'bower_components',
    ],

I get

Error: ./.modernizrrc
Module build failed: ReferenceError: window is not defined
    at Object.<anonymous> (/Users/fabioa/Development/projects/mfsjs/.modernizrrc:10:4)
    at Module._compile (module.js:571:32)
    at Object.exec (/Users/fabioa/Development/projects/mfsjs/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7)
    at Object.module.exports (/Users/fabioa/Development/projects/mfsjs/node_modules/modernizr-loader/index.js:24:26)

[flootr]

Hey, thanks for reporting this issue. Could you please provide us with your webpack configuration?

[sengeezer]

Sure. I've removed the bower line as I'm not using bower at this time.

import path from 'path';

export default {
  output: {
    filename: 'client-bundle.js',
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: [/node_modules/],
      },
      { test: /\.json$/, loader: 'json' },
      { test: /\.modernizrrc$/, loader: 'modernizr' },
      {
        test: /\.modernizrrc(\.json)?$/,
        loader: 'modernizr!json',
      },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [
      'node_modules',
    ],
    alias: {
      modernizr$: path.resolve(__dirname, './.modernizrrc'),
    },
  },
};

[mjamesderocher]

I am having a similar issue with window not being defined. I didn't use to have this problem.

[sengeezer]

Ok, I've played around some more and have changed my webpack config to this:

import path from 'path';

export default {
  output: {
    library: 'MF',
    libraryTarget: 'umd',
    filename: 'client-bundle.js',
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: [/node_modules/],
      },
      { test: /modernizr-config$/, loader: 'modernizr' },
      {
        test: /modernizr-config(\.json)?$/,
        loader: 'modernizr!json',
      },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.json'],
    modulesDirectories: [
      'node_modules',
    ],
    alias: {
      modernizr$: path.resolve(__dirname, './vendor/modernizr-config'),
    },
  },
};

I can now have if(Modernizr.input.placeholder) evaluate to true, for example. Does that mean it's working? This may seem like a silly question, but I may have gone codeblind on this topic.

[flootr]

Does that mean it's working?

Yes and no. The Modernizr test for input.placeholder does not rely on the global window object itself. I'm working on a fix!

[flootr]

Could you please test if 1.0.1 is working for you @sengeezer?

[sengeezer]

Ok, I updated to the new version and added test/elem/picture to the rc file. Upon running, I get the css classes in the body tag and the test for Modernizr.picture passes.

As far as I can tell, picture does use window. If this does mean that it's working now, I'd like to point out that formatting of the rc file, which in my case is an output from modernizr's json generator, appears to be critical.

[ghost]

Hello,

I confirm that window is not accessible within the tests, making stuff like touchevents test broken.

E.g.

define(['Modernizr', 'prefixes', 'testStyles'], function(Modernizr, prefixes, testStyles) {
  // Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
  Modernizr.addTest('touchevents', function() {

    console.warn('DEBUG');
    console.log(window);
    console.log(document);

    var bool;
    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
      bool = true;
    } else {
      // include the 'heartz' as a way to have a non matching MQ to help terminate the join
      // https://git.io/vznFH
      var query = ['@media (', prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
      testStyles(query, function(node) {
        bool = node.offsetTop === 9;
      });
    }
    return bool;
  });
});

window return an object with Modernizr inside only.

[cthorner]

We ran into this issue as well. v1.0.0 was giving us an empty object instead of window. Upgrading to v1.0.1 of modernizr-loader fixes the issue. However, the repo is still showing v1.0.0 as being the latest release. Can you update it to show v1.0.1 as latest release, @flootr ?

Thanks!

[flootr]

@cthorner Can you tell me where you see/don't see this? 1.0.1 should be the latest release both on GitHub and npm.

[cthorner]

When I go to releases in github, it shows "Latest Release" button next to the 1.0.0 release. I also see 1.0.1, but it is not marked as "Latest Release". Does that make sense? Another way to get there is to go to the latest url: https://github.com/peerigon/modernizr-loader/releases/latest

Right now it is redirecting to 1.0.0.