如何通过Babel+core-js实现IE兼容？Webpack配置后IE报SCRIPT5002错误

Let's break down why this error is happening and how to fix it. The root issue here is that your Webpack rule order and Svelte compilation settings aren't properly handling ES6+ features (like Symbol) that IE11 doesn't support—even though you're using core-js@3.

Why the Error Occurs #

Your current Webpack rules process .svelte files with babel-loader before svelte-loader. That means Babel is trying to parse raw Svelte template code instead of the compiled JavaScript output from Svelte. As a result, Babel can't identify and polyfill the Symbol usage that Svelte generates during compilation. IE11 doesn't have native Symbol support, so when that un-polyfilled code runs, it throws the "Function expected" error.

Step-by-Step Fixes #

1. Reorder Your Webpack Rules

First, adjust your rules so that .svelte files are compiled to JavaScript with svelte-loader first, then processed by babel-loader to add polyfills. Here's the corrected rule setup:

rules: [
  // Handle .svelte files: compile first, then polyfill
  { 
    test: /\.svelte$/, 
    exclude: /node_modules/, 
    use: [
      { 
        loader: 'babel-loader', 
        options: { 
          presets: [ 
            ['@babel/preset-env', { 
              targets: { 'ie':'11' }, 
              useBuiltIns: "usage", 
              corejs: 3 
            }] 
          ],
          sourceType: 'unambiguous'
        } 
      },
      { 
        loader: 'svelte-loader', 
        options: { 
          // emitCss: true, 
          hotReload: true,
          // Add this to generate IE11-compatible code
          compilerOptions: {
            legacy: true
          }
        } 
      }
    ]
  },
  // Handle regular .js/.mjs files
  { 
    test: /\.m?js$/, 
    exclude: /\bcore-js\b/, 
    use: { 
      loader: 'babel-loader', 
      options: { 
        presets: [ 
          ['@babel/preset-env', { 
            targets: { 'ie':'11' }, 
            useBuiltIns: "usage", 
            corejs: 3 
          }] 
        ],
        sourceType: 'unambiguous'
      } 
    } 
  },
  // Add your other rules (CSS, assets, etc.) here
]

Note: Webpack processes loaders in reverse order within the use array, so svelte-loader runs first to compile the template, then babel-loader polyfills the resulting JS.

2. Enable Svelte's Legacy Compilation

The compilerOptions: { legacy: true } setting in svelte-loader tells Svelte to avoid using modern JS features like Symbol in its output, which reduces the number of polyfills you need and ensures better IE11 compatibility.

3. Verify Core-js Installation

Double-check that you have core-js@3 installed as a dependency (not just devDependency, since it's used in production code):

npm install core-js@3 --save

4. Fallback to Manual Polyfill Import (If Needed)

If useBuiltIns: "usage" still isn't injecting all required polyfills, switch to useBuiltIns: "entry" in your Babel preset config, then add these imports to your application's entry file (e.g., main.js):

import 'core-js/stable';
import 'regenerator-runtime/runtime';

This ensures all IE11-compatible polyfills are loaded upfront, before any application code runs.

Testing the Fix #

After making these changes, rebuild your bundle and test it in IE11. The Symbol-related error should disappear because:

• Svelte is now generating legacy-compatible code
• Babel is properly processing the compiled JS to inject missing polyfills
• Core-js is providing the Symbol implementation IE11 needs

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