Custom-Webpack executes Babel plugin correctly, but output does not appear in final files

[lucasvog]

Bug Description

We tried to insert a custom Babel plugin that modifies certain function calls if they are in an async function. For that, we use a local plugin, which we inserted via custom-webpack. Everything seems to work fine at first; the plugin is called, the function calls are found and modified by our plugin. However, when we checked in the /dist/ folder, the modified code was not used for the other angular build steps. Instead, apparently the original code is processed. So it seems like the custom config is used, but the output of the plugin is bypassed. We suspect that might be a bug, as the same setup with an ejected React app works just fine.

Minimal Reproduction

angular.json

...
"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js",
              "replaceDuplicatePlugins": true,
              "mergeRules": {
                "rules": "append"
              }
            },
...

./custom-webpack.config.js

const webpack = require('webpack');
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        include: /src/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['../../plugin.js',['@babel/plugin-proposal-decorators', { "legacy": true }]]
          }
        }
      }
    ],
}
};

We had to include @babel/plugin-proposal-decorators, otherwise an error was thrown. However, with the setup shown above, no error is thrown. We also tried all other mergeRules, however with no luck.

Any help or hints would be greatly appreciated.

Expected Behavior

The output code of a Babel plugin included with custom-webpack should have been included in the files that are saved in the /dist/ folder. The same setup works without problems using React.

Environment

Libs
- @angular-devkit/architect: 0.1401.2
- @angular-devkit/build-angular: 14.1.2
- @angular-devkit/core: 14.1.2
- @angular-devkit/schematics: 14.1.2
- @schematics/angular: 14.1.2
rxjs: 7.4.0
typescript: 4.7.4

For Tooling issues:
- Node version: 16.17.0
- npm 8.15.0
- Platform:  Mac (Intel, darwin x64)

Others:
- @angular-builders/custom-webpack: 14.0.0

[just-jeb]

Hi, could you please create a minimal reproduction repo?

[lucasvog]

@just-jeb see here for the minimal example: https://github.com/lucasvog/angular-builders-issue-1246

Sorry that it took me some days to reduce it down. The goal of the included babel plugin is to wrap every function call that is inside an async function in a wrapper.

Steps to reproduce:

• go into the angular-framework folder

• npm install

• ng build

  • look at the console output. You should see that the function calls are found and wrapped.

• look in dist/main.xxx.js. There at the end of the file, you should find functionWithDestinctNameToFindInBuild(). This function should be wrapped, as well as the other function 'asyncTestFunction()'. Both are called in the app.component.ts, but are both in their original state.

• The babel-loader ist in custom-webpack.config.js

• The custom config is loaded in angular.json. I also tried all other mergeRules, however, only apped gave me the correct output. In theory, the babel plugin should be called first, but maybe I am wrong here.

Everything looks like as if it works correctly, but the output in dist looks like as if the plugin was never called or the output was not used.