Babel 7 Not Compiling node_modules? Fix IE11 SCRIPT1002 Syntax Error from Class Syntax

Table of Contents#

Understanding the SCRIPT1002 Error in IE11
Why Babel 7 Ignores node_modules by Default
Root Cause: Un transpiled Class Syntax in Dependencies
Step-by-Step Solution: Compile Specific node_modules
Potential Pitfalls and Best Practices
Troubleshooting: When the Error Persists
Conclusion
References

Understanding the SCRIPT1002 Error in IE11#

IE11’s JavaScript engine (Chakra) lacks support for many ES6+ features, including class syntax, arrow functions (=>), and const/let block scoping. When it encounters these, it throws SCRIPT1002: Syntax error, pointing to the line with invalid syntax.

For example, if a dependency includes:

class MyComponent {
  constructor() { /* ... */ }
}

IE11 will fail to parse the class keyword, triggering the error.

Why Babel 7 Ignores node_modules by Default#

Babel is designed to transpile your code, not third-party dependencies. There are two key reasons for this:

Performance: Transpiling all node_modules would drastically slow down builds, as the node_modules folder often contains thousands of files.
Avoiding Conflicts: Many dependencies are already transpiled to ES5 (e.g., libraries like React or Lodash). Re-transpiling them could break functionality or introduce bugs.

By default, Babel excludes node_modules via its ignore configuration (which includes node_modules/**). This is why your source code (in src/) gets transpiled, but dependencies do not.

Root Cause: Un transpiled Class Syntax in Dependencies#

The SCRIPT1002 error occurs when a dependency in node_modules includes untranspiled ES6+ code (like class). This is common in:

Modern libraries targeting ES modules (using the module field in package.json instead of main).
Smaller packages or newer libraries that assume consumers will handle transpilation.

For example, a package might ship with:

// package.json (dependency)
{
  "main": "dist/index.js", // ES5 build (if provided)
  "module": "src/index.js"  // ES6+ source (used by bundlers like Webpack/Rollup)
}

If your bundler (e.g., Webpack) prioritizes the module field (common for tree-shaking), it will import the untranspiled src/index.js, leading to IE11 errors.

Step-by-Step Solution: Compile Specific node_modules#

To fix the error, we need to tell Babel to transpile only the problematic dependency (not all node_modules). Here’s how:

4.1 Identify the Problematic Module#

First, pinpoint which dependency is causing the syntax error.

How to find it:

Open IE11 and navigate to your app. When the error occurs, press F12 to open the Developer Tools.
Go to the Console tab. The error message will show a file path, e.g., http://localhost:3000/static/js/1.chunk.js (Webpack chunk).
Enable Source Maps (in DevTools > Settings > Debugger > "Enable source maps") to see the original file. The path will often include node_modules/<module-name>/..., revealing the culprit (e.g., node_modules/my-problem-module/src/index.js).

4.2 Check if the Module Already Has an ES5 Build#

Before transpiling, check if the module provides an ES5-compatible build. Look at its package.json:

If it has a main field pointing to dist/ or lib/ (e.g., dist/index.js), that’s likely ES5.
If main points to src/ (untranspiled) and there’s no dist/ folder, the module needs transpilation.

If an ES5 build exists, configure your bundler to use it instead of the ES6+ source. For Webpack, this can be done with resolve.mainFields:

// webpack.config.js
module.exports = {
  resolve: {
    mainFields: ['main', 'module'] // Prioritize "main" (ES5) over "module" (ES6+)
  }
};

4.3 Configure Babel to Include the Module#

If the module lacks an ES5 build, configure Babel to transpile it.

Update Babel Configuration:
Babel 7 uses babel.config.json (or .js) for project-wide configuration (instead of .babelrc, which is file-relative). This ensures the config applies to node_modules files.

Create/modify babel.config.json in your project root:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11" // Ensure IE11 is a target
        },
        "useBuiltIns": "usage", // Auto-inject polyfills (optional but recommended)
        "corejs": 3 // Requires core-js@3 as a dependency
      }
    ]
  ],
  "include": [
    // Include your source code (default)
    "./src/**/*",
    // Include the problematic module(s)
    "./node_modules/my-problem-module/**/*" // Replace with your module
  ]
}

The include array explicitly tells Babel to transpile files matching these glob patterns.
@babel/preset-env with targets: { ie: "11" } ensures transpilation to ES5.

4.4 Update Webpack (or Your Bundler) Configuration#

Bundlers like Webpack also exclude node_modules from loaders by default. You’ll need to update your Webpack config to process the problematic module with Babel.

Webpack Configuration Example:
In webpack.config.js, modify the module.rules for JavaScript files to include the dependency:

// webpack.config.js
const path = require('path');
 
module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [
          // Exclude all node_modules EXCEPT the problematic one
          (modulePath) => {
            return (
              /node_modules/.test(modulePath) && 
              !/node_modules\/my-problem-module/.test(modulePath) // Allow transpilation of this module
            );
          }
        ],
        use: {
          loader: 'babel-loader',
          options: {
            configFile: path.resolve(__dirname, 'babel.config.json') // Path to your Babel config
          }
        }
      }
    ]
  }
};

The exclude function skips all node_modules except my-problem-module.

4.5 Test in IE11#

Rebuild your project and test in IE11. The SCRIPT1002 error should now be resolved.

Pro Tip: Use BrowserStack or IE11 Developer Tools for testing if you don’t have IE11 installed locally.

Potential Pitfalls and Best Practices#

Avoid Transpiling All node_modules: Transpiling every dependency will slow builds and may break libraries that expect ES5. Always target specific modules.
Check for ES5 Builds First: As in Step 4.2, prefer using a dependency’s ES5 build (via main field) over transpiling.
Use corejs for Polyfills: If the module uses ES6+ features like Promise or Array.prototype.includes, @babel/preset-env with useBuiltIns: "usage" and corejs: 3 will auto-inject polyfills for IE11.
Pin Dependency Versions: Ensure the dependency version is fixed (e.g., [email protected] in package.json) to avoid unexpected updates breaking transpilation.

Troubleshooting: When the Error Persists#

If the error continues, check these common issues:

🔍 Is the Module Correctly Included?#

Verify the include path in babel.config.json matches the module’s location. Use absolute paths for clarity:

"include": [path.resolve(__dirname, "node_modules/my-problem-module/**/*")]

🔍 Babel Preset-Env Targets#

Ensure @babel/preset-env is configured to target IE11:

"targets": { "ie": "11", "esmodules": false }

The esmodules: false flag ensures transpilation to ES5 (not ES modules).

🔍 Source Maps#

If the error points to a Webpack chunk (e.g., 1.chunk.js), enable source maps to trace the original file:

// webpack.config.js
module.exports = {
  devtool: 'inline-source-map' // For development
};

🔍 Dependency Subfolders#

Some modules have nested ES6+ files (e.g., node_modules/my-module/src/utils/helper.js). Use ** in the glob pattern to include all subfolders:

"include": ["./node_modules/my-problem-module/**/*"]

Conclusion#

The SCRIPT1002 error in IE11 is caused by untranspiled ES6+ syntax in node_modules. By identifying the problematic module, configuring Babel to transpile it selectively, and updating your bundler settings, you can resolve the error without sacrificing build performance.

Remember: Transpile only what’s necessary, check for existing ES5 builds, and always test in IE11 to confirm fixes.