Rails Webpacker在IE11及更低版本出现'app未定义'错误求助

Hey Jake, let's tackle those IE11 issues head-on—old browsers like IE11 can be total troublemakers, but we can work through this step by step. Here's what's likely causing your problems and how to fix them:

1. Fixing the SCRIPT5009: 'app' is undefined Error #

This is almost certainly an issue with untranspiled ES6+ code or scoping problems that IE11 can't handle. Let's break down the fixes:

a. Ensure Babel is Transpiling to ES5 for IE11 #

Your UglifyJS tweak alone won't cut it—you need to make sure Babel is converting all your code (including dependencies) to ES5. Update your Babel configuration (either .babelrc or babel.config.js) to target IE11 and include polyfills:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11"
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

The useBuiltIns: "usage" setting will automatically add polyfills for missing ES6+ APIs that IE11 doesn't support (like Promise, Array.prototype.includes, etc.).

b. Make app a Global Variable #

IE11 has quirks with block-scoped variables (const/let). Instead of defining app locally, attach it to the window object to ensure it's accessible globally:

// In home.js
window.app = window.app || {};

app.home = function() {
  // Your home function logic here
};

// Then call it on DOM load
document.addEventListener('DOMContentLoaded', function() {
  app.home();
});

c. Transpile Node Modules (Like tiny-slider) #

By default, Webpack often skips transpiling code in node_modules, but many modern libraries (including tiny-slider) use ES6 syntax that IE11 can't parse. Update your Webpack environment config (config/webpack/environment.js) to include tiny-slider in Babel's transpilation:

const { environment } = require('@rails/webpacker');

// Add tiny-slider to the list of modules Babel processes
environment.loaders.get('babel').include.push(/node_modules\/tiny-slider/);

module.exports = environment;

d. Verify the X-UA-Compatible Meta Tag #

You already added the tag, but make sure it's the first tag inside your <head>—IE prioritizes the first X-UA-Compatible directive, and any preceding tags can cause it to ignore the setting:

head
  meta http-equiv='X-UA-Compatible' content='IE=edge'
  title Your App Name
  // Rest of your head content

2. Resolving tiny-slider's 304 Status Code in IE11 #

A 304 status means the browser is loading a cached version of the file. IE11 has aggressive caching behavior, so here's how to fix it:

• Use Hashed Filenames: Webpack can automatically add content hashes to your bundled files, ensuring browsers load the latest version when code changes. In your Webpack config, ensure the output filename includes a hash:

  // config/webpack/production.js
  module.exports = {
    output: {
      filename: '[name]-[contenthash].js',
      chunkFilename: '[name]-[contenthash].chunk.js'
    }
    // ... other config
  };
  

• Clear IE11 Cache Manually: IE11 holds onto cached files tightly. Go to Internet Options > General > Browsing history > Delete and clear temporary internet files before testing.
• Adjust Server Cache Headers: If you have control over server settings, set a shorter max-age for static assets or add Cache-Control: no-cache for development (but avoid this in production for performance).

Final Testing Tips #

• Always test IE11 with the developer tools open and disable caching (in the Network tab) to ensure you're loading fresh code.
• Check the IE11 console for additional errors—sometimes the app undefined error is a symptom of an earlier untranspiled code error that halts script execution.

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