title: Modernizr.prefixed is not a function
body: <p>I'm trying to have webpack load Modernizr for me to use in my first run at a react app. I need to have webpack load modernizr on<code>componentDidMount</code> and be able to run transistions for the overlay menu to work. I'm not sure that I've even got it to load correctly as I can't find it in the output via inspection tools. I'm really struggling. As per the installation guide <a href="https://github.com/itgalaxy/webpack-modernizr-loader" rel="nofollow noreferrer">here</a> I've followed the steps for use with <code>webpack 2</code>(version installed) I'm about ready to give up and do a cry! Any pointers or help would be great as I'm very much a newbie cheers</p>
  
  <p>The error I get is:</p>
  
  <pre><code>Uncaught TypeError: Modernizr.prefixed is not a function
  at Object.componentDidMount (ModScript.js:14)
  at ReactCompositeComponent.js:265
  at measureLifeCyclePerf (ReactCompositeComponent.js:75)
  at ReactCompositeComponent.js:264
  at CallbackQueue.notifyAll (CallbackQueue.js:76)
  at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
  at ReactReconcileTransaction.closeAll (Transaction.js:206)
  at ReactReconcileTransaction.perform (Transaction.js:153)
  at batchedMountComponentIntoNode (ReactMount.js:126)
  at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
  </code></pre>
  
  <p>My webpack config:</p>
  
  <pre><code>var autoprefixer = require('autoprefixer');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  var getClientEnvironment = require('./env');
  var paths = require('./paths');
  var path = require('path');
  
  const modernizrOptions = {
      options: [
        "domPrefixes",
        "prefixed",
        "testAllProps",
        "testProp",
        "html5shiv",
        "setClasses"
      ],
      'feature-detects': [
        'test/css/transitions'
      ],
  };
  
  var publicPath = '/';
  var publicUrl = '';
  var env = getClientEnvironment(publicUrl);
  
  module.exports = {
    devtool: 'cheap-module-source-map',
    entry: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      paths.appIndexJs
    ],
    output: {
      path: paths.appBuild,
      pathinfo: true,
      filename: 'static/js/bundle.js',
      publicPath: publicPath
    },
    resolve: {
      fallback: paths.nodePaths,
      extensions: ['.js', '.json', '.jsx', ''],
      alias: {
        'react-native': 'react-native-web',
        modernizr$: path.resolve(__dirname, "../src/modernizrrc.js") // You can add comment "Please do not delete this file" in this file
      }
    },
  
    module: {
      rules: [
          {
              loader: `webpack-modernizr-loader`,
              options: modernizrOptions,
              test: /modernizr$/
          }
      ],
      preLoaders: [
        {
          test: /\.(js|jsx)$/,
          loader: 'eslint',
          include: paths.appSrc,
        }
      ],
      loaders: [
        {
          exclude: [
            /\.html$/,
            /\.(js|jsx)$/,
            /\.css$/,
            /\.json$/,
            /\.svg$/,
            /\.sass$/,
            /\.scss$/,
          ],
          loader: 'url',
          query: {
            limit: 10000,
            name: 'static/media/[name].[hash:8].[ext]'
          }
        },
        {
          test: /\.(js|jsx)$/,
          include: paths.appSrc,
          loader: 'babel',
          query: {
            cacheDirectory: true
          }
        },
        {
          test: /\.css$/,
          loader: 'style!css?importLoaders=1!postcss'
        },
        {
          test: /\.json$/,
          loader: 'json'
        },
        // "file" loader for svg
        {
          test: /\.svg$/,
          loader: 'file',
          query: {
            name: 'static/media/[name].[hash:8].[ext]'
          }
        },
        // SASS handler to compile the SCSS
        {
          test: /\.scss$/,
          loaders: ['style', 'css', 'sass']
        },
        {
          test: /\.png$/,
          loader: 'file',
          query: {
            name: 'static/media/[name].[hash:8].[ext]'
          }
        },
      ]
    },
    postcss: function() {
      return [
        autoprefixer({
          browsers: [
            '&gt;1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie &lt; 9',
          ]
        }),
      ];
    },
    plugins: [
      new InterpolateHtmlPlugin({
        PUBLIC_URL: publicUrl
      }),
      new HtmlWebpackPlugin({
        inject: true,
        template: paths.appHtml,
      }),
      new webpack.DefinePlugin(env),
      new webpack.HotModuleReplacementPlugin(),
      new CaseSensitivePathsPlugin(),
      new WatchMissingNodeModulesPlugin(paths.appNodeModules)
    ],
    node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    }
  };
  </code></pre>
  
  <p>Module file: </p>
  
  <pre><code>import React from 'react';
  import classie from 'classie';
  const Modernizr = require('modernizr');
  
  var ModScript = React.createClass({
    componentDidMount() {
      var triggerBttn = document.getElementById( 'trigger-overlay' ),
          overlay     = document.querySelector( 'div.overlay' ),
          closeBttn   = overlay.querySelector( 'button.overlay-close' );
      console.log(triggerBttn);
      let transEndEventNames = {
        'WebkitTransition'  : 'webkitTransitionEnd',
        'MozTransition'     :       'transitionend',
        'OTransition'       :      'oTransitionEnd',
        'msTransition'      :     'MSTransitionEnd',
        'transition'        :       'transitionend'
      },
      transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
      support = { transitions : Modernizr.csstransitions };
  
      function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
          classie.remove( overlay, 'open' );
          classie.add( overlay, 'close' );
          var onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
              if( ev.propertyName !== 'visibility' ) return;
              this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            classie.remove( overlay, 'close' );
          };
          if( support.transitions ) {
            overlay.addEventListener( transEndEventName, onEndTransitionFn );
          }
          else {
            onEndTransitionFn();
          }
        }
        else if( !classie.has( overlay, 'close' ) ) {
          classie.add( overlay, 'open' );
        }
      }
  
      triggerBttn.addEventListener( 'click', toggleOverlay );
      closeBttn.addEventListener( 'click', toggleOverlay );
  
    },
    render() {
      return(
        &lt;div&gt;&lt;/div&gt;
      )
    }
  
  });
  
  export default ModScript;
  </code></pre>