Skip to content
This repository has been archived by the owner on Jan 22, 2019. It is now read-only.

Modernizr

Birkir Rafn Guðjónsson edited this page May 4, 2017 · 3 revisions

Step 1: Install required modules

Don't forget the save and exact flag

yarn add modernizr modernizr-loader -SE

Step 2: Add to webpackConfig in config/values.js:

You need to import appRootDir and path at the top of file.

// Make sure you have this 👇
// import appRootDir from 'app-root-dir';
// import path from 'path';

webpackConfig(webpackConfig, buildOptions) {
  const { target, mode } = buildOptions;

  // Modernizer
  // @see https://modernizr.com/docs
  // @see https://github.com/peerigon/modernizr-loader

  // Add this line 👇
  webpackConfig.resolve.alias.modernizr$ = path.resolve(appRootDir.get(), './.modernizrrc');

  // Add this block 👇
  if (target === 'client') {
    webpackConfig.module.rules.push({
      test: /\.modernizrrc.js$/,
      loader: 'modernizr-loader',
    }, {
      test: /\.modernizrrc(\.json)?$/,
      loader: 'modernizr-loader!json-loader',
    });
  }
}

Step 3: Create the file ".modernizrrc" in the root folder

Add the features you want into the feature-detects list.

{
  "minify": true,
  "options": [],
  "feature-detects": [
    "flash",
    "..."
  ]
}

Step 4: Use it!

import Modernizr from 'modernizr';

Modernizr.on('flash', has => !has && alert('No flash awesomeness for you...'));