@nx/web:webpack Cannot use multiple configuration on custom config file option

[sidmonta]

Current Behavior

Assigning a custom webpack configuration file does not support the ability to use multiple configurations, as webpack allows.

Expected Behavior

Being able to define multiple configurations in my custom webpack.config.ts file to feed to webpack

Steps to Reproduce

1. set a custom webpack config option in build target options on project.json.

     ...
     "targets": {
        "build": {
          "executor": "@nrwl/web:webpack",
          "outputs": ["{options.outputPath}"],
          "defaultConfiguration": "production",
          "options": {
           ...
            "webpackConfig": "apps/app-name/webpack.config.ts"
          },
          ...
   

2. define custom webpack configuration

     // ...
     module.exports = (config: Configuration, context: any) => {
        const customConfig = {
            // ...
            output: {
                path: 'other/path',
                //...
            },
            // ...
        }
        return [merge(commonConfig, customConfig), config];
     }
     // ...

3. Run yarn nx app-name:build

Failure Logs

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property '0'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
   -> Options object as provided by the user.
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           0: …
         }
       })
     ]

Environment

 >  NX   Report complete - copy this into the issue template

   Node : 17.4.0
   OS   : linux x64
   yarn : 1.22.17
   
   nx : 13.8.3
   @nrwl/angular : undefined
   @nrwl/cli : 13.8.3
   @nrwl/cypress : 13.8.3
   @nrwl/detox : undefined
   @nrwl/devkit : 13.8.3
   @nrwl/eslint-plugin-nx : 13.8.3
   @nrwl/express : undefined
   @nrwl/jest : 13.8.3
   @nrwl/js : 13.8.3
   @nrwl/linter : 13.8.3
   @nrwl/nest : undefined
   @nrwl/next : undefined
   @nrwl/node : 13.8.3
   @nrwl/nx-cloud : undefined
   @nrwl/react : 13.8.3
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.8.3
   @nrwl/tao : 13.8.3
   @nrwl/web : 13.8.3
   @nrwl/workspace : 13.8.3
   typescript : 4.5.5
   rxjs : 6.6.7
   ---------------------------------------

[sidmonta]

I've created a basic example to show the error:

https://stackblitz.com/edit/github-rrik4f-u61kmx?file=apps/my-app/webpack.config.ts

[amri04]

Hi @sidmonta , could the same be done for the node executor ?
I have exactly the same problem there.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.