自定义构建的Modernizr测试失效问题求助

Hey there, let’s figure out why your custom Modernizr setup is giving you that confusing behavior—where it correctly adds classes to your <html> tag but returns undefined for your test checks. It’s a weird contradiction, but there are a few common fixes to try:

1. You Forgot to Enable Test Exports in Your Build #

Modernizr’s default behavior adds classes to the <html> tag, but it doesn’t automatically expose test results as global variables or module exports unless you explicitly enable that in your build config. That’s why you see the classes but can’t access Modernizr.yourTestName directly.

Fix: #

Re-run your Modernizr build process, and look for the "Exports" section in the configuration. Make sure to:

• Check the box for "Add Modernizr to the window object" if you want to access it globally, or
• Select CommonJS/ES Module export if you’re importing it via webpack as a module.
  Rebuild and replace your modernizr.js file in node_modules, then test again.

2. Webpack Isn’t Resolving or Shimming Modernizr Correctly #

If you’re importing Modernizr like a regular module (import Modernizr from 'modernizr') but your build doesn’t properly export a module, webpack might be pulling in an empty or incomplete object. Alternatively, if Modernizr is meant to be a global script, webpack’s module wrapping could be hiding it from your code.

Fixes: #

• Use ProvidePlugin to inject Modernizr as a global:
  Add this to your webpack.config.js to make Modernizr available everywhere without importing it:

  const webpack = require('webpack');
  const path = require('path');
  
  module.exports = {
    // ... other config
    plugins: [
      new webpack.ProvidePlugin({
        Modernizr: 'modernizr'
      })
    ],
    resolve: {
      alias: {
        modernizr$: path.resolve(__dirname, './node_modules/modernizr/modernizr.js')
      }
    }
  };
  

• Check for module-specific build files: Some Modernizr builds generate separate files for ES modules (like modernizr-esm.js). If yours has one, import that instead of the default modernizr.js.

3. Your Code Is Running Before Modernizr Finishes Tests #

Modernizr runs some tests asynchronously (like certain image format or API checks). If you try to access test results immediately on page load, you might catch them before they’ve completed—hence the undefined—even though the classes get added later once tests finish.

Fixes: #

• Use Modernizr’s event listeners: Hook into the test-specific event to get results once they’re ready:

  // Replace "webp" with your test name
  Modernizr.on('webp', function(isSupported) {
    console.log('WebP support:', isSupported);
    // Handle the result here
  });
  

• Wait for the DOM to be fully loaded: Wrap your code in a DOMContentLoaded listener to ensure Modernizr has time to run all tests:

  document.addEventListener('DOMContentLoaded', function() {
    console.log('Modernizr test result:', Modernizr.yourTestName);
  });
  

4. Your Build Includes Async Tests Without Proper Handling #

If your custom build includes tests that run asynchronously (e.g., webp, blob), accessing their results synchronously will always return undefined until the test completes. The <html> class gets added once the test finishes, but your early check doesn’t catch that.

Fix: #

Stick to the event listener approach mentioned above for async tests. Modernizr will fire the event as soon as the test result is available, so you’ll get the correct value every time.

Start with verifying your Modernizr build’s export settings—that’s the most likely culprit here. If that doesn’t fix it, move on to checking webpack’s module handling and your code’s execution timing.

内容的提问来源于stack exchange，提问作者Ben Carey