modernizr-loader Add support for webpack 4

Hi, modernizr-loader don't work with webpack 4.

Mar 08 '18 14:03 var-bp

@var-bp thanks for raising this issue. Would you mind providing a PR with a basic test case for webpack 4? We could use this as a starting point.

Mar 08 '18 14:03 flootr

Done.

Mar 08 '18 18:03 var-bp

~~guys, any updates on this issue?~~

[edit] loader works with webpack 4 with a slight tweak of webpack config

Jun 18 '18 06:06 jinixx

It would be really nice, if you would share the tweak with us!

Jun 19 '18 10:06 braime

{
    type: 'javascript/auto',
    test: /modernizrrc(\.json)?$/,
    use: ['expose-loader?Modernizr', 'modernizr-loader', 'json-loader'],
},

type: 'javascript/auto', << add this for json to load properly

Jun 20 '18 04:06 jinixx

Here is a snippet of what I have within my webpack.config.js file to get modernizr-loader working with Webpack 4.12.0

const webpack = require('webpack');
const path = require('path');

 module: {
        rules: [
        { 
            test: /\.modernizrrc$/,
            loader: "modernizr-loader!json-loader"
        },
        //Other rules to other packages here...
        ]
},
  resolve: {
        alias: {
        modernizr$: path.resolve(__dirname, 'src/.modernizrrc')
        }
    }

I intentionally placed my .modernizrrc in my /src folder. Its just a personal preference. But make sure you have the json-loader npm package installed.

My .modernizrrc file looks like the following, which loads classes on your <HTML> element in the DOM.

{
  "minify": true,
  "options": [
    "domPrefixes",
    "hasEvent",
    "testAllProps",
    "testProp",
    "html5shiv",
    "setClasses"
  ],
  "feature-detects": [
    "history",
    "flash",
    "css/boxshadow",
    "css/transitions",
    "css/fontface",
    "css/gradients",
    "css/mediaqueries",
    "es6/promises",
    "forcetouch"
  ]
}

And for fun, I also added some conditional logic for modernizr in my custom JavaScript file, which also executes...

"use strict";
import Modernizr from 'modernizr';

var detects = {
    'hasjquery': 'jQuery' in window,
    'itswednesday': function() {
      var d = new Date();
      return d.getDay() === 3;
    }
   }
   Modernizr.addTest(detects);

   console.log("is jquery running? " + Modernizr.hasjquery);
   console.log("is it Wednesday? " + Modernizr.itswednesday);

Hopefully this can save some headaches

Jun 20 '18 21:06 blachawk

the loaders are the same, except mine won't work without type: 'javascript/auto',

webpack 4 no longer use 'javascript/auto' as default type, and if the error encountered is of parsing of json, adding type: 'javascript/auto', could solve the problem.

Jun 21 '18 04:06 jinixx

hey all, is there any consensus for a workaround that works? I tried all of the above and they each resulted in my import Modernizr from 'modernizr' being a string (a path to a static resource ala file-loader).

Jun 25 '18 15:06 ctrlplusb

Hey all,

our implementation looks like this and it's working pretty well:

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

I first tried the type: 'javascript/auto' but it seems that it's not working if the file does not end with .json? After that, I saw that webpack has an implemented type: 'json'. But webpack also doesn't recognize the json file type (thows a compile error). Could it be that this is a webpack bug or that it's only working if the file ending is fitting to the declared type? Would be nice to be able to uninstall the json-loader.

module: {
  rules: [
    {
      type: 'json',
      test: /\.modernizrrc$/,
      use: ['modernizr-loader'],
    },
  ]
}

Thanks all! :-)

Jul 17 '18 14:07 medialwerk

Everything works in @medialwerk configuration, except if I use a .modernizrrc*.json* file (explicit json extension) and update config accordingly. This is pretty strange

Feb 13 '19 17:02 cyrilchapon

All works fine if we will be see on webpack documentation

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

Feb 27 '19 12:02 HawkeyePierce89

modernizr-loader modernizr-loader copied to clipboard

Add support for webpack 4

modernizr-loader
modernizr-loader copied to clipboard