Modernizr: Can't require('modernizr')

[screendriver]

I am using webpack to modularize and bundle my code (it's like browserify but with some advantages). I installed Modernizr 3.0.0-alpha4 via npm and required Modernizr in my code. Unfortunately I get following error:

1 vagrant@vagrant-ubuntu-trusty-64 /vagrant % webpack                                                      :(
Hash: d313d14e909b8cd939c0
Version: webpack 1.9.7
Time: 894ms
    Asset    Size  Chunks             Chunk Names
bundle.js  717 kB       0  [emitted]  main
    + 173 hidden modules

ERROR in ./~/modernizr/package.json
Module parse failed: /vagrant/node_modules/modernizr/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "modernizr",
|   "version": "3.0.0-alpha.4",
|   "description": "Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.",
 @ ./~/modernizr/lib/build.js 131:12-38

ERROR in ./~/modernizr/lib/build.js
Module not found: Error: Cannot resolve module 'generate' in /vagrant/node_modules/modernizr/lib
 @ ./~/modernizr/lib/build.js 147:2-72

ERROR in ./~/modernizr/lib/build.js
Module not found: Error: Cannot resolve module 'lib/generate-banner' in /vagrant/node_modules/modernizr/lib
 @ ./~/modernizr/lib/build.js 147:2-72

ERROR in ./~/modernizr/lib/build.js
Module not found: Error: Cannot resolve module 'package' in /vagrant/node_modules/modernizr/lib
 @ ./~/modernizr/lib/build.js 147:2-72

ERROR in ./~/modernizr/lib/metadata.js
Module not found: Error: Cannot resolve module 'fs' in /vagrant/node_modules/modernizr/lib
 @ ./~/modernizr/lib/metadata.js 1:9-22

ERROR in ./~/modernizr/lib/polyfills.json
Module parse failed: /vagrant/node_modules/modernizr/lib/polyfills.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "html5shiv": {
|     "name": "HTML5 Shiv",
|     "authors": ["Alexander Farkas (@aFarkas)", "Jonathan Neal (@jonathantneal)", "Paul Irish (@paulirish)"],
 @ ./~/modernizr/lib/metadata.js 4:16-43

ERROR in ./~/modernizr/~/requirejs/bin/r.js
Module parse failed: /vagrant/node_modules/modernizr/node_modules/requirejs/bin/r.js Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| /**
|  * @license r.js 2.1.17 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
 @ ./~/modernizr/lib/build.js 129:18-38

ERROR in ./~/modernizr/~/file/lib/file.js
Module not found: Error: Cannot resolve module 'fs' in /vagrant/node_modules/modernizr/node_modules/file/lib
 @ ./~/modernizr/~/file/lib/file.js 2:9-22

I saw the issues #1527, #1431 and #1204 but I don't get the solution. Will this possible in the final 3.0 release or is this still supported in the current alpha version?

[patrickkettner]

the modernizr npm lib is for building modernizr - not for using it directly in webpack

[screendriver]

Oh ok, thank you. Are there any plans that Modernizr can be used with Browserify / webpack?

[patrickkettner]

totally, but it would be a built file, not the npm lib.

cheers!

[screendriver]

:+1:
One last question: is this already supported or is this a feature that will come when the final version 3.0 will be released?

[patrickkettner]

you can do this for now. Not certain if it will be necessary for 3.0. If it _is_, it will be fixed shortly thereafter.

[screendriver]

Thank you very much

[patrickkettner]

A pleasure!

[jbrantly]

totally, but it would be a built file, not the npm lib.

This seems unfortunate. There are many advantages to being able to pull directly from npm.

1. You don't need to have a separate package manager (like bower) or commit the built file to your repo.
2. Many projects allow you to pull in only what you need. For instance, lodash/object/assign or react vs react/addons. You could (possibly) mimic the "configure your build" functionality purely through require statements. If some component no longer needs to check for canvas support, it can remove the appropriate require statement and assuming no other components require modernizr/canvas then the canvas functionality would just be dropped from the build automatically.

[patrickkettner]

@jbrantly what is it you expect to be able to require?

[jbrantly]

I haven't fully thought this out for every single API that Modernizr exposes, but for a simple feature check like canvas support it might look something like this:

var canvasSupported = require('modernizr/canvas');

if (canvasSupported) {
   // do stuff
}

The point here is that if modernizr is constructed a certain way behind the scenes, webpack/browserify would only pull in the canvas feature check and any core Modernizr stuff that was needed. If some other file needed audio support and used var audioSupport = require('modernizr/audio') then the output of webpack would include the two feature checks and any core Modernizr stuff but wouldn't include any other feature checks. In this way the "built" file is purely based on the individual needs of each file in the application and feature checks will be added/removed as necessary as the application evolves. All of this from a single npm install modernizr.

[patrickkettner]

we use requirejs, not commonjs. You can use the api in the way that you requested, but using the require syntax.

[jbrantly]

You can use the api in the way that you requested, but using the require syntax.

It seems this would require that I actually use your exact RequireJS build configuration. For instance, you alias the "test" path to "feature-detects" so that you can require test/canvas. It would be difficult at best, even if I were to use requirejs, to use the API in this way unless I'm missing something.

I realize this comment isn't going to cause you to completely rearchitect your whole system. I just wanted to point out how some other libraries are making it super easy to simply npm install them and then use them in their front-end using webpack/browserify in a way that only pulls in exactly what they use. Modernizr seems particularly well suited to this approach since it's composed of a lot of small, mostly-independent feature checks.

[patrickkettner]

PRs are welcome!

[akoskm]

@patrickkettner I'm having the same problem as @jbrantly but I might have a solution which doesn't require any re-architecting.

How about wrapping the custom builds generated through the build-ui (https://modernizr.com/download?setclasses) with an AMD and CommonJS wrapper code?

Should I open a new issue, would https://github.com/Modernizr/builder-ui be a more appropriate place for this?

[patrickkettner]

hey @akoskm !

... which doesn't require any re-architecting.

We actually _want_ to do the rearch. With ES6 modules coming in the near future, we want to build the modular subsystem based on where the browsers are going, rather than where they have been.
I already have written 95% of the rewrite, the biggest issue facing me at the moment is getting tests back in working order (they were previously written with requirejs)

How about wrapping... with [UMD]

Thats actually what the rewrite is doing already

...would https://github.com/Modernizr/builder-ui be a more appropriate ...

The building system is the universal builder, which is in this repo. Also, builder-ui is the old site, the new one being modernizr-neue. So thanks a ton! But no need, we are on it already :].

[akoskm]

With ES6 modules coming in the near future, we want to build the modular subsystem based on where the browsers are going, rather than where they have been.

Well said! :+1: I think I'm going to use my custom feature checks until that rewrite goes live.

Thanks!

[ehsankhfr]

Please check the modernizr-loader for webpack.