Error in webpack Build

[vivekgs2007]

I am followed the steps as per the readme file and Got the same issue as the issue-5 ( https://github.com/peerigon/modernizr-loader/issues/5 )

As mentioned by @flootr, I have updated the code but No Luck

Webpack: v2.1.0-beta.20

Let me know if you need any more information

[flootr]

Hey @vivekgs2007! Thanks for reporting this issue. Would you be so kind and provide us with the following information?

• Your webpack configuration file
• The name of your modernizrrc file and if its written in JSON or JavaScript

[vivekgs2007]

Here is a part webpack conf file where all the modernizrrc configuration is added:

    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      {
        test: /\.(eot|woff|woff2|svg|svgz|ico|ttf|png)([\?]?.*)$/,
        loader: 'file-loader'
      },
      {
        test: /\.modernizrrc.js$/,
        loader: "modernizr"
      },
      {
        test: /\.modernizrrc(\.json)?$/,
        loader: "modernizr!json"
      },
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   loaders: [
      //     'ng-annotate'
      //   ]
      // },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, ".modernizrrc")
    }
  }

Here is modernizrrc file and saved has ".modernizrrc"

{
  "minify": true,
  "options": [
    "domPrefixes",
    "hasEvent",
    "testAllProps",
    "testProp",
    "html5shiv",
    "setClasses"
  ],
  "feature-detects": [
    "test/history",
    "test/postmessage",
    "test/svg",
    "test/a/download",
    "test/css/transitions",
    "test/file/api",
    "test/storage/localstorage",
    "test/svg/inline"
  ]
}

[flootr]

Ok, if you're using webpack 2 I think you always have to provide -loader suffix (like modernizr-loader!json-loader).

I'm not sure if you want this, but here you are not escaping the dot (which you have to, if you only want to match the regex on a . here): test: /\.modernizrrc\.js$/,

You may have some misconfiguration (there are a load of tests which apply to either modernizrrc or json file extensions). Could you please comment out any loader configuration which apply to them except for

{
  test: /\.modernizrrc(\.json)?$/,
  loader: "modernizr-loader!json-loader"
},

and try if that helps?

[vivekgs2007]

Tried with above and other possible ways, But No Luck.

Here are the Loaders

loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      {
        test: /\.(eot|woff|woff2|svg|svgz|ico|ttf|png)([\?]?.*)$/,
        loader: 'file-loader'
      },
      {
        test: /\.modernizrrc\.js$/,
        loader: "modernizr-loader"
      },
      {
        test: /\.modernizrrc(\.json)?$/,
        loader: "modernizr-loader!json-loader"
      },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]

In the entry js file I have included

require('modernizr');

Error on Build:

ERROR in ./~/modernizr/lib/build.js
Module not found: Error: Can't resolve 'generate' in '/home/vshadaka/personal_html/archer/node_modules/modernizr/lib'
 @ ./~/modernizr/lib/build.js 149:2-72
 @ ./~/modernizr/lib/cli.js
 @ ./src/index.js

ERROR in ./~/modernizr/lib/build.js
Module not found: Error: Can't resolve 'package' in '/home/vshadaka/personal_html/archer/node_modules/modernizr/lib'
 @ ./~/modernizr/lib/build.js 149:2-72
 @ ./~/modernizr/lib/cli.js
 @ ./src/index.js

ERROR in ./~/modernizr/lib/metadata.js
Module not found: Error: Can't resolve 'fs' in '/home/vshadaka/personal_html/archer/node_modules/modernizr/lib'
 @ ./~/modernizr/lib/metadata.js 1:9-22
 @ ./~/modernizr/lib/cli.js
 @ ./src/index.js

ERROR in ./~/modernizr/lib/options.js
Module not found: Error: Can't resolve 'fs' in '/home/vshadaka/personal_html/archer/node_modules/modernizr/lib'
 @ ./~/modernizr/lib/options.js 1:9-22
 @ ./~/modernizr/lib/cli.js
 @ ./src/index.js

ERROR in ./~/modernizr/lib/build.js
Module not found: Error: Can't resolve 'lib/generate-banner' in '/home/vshadaka/personal_html/archer/node_modules/modernizr/lib'
 @ ./~/modernizr/lib/build.js 149:2-72
 @ ./~/modernizr/lib/cli.js
 @ ./src/index.js

ERROR in ./~/requirejs/bin/r.js
Module parse failed: /home/vshadaka/personal_html/archer/node_modules/requirejs/bin/r.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| /**
|  * @license r.js 2.1.22 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
 @ ./~/modernizr/lib/build.js 131:18-38
 @ ./~/modernizr/lib/cli.js
 @ ./src/index.js

ERROR in ./~/file/lib/file.js
Module not found: Error: Can't resolve 'fs' in '/home/vshadaka/personal_html/archer/node_modules/file/lib'
 @ ./~/file/lib/file.js 2:9-22
 @ ./~/modernizr/lib/metadata.js
 @ ./~/modernizr/lib/cli.js
 @ ./src/index.js

[flootr]

Could you provide a small sample repository? I'm not sure if this is related to to the modernizr-loader itself, but a misconfiguration with webpack, somehow. Maybe @jhnns can provide us with a usefil hint here.

[jhnns]

You are requiring the modernizr module. You should require your .modernizrrc.js, which is the configuration file that customizes the modernizr build.

[vivekgs2007]

@jhnns I have changed the mine .modernizrrc to .modernizrrc.js

But Still no luck

resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, ".modernizrrc.js")
    }
  }

Let me know any other way.

Does this plugin is compatible with webpack 2

[vivekgs2007]

Tried requiring the .modernizrrc.js in entry file, No Luck

[flootr]

@vivekgs2007 do you think you can set up a small example repository which reproduces your error? I think this would be helpful so that we can finally solve your problem :)

[vivekgs2007]

I tried other plugins "modernizr-webpack-plugin" and "webpack-modernizr-loader"

Got the same errors.

Need to find the other solution.

[flootr]

Yeah, I think you might have some misconfiguration with your webpack config. If you could set up a sample project which reproduces the error, we can help you. Otherwise it would be like trying to find a needle in a haystack, unfortunately

[rhagigi]

So I had the same issue with webpack 2. Instead of aliasing the .modernizrrc file, I required it directly (require('../../../.modernizrrc') and it worked. It looks like the issue is with it being able to resolve the aliased modernizrrc and load it properly... Not entirely sure why.

[flootr]

@vivekgs2007 could you resolve your issue with @rhagigi suggestion?

[mikeyalder-bw]

I had to change this to the following to get it working:

module: {
  rules: [
    { 
      test: /\.modernizrrc$/,
      loader: "modernizr-loader!json-loader"
    }
  ]
},
resolve: {
  alias: {
    modernizr$: path.resolve(__dirname, ".modernizrrc")
  }
}

[trafiq]

I am struggling with the same problem though still not managed to get it working. @mikeyalder-bw, please can you confirm how you are loading modernizr in your scripts? Is it with require or import from. I have everything else exactly as your config from your last comment. Thanks.

[mikeyalder-bw]

I am requiring it using code below:

window.Modernizr = require('modernizr');

[trafiq]

Thanks. That helped me realise my mistake. My file structure is slightly different and I needed to set my alias as follows:

alias: {
  modernizr$: path.resolve(__dirname, "../.modernizrrc")
}

[trafiq]

Incidentally. Both of these seem to work for me:

import Modernizr from 'modernizr'

and

require('modernizr')

All is now working as it should.

[frederikprijck]

I'm having the same issues, I'm using the configuration as mentioned in the readme of modernizr-loader.

My console outputs:

ERROR in ../~/modernizr/lib/build.js
Module not found: Error: Can't resolve 'generate' in 'D:\samples\webpack-modernizr\node_modules\modernizr\lib'
 @ ../~/modernizr/lib/build.js 149:2-72
 @ ../~/modernizr/lib/cli.js
 @ ./index.ts

ERROR in ../~/modernizr/lib/build.js
Module not found: Error: Can't resolve 'package' in 'D:\samples\webpack-modernizr\node_modules\modernizr\lib'
 @ ../~/modernizr/lib/build.js 149:2-72
 @ ../~/modernizr/lib/cli.js
 @ ./index.ts

ERROR in ../~/modernizr/lib/build.js
Module not found: Error: Can't resolve 'lib/generate-banner' in 'D:\samples\webpack-modernizr\node_modules\mode
rnizr\lib'
 @ ../~/modernizr/lib/build.js 149:2-72
 @ ../~/modernizr/lib/cli.js
 @ ./index.ts

ERROR in ../~/requirejs/bin/r.js
Module parse failed: D:\samples\webpack-modernizr\node_modules\requirejs\bin\r.js Unexpected character '#' (1:0
)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| /**
|  * @license r.js 2.1.22 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
 @ ../~/modernizr/lib/build.js 131:18-38
 @ ../~/modernizr/lib/cli.js
 @ ./index.ts

I've attached a minimal reproduction sample, any guidance into what I'm missing ?

Repro steps:

• npm install
• npm run build

webpack-modernizr.zip

[trafiq]

You have a different modernizrrc test to me. You could try changing:

test: /\.modernizrrc(\.json)?$/,

to…

test: /\.modernizrrc$/,

Also try removing resolveLoader and add your alias to the resolve object instead:

resolve: {
  extensions: ['.ts', '.js'],
  alias: {
    'modernizr$': path.resolve(__dirname, ".modernizrrc")
  }
 }

[frederikprijck]

@trafiq I've must have missed something, it appears to work. Thanks! 👍 Note, the sample I added seems to miss the json-loader. Installing that loader, removing the resolveLoader and using resolve.alias did the trick after updating my loaders for .modernizerrc:

{
    test: /\.modernizrrc(\.json)?$/,
    use: ["modernizr-loader", "json-loader"]
},

Making these changes does succeed the build, however Modernizr logs undefined in the browser.

import Modernizr from 'modernizr';

console.log(Modernizr);
console.log(Modernizr.touch);

Anything I'm missing here ? I've reattached the reproduction sample, which should not be missing dependencies this time 🙈 .

webpack-modernizr.zip

You can run npm start after running npm run build in order to start the http server en see the console.log:

[frederikprijck]

@flootr, sorry for mentioning u directly. Any idea why it's giving me undefined ?

I did some debugging inside modernirz-loader:

module.exports = function (config) {
    if (typeof this.cacheable === 'function') {
        this.cacheable();
    }

    var cb = this.async();
    console.log("building webpack");
    console.log(config);
    modernizr.build(this.exec(config, this.resource), function (output) {
        console.log(wrapOutput(output));
        cb(null, wrapOutput(output));
    });
};

Results in

building webpack

module.exports = {
        "minify": true,
        "options": [
                "setClasses"
        ],
        "feature-detects": [
                "history"
        ]
};

;(function(window){
var hadGlobal = 'Modernizr' in window;
var oldGlobal = window.Modernizr;
/*! modernizr 3.5.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-history-setclasses !*/
!function(n,e,o){function s(n,e){return typeof n===e}function i(){var n,e,o,i,a,r,l;for(var c in t)if(t.hasOwnProperty(c)){if(n=[],e=t[c],e.name&&(n.push(e.name.toLowerCase()),e.options&&e.options.aliases&&e.options.aliases.length))for(o=0;o<e.options.aliases.length;o++)n.push(e.options.aliases[o].toLowerCase());for(i=s(e.fn,"function")?e.fn():e.fn,a=0;a<n.length;a++)r=n[a],l=r.split("."),1===l.length?Modernizr[l[0]]=i:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=i),f.push((i?"":"no-")+l.join("-"))}}function a(n){var e=l.className,o=Modernizr._config.classPrefix||"";if(c&&(e=e.baseVal),Modernizr._config.enableJSClass){var s=new RegExp("(^|\\s)"+o+"no-js(\\s|$)");e=e.replace(s,"$1"+o+"js$2")}Modernizr._config.enableClasses&&(e+=" "+o+n.join(" "+o),c?l.className.baseVal=e:l.className=e)}var t=[],r={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(n,e){var o=this;setTimeout(function(){e(o[n])},0)},addTest:function(n,e,o){t.push({name:n,fn:e,options:o})},addAsyncTest:function(n){t.push({name:null,fn:n})}},Modernizr=function(){};Modernizr.prototype=r,Modernizr=new Modernizr;var f=[],l=e.documentElement,c="svg"===l.nodeName.toLowerCase();Modernizr.addTest("history",function(){var e=navigator.userAgent;return-1===e.indexOf("Android 2.")&&-1===e.indexOf("Android 4.0")||-1===e.indexOf("Mobile Safari")||-1!==e.indexOf("Chrome")||-1!==e.indexOf("Windows Phone")||"file:"===location.protocol?n.history&&"pushState"in n.history:!1}),i(),a(f),delete r.addTest,delete r.addAsyncTest;for(var d=0;d<Modernizr._q.length;d++)Modernizr._q[d]();n.Modernizr=Modernizr}(window,document);
module.exports = window.Modernizr;
if (hadGlobal) { window.Modernizr = oldGlobal; }
else { delete window.Modernizr; }
})(window);

This is also available in my bundle.js file ...

So this would make me think that:

• import Modernizr from 'modernizr is being translated to importing the .modernizrrc file coz of the alias (so this is working)
• It's using the rc file to build a custom modernizr version (so this is working)
• it doesn't return the generated code to the file where I'm importing modernizr ( import Modernizr from 'modernizr';). (Is this even supposed to work this way ? :| )

[frederikprijck]

Apparantly I need to use import * as Modernizr from 'modernizr (instead of import Modernizr from 'modernizr'), could this be because I'm using TypeScript ?

[stephane-tessier]

I used a modernizr-config.json file for config, like advised for for the cli. With webpack 2, here is the conf that works for me: (the json loader is a bit tricky so I thought I would share it)

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /modernizr-config(\.json)?$/,
        use: [
          {
            loader: 'modernizr-loader',
            options: require('./conf/modernizr-config.json'),
          },
          {
            loader: 'json-loader',
          },
        ]
      },
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, 'conf/modernizr-config.json')
    }
  },
};

(npm install json-loader might be needed)

[toddpi314]

@stephane-tessier's solution worked for Webpack3 as well

[laptite]

For anyone struggling to get this working on Rails 6 -- I did the following:

# config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')

environment.config.merge(customConfig)

module.exports = environment

# config/webpack/custom.js

const path = require('path');

module.exports = {
  module: {

    rules: [
    { 
      test: /\.modernizrrc$/,
      loader: "modernizr-loader!json-loader"
    }
  ]
  },
  resolve: {
    alias: {
      $: 'jquery/src/jquery',
    	jQuery: 'jquery/src/jquery',
    	Masonry: 'masonry-layout',
    	modernizr$: path.resolve(__dirname, './.modernizrrc')
    }
  }
}

# config/webpack/.modernizrrc
{
  "minify": true,
  "options": [
    "setClasses"
  ],
  "feature-detects": [
  	"css/transitions"
  ]
}

# app/javascript/packs/applications.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

const $ = require('jquery');
const Masonry = require('masonry-layout');
const Modernizr = require('modernizr');