Adding @nx/webpack plugin breaks Nativescript build

Question

I have an integrated NX workspace that has an Angular application and a Nativescript app. I am trying to add a Nest.js application via @nx/nest. Whenever I added the new app, it installs the @nx/webpack plugin and adds that plugin to the nx.json. I notice that Nativescript is using its own @nativescript/webpack module.

Anytime that I try to build or serve any of the apps, its immediately throws a type error since it is trying to use @nx/webpack with Nativescript... Here is the error

 NX   Unable to create nodes for apps/nativescript-mobile-app/webpack.config.js using plugin @nx/webpack/plugin. 


         Inner Error: TypeError [ERR_INVALID_ARG_TYPE]: The "paths[1]" argument must be of type string. Received undefined

Has anyone run into this issue with conflicting Webpack modules? Is it possible to specify which apps use NX plugins?

Answer 1

@rthames62 mentioned his issue on the official Discord server and provided me his nx.json & also his NestJS project.json.

If anyone else here is facing this issue;

Adding @nx/nest seems to be adding a global @nx/webpack/plugin into your nx.json instead of adding it into the NestJS project.json as target:

  "plugins": [
    {
      "plugin": "@nx/webpack/plugin",
      "options": {
        "buildTargetName": "build",
        "serveTargetName": "serve",
        "previewTargetName": "preview"
      }
    },
    {
      "plugin": "@nx/eslint/plugin",
      "options": {
        "targetName": "lint"
      }
    }
  ]

Just remove the @nex/webpack/plugin entry.

Now add this to your NestJS project.json:

    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "target": "node",
        "compiler": "tsc",
        "outputPath": "dist/apps/YOUR NEST APP",
        "main": "apps/YOUR NEST APP/src/main.ts",
        "tsConfig": "apps/YOUR NEST APP/tsconfig.app.json",
        "assets": ["apps/YOUR NEST APP/src/assets"],
        "webpackConfig": "apps/YOUR NEST APP/webpack.config.js"
      },
      "target": "node",
      "compiler": "tsc",
      "configurations": {
        "development": {
        },
        "production": {
        }
      }
    }

If you face issues with serving your NestJS app, then change the serve target of your NestJS project.json to:

    "serve": {
      "executor": "@nx/js:node",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "YOUR NEST APP:build"
      },
      "target": "node",
      "compiler": "tsc",
      "configurations": {
        "development": {
          "buildTarget": "YOUR NEST APP:build:development"
        },
        "production": {
          "buildTarget": "YOUR NEST APP:build:production"
        }
      }
    }

Keep in mind to change YOUR NEST APP with the name of your NestJS app.

Glad that I could help.