Can not compile code under the node_modules

[kogai]

I'm submitting a bug report

Webpack Version:
4.25.1

Babel Core Version:
7.1.5

Babel Loader Version:
8.0.4

Please tell us about your environment:
MacOS 10.13.6

Current behavior:

I want to compile codes through the babel also exists under the node_modules.

Expected/desired behavior:

The bebel compiles codes under the node_modules properly, but without my own .babelrc.
(In the other word, it compiles without any presets and also plugins)

I'd created a repository which reproduces the behavior.

What is the expected behavior?

I'd expect if babel-loader compiles also code under the node_modules, those function using arrow expression might be function literal, too like here.

[kogai]

I got progress a bit, if I convert .babelrc to babel.config.js with same configuration, babel-loader worked as expected.

That's odd 🤔

[nicolo-ribaudo]

It's because .babelrc doesn't "leak" across different packages (delimited by package.json)

[xFloooo]

I also fell into this trap...

[sbrandwoo]

In previous versions of babel, webpack and babel-loader I could do the following, to transpile certain dependencies in node_modules (all our internal projects start webapp-):

{
    test: /\.js$/,
    include: {
        or: [{ not: [/node_modules/] }, /node_modules\/webapp-/],
    },
    use: ['babel-loader'],
},

This is no longer true when defining config inside .babelrc, only when config is in babel.config.js.

[zhaoyao91]

same bug here

with

"webpack": "^5.18.0",
"babel-loader": "^8.2.2",

If I use .babelrc, the files in node_modules are not compiled.

workaround is to change .babelrc to babel.config.js or set options in the webpack rule config.

[nicolo-ribaudo]

It's not a bug.

• .babelrc means "only apply this config to the specific package containing this config file"
• babel.config.js (or babel.config.json) means "apply this config to the whole project.

https://babeljs.io/docs/en/config-files

[stevenChen2022]

I've tried the approach above. But still got a complie error.

babel.config.json:

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
}

webpack.config.js:

/* eslint-disable no-undef */

const devCerts = require("office-addin-dev-certs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

const urlDev = "https://localhost:3000/";
const urlProd = "xxxx"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION

async function getHttpsOptions() {
  const httpsOptions = await devCerts.getHttpsServerOptions();
  return { cacert: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
}

module.exports = async (env, options) => {
  const dev = options.mode === "development";
  const config = {
    target: ["web", "es5"],
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
      vendor: ["react", "react-dom", "core-js", "@fluentui/react"],
      taskpane: ["react-hot-loader/patch", "./src/taskpane/index.js"],
      commands: "./src/commands/commands.js",
    },
    output: {
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".html", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.(jsx|js)$/,
          use: [
            "react-hot-loader/webpack",
            {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"],
              },
            },
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: "html-loader",
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
          type: "asset/resource",
          generator: {
            filename: "assets/[name][ext][query]",
          },
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
      ],
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "assets/*",
            to: "assets/[name][ext][query]",
          },
          {
            from: "manifest*.xml",
            to: "[name]" + "[ext]",
            transform(content) {
              if (dev) {
                return content;
              } else {
                return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
              }
            },
          },
        ],
      }),
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
        template: "./src/taskpane/taskpane.html",
        chunks: ["taskpane", "vendor", "polyfill"],
      }),
      new HtmlWebpackPlugin({
        filename: "commands.html",
        template: "./src/commands/commands.html",
        chunks: ["commands"],
      }),
      new webpack.ProvidePlugin({
        Promise: ["es6-promise", "Promise"],
      }),
      new webpack.ProvidePlugin({
        "React": "react",
      }),
    ],
    devServer: {
      hot: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
      https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      port: process.env.npm_package_config_dev_server_port || 3000,
    },
  };

  return config;
};

[JLHwung]

@stevenChen2022 It seems to me that @restart/ui in node_modules are not transpiled for IE11, please add @restart/ui to the babel-loader webpack rule.

{
    test: /\.(jsx|js)$/,
    exclude: {
      and: [/node_modules/], // Exclude libraries in node_modules ...
      not: [
        // Except for a few of them that needs to be transpiled because they use modern syntax
        /@restart[\\/]ui/
      ]
    },
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', { targets: "ie 11" }]
        ]
      }
    }
  }

See also https://github.com/babel/babel-loader#some-files-in-my-node_modules-are-not-transpiled-for-ie-11

Closing this issue as babel-loader is working as expected.