Installing Modernizr with Yarn on Rails

Question

I am trying to install Modernizr with Yarn in Rails. I do 'yarn add Modernizr' and it gets added to the .node-modules directory. However, I can't figure out how to reference it properly from Rails.

I have added //= require modernizr/src/Modernizr to application.js. But I'm not sure that's the right reference because I get the following error:

Uncaught ReferenceError: define is not defined

Do I need to somehow build the Modernizr library. Does yarn not do that? I'm somewhat new to this and struggling to understand the relationship between webpacker, yarn, and rails and how to properly build and add libraries to rails with yarn. The tutorials all make it seem as though it's as simple as 'yarn add xxx' but I seem to be missing something. Thank you.

Answer 1

What you're looking for is the webpacker gem , which ships by default with Rails 5.1+ but can be used with Rails 4.2+. Get that set up, then follow these steps to get a custom Modernizr build running in your Rails app:

Loader

Install the loader for modernizr:

$ yarn install webpack-modernizr-loader

Modernizr Configuration

Download your desired modernizr config from the modernizr site. Visit a link like this:

https://modernizr.com/download?-appearance-backgroundblendmode-backgroundcliptext-backgroundsize-bgpositionxy-borderradius-boxshadow-boxsizing-canvas-canvastext-cssgradients-csspointerevents-fontface-generatedcontent-inputtypes-lastchild-mediaqueries-multiplebgs-opacity-svg-touchevents-setclasses-dontmin-cssclassprefix:mod_

Then configure your build, click "Build" in the upper right-hand corner, and download "Command Line Config".

Then convert it from JSON to a module and save it as config/webpack/.modernizrrc.js (note the leading period in the filename), like so:

"use strict";

module.exports = {
  minify: false,
  options: [
    "setClasses"
  ],
  "feature-detects": [
    "test/canvas",
    "test/canvastext",
    "test/inputtypes",
    "test/svg",
    "test/touchevents",
    "test/css/appearance",
    "test/css/backgroundblendmode",
    "test/css/backgroundcliptext",
    "test/css/backgroundposition-xy",
    "test/css/backgroundsize",
    "test/css/borderradius",
    "test/css/boxshadow",
    "test/css/boxsizing",
    "test/css/fontface",
    "test/css/generatedcontent",
    "test/css/gradients",
    "test/css/lastchild",
    "test/css/mediaqueries",
    "test/css/multiplebgs",
    "test/css/opacity",
    "test/css/pointerevents"
  ]
};

Custom Configuration

Next, create a custom webpack config file as config/webpack/custom.js :

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        loader: "webpack-modernizr-loader",
        test: /\.modernizrrc\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, "./.modernizrrc.js")
    }
  }
};

Expose Configuration

Make your config/webpack/environment.js look like this:

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

environment.config.merge(customConfig);

module.exports = environment;

Import Modernizr

Add the following line to app/javascript/packs/application.js :

import modernizr from 'modernizr';

Load Your Pack

Add this to your layout:

<%= javascript_pack_tag "application", defer: true %>

Voila

Load up your site in a browser, inspect, and confirm that (a) modernizr CSS classes have been added to the DOM, and (b) you aren't seeing any webpack compilation errors in the console.

Further Reading

I came upon this question when I was looking to set up modernizr using webpacker in a Rails 5 app, saw the question was unanswered, and figured it out myself. If you want to know how all of this works, I suggest reading the docs for webpacker and webpack-modernizr-loader .