How to override nx webpack config from lib

According to the NX API, there is an option to use a custom webpack config inside an application:

https://nx.dev/latest/react/node/build#webpackconfig

Custom webpack config as mentioned below doesn’t work in libs. Works for apps only

short example: webpackConfig": ["@nrwl/react/plugins/webpack", "apps/react-viewer-playground/webpack.config.js"]

long example:

"targets": {
        "build": {
          "executor": "@nrwl/web:build",
          "outputs": ["{options.outputPath}"],
          "options": {
            "outputPath": "dist/apps/react-viewer-playground",
            "index": "apps/react-viewer-playground/src/index.html",
            "main": "apps/react-viewer-playground/src/main.tsx",
            "polyfills": "apps/react-viewer-playground/src/polyfills.ts",
            "tsConfig": "apps/react-viewer-playground/tsconfig.app.json",
            "assets": [
              "apps/react-viewer-playground/src/favicon.ico",
              "apps/react-viewer-playground/src/assets"
            ],
            "styles": [],
            "scripts": [],
            "webpackConfig": ["@nrwl/react/plugins/webpack", "apps/react-viewer-playground/webpack.config.js"]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "apps/react-viewer-playground/src/environments/environment.ts",
                  "with": "apps/react-viewer-playground/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "55mb"
                }
              ]
            }
          }
        },

}

Environment

Node : 14.17.4 OS : darwin x64 yarn : 1.22.11

nx : Not Found @nrwl/angular : Not Found @nrwl/cli : 12.8.0 @nrwl/cypress : 12.8.0 @nrwl/devkit : 12.8.0 @nrwl/eslint-plugin-nx : 12.8.0 @nrwl/express : 12.8.0 @nrwl/jest : 12.8.0 @nrwl/linter : 12.8.0 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : 12.8.0 @nrwl/nx-cloud : Not Found @nrwl/react : 12.8.0 @nrwl/schematics : Not Found @nrwl/tao : 12.8.0 @nrwl/web : 12.8.0 @nrwl/workspace : 12.8.0 @nrwl/storybook : 12.8.0 @nrwl/gatsby : Not Found typescript : 4.3.5

[FrozenPandaz]

Usually, the app is the project that is built with webpack so that is where it needs to be specified, not the lib.

Sorry, this should be better documented in the docs.

That file should export a function with the following signature:

export default function(webpackConfig: WebpackConfig): WebpackConfig

The function takes a webpackConfig and returns a modified config. There’s also some additional information that is passed as well as the config in a second argument

export default function(webpackConfig: WebpackConfig, context): WebpackConfig

[publicvirtualvoid]

I may be wrong here, but setting webpack config config for libs is still good to get the IDE to play along with specific loaders (like yaml for example). Is there a way around this?