Webpack + Babel is transpiling Webpack loaders, how do I prevent this?

Question

I thought Webpack + Babel would only transpile application code, not code used for the Webpack build. However, it seems to be transpiling code from css-loader, mini-css-extract-plugin, etc, which is causing the following error:

ERROR in ./styles/main.scss
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function

If I add the following to exclude, this error is fixed:

  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        include: [APP_ROOT, path.resolve('./node_modules')],
        exclude: [
          path.resolve('./node_modules/mini-css-extract-plugin'),
          path.resolve('./node_modules/css-loader'),
        ],
        use: [
          'babel-loader',
        ],
      },
      ...

I thought I wouldn't need this because Babel shouldn't be transpiling packages used for Webpack's build process. I added node_modules to include because some packages use code that wouldn't work in older browsers.

Answer 1

The reason for that could be related to the include option on your rules, why dont you try to put the reference of node_modules in the resolve option, this way webpack looks through the declared entry and parses what it needs to resolve but excluding from transpiling the declared exclusions.

entry: SRC_DIR + '/main.js',
resolve: {
    extensions: ['.js'],
    modules: [SRC_DIR, 'node_modules']
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['eslint-loader']
        }
    ]
}