Babel doesn't process node_modules - no excludes, no .babelrc

Question

This has been asked multiple times, and the issues always comes down to either a presence of exclude in babel config, or babel config being in .babelrc instead of babel.config.json. In my case it's something else. Here's my babel.config.json:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/env"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    [
      "module-resolver",
      {
        "alias": {
          "@common": "./src/common",
          "@files": "./src/files",
          "@settings": "./src/settings",
        }
      }
    ]
  ]
}

Here's my webpack.config.js

const path = require('path');
const webpack = require('webpack');

const ENV = process.env;
const scriptDir = path.join(__dirname, 'scripts');

const config = {
  devtool: ENV.WEBPACK_DEVTOOL || 'eval-source-map',

  mode: 'development',

  entry: {
    app: ['./src/app.js'],
  },

  output: {
    path: scriptDir,
    publicPath: '/',
  },

  target: ['web', 'es5'],

  module: {
    rules: [
      {
        test: path.resolve(__dirname, 'node_modules/ajv'),
        use: 'null-loader',
      },
      {
        test: /\.(js|cjs|jsx)$/,
        use: ['babel-loader'],
        include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/nanoid')],
      },
      {
        test: /\.json$/,
        use: ['json-loader'],
        type: 'javascript/auto',
      },
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.min\.js$/,
        exclude: [/react/, /node_modules/],
        use: ['script-loader'],
      },
      {
        test: /node_modules\/vfile\/core\.js/,
        use: [
          {
            loader: 'imports-loader',
            options: {
              type: 'commonjs',
              imports: ['single process/browser process'],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(ENV.NODE_ENV),
    }),
  ],
  resolve: {
    symlinks: false,
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    alias: {
      '@common': path.resolve(__dirname, './src/common'),
      '@files': path.resolve(__dirname, './src/files'),
      '@settings': path.resolve(__dirname, './src/settings'),
    },
    fallback: {fs: false, path: require.resolve('path-browserify')},
  },
};

if (ENV.NODE_ENV === 'production') {
  config.devtool = 'hidden-source-map';
  config.mode = 'production';
}

if (ENV.WEBPACK_PLUGIN) {
  const Plugin = require(ENV.WEBPACK_PLUGIN);
  config.plugins.push(new Plugin());
}

module.exports = config;

When I run the output bundle in IE11, I'm seeing an arrow function, and it comes specifically from package nanoid. As you see above, I tried to explicitly include it. Tried without the include as well.

I'm on Babel 7.12 and Webpack 5.4.

So what is still missing in the config? Why is babel still refusing to parse (some of the) node_modules?

Answer 1

The solution was either to remove the include as suggested by @loganfsmyth in the comments above, or to set include to something more general:

include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')]