Problem Overview

During applicasion development, projects often depend on numerous third-party npm packages. While many of these libraries utilize modern ECMAScript syntax, their publication state varies—some are transpiled using tools like Babel, TypeScript compiler, or esbuild before release, while others are published in their original form.

When Webpack processes such untranspiled packages, compatibility issues may arise, particularly when modern JavaScript features aren't supported in target environments.

Root Cause Analysis

Consider a scenario involving the screenfull library. If this package contains optional chaining operators (?.) and your Webpack configuration excludes the entire node_modules directory from Babel processing, the modern syntax won't be transformed:

module: {
  rules: [
    {
      test: /\.(?:js|mjs|cjs)$/,
      exclude: /node_modules/,  // Entire node_modules excluded
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ]
        }
      }
    }
  ]
}

Solution Approaches

To resolve this, modify the exclusion criteria to allow specific package transpilation. Webpack's exclude and include properties accept various condition formats:

• String: Matches paths starting with the specified string (absolute directory or file paths)
• RegExp: Tests input against the pattern
• Function: Receives filepath and returns boolean for inclusion decision
• Array: Satisfies condition if any array element matches
• Object: Requires all defined conditions to be met

Method 1: Object-based exclusion

module: {
  rules: [
    {
      test: /\.(?:js|mjs|cjs)$/,
      exclude: {
        and: [/node_modules/], 
        not: [/screenfull/]  // Exclude node_modules except screenfull
      }
    }
  ]
}

Method 2: Function-based exclusion

module: {
  rules: [
    {
      test: /\.(?:js|mjs|cjs)$/,
      exclude: (filepath) => {
        if (/node_modules/.test(filepath)) {
          return !/screenfull/.test(filepath);  // Process screenfull, exclude others
        }
        return false;  // Don't exclude non-node_modules files
      }
    }
  ]
}