Unable to resolve @nx/webpack:webpack Error on newly created NX repository, when invoking npm run start

[ognjenjevremovic]

Current Behavior

I created a new NX workspace with npx create-nx-workspace@latest command and have selected Standalone Node app option with Express [https://expressjs.com/] preconfigured.
When I try to run the project (after the workspace has been created and all the dependencies have been installed successfully), with no code changes, I am greeted with the error Unable to resolve @nx/webpack:webpack.

Here's the full log output of the command:

❯ npm run start

> [email protected] start
> nx serve


> nx run test-express:serve:development


 >  NX   Unable to resolve @nx/webpack:webpack.

   Cannot find module '@nx/webpack/package.json'
   Require stack:
   - /home/user/repositories/test-express/node_modules/nx/src/utils/package-json.js
   - /home/user/repositories/test-express/node_modules/nx/src/utils/print-help.js
   - /home/user/repositories/test-express/node_modules/nx/src/command-line/run.js
   - /home/user/repositories/test-express/node_modules/nx/bin/run-executor.js
   Pass --verbose to see the stacktrace.


 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Running target serve for project test-express failed

   Failed tasks:

   - test-express:serve:development

   Hint: run the command with --verbose for more details.

   View structured, searchable error logs at https://nx.app/runs/iurX2PdBWc

Expected Behavior

I should be able to start the Express server application after a clean NX workspace have been created with npx create-nx-workspace@latest command.

GitHub Repo

https://github.com/ognjenjevremovic/test-express

Steps to Reproduce

Steps to reproduce with the provided repository:

1. Clone the repository,
2. Install the necessary dependencies (npm ci),
3. Run the project with either of commands:

• npm run start or,
• npx nx serve test-express.

————————————————————————————————————————————————————————————————————————————————————————————————————————————————

Steps to reproduce with the fresh NX workspace:

1. Create new NX workspace (npx create-nx-workspace@latest),
2. Wait for the setup to finish,
3. cd into the directory,
4. Run the project with either of commands:

• npm run start or,
• npx nx serve test-express.

Nx Report

❯ npx nx report

 >  NX   Report complete - copy this into the issue template

   Node   : 18.12.1
   OS     : linux x64
   npm    : 8.19.2
   Hasher : Native

   nx                 : 16.0.1
   @nx/js             : 16.0.1
   @nx/jest           : 16.0.1
   @nx/linter         : 16.0.1
   @nx/workspace      : 16.0.1
   @nx/devkit         : 16.0.1
   @nx/eslint-plugin  : 16.0.1
   @nx/node           : 16.0.1
   @nrwl/tao          : 16.0.1
   nx-cloud           : 16.0.5
   typescript         : 4.9.5

Failure Logs

Cannot find module '@nx/webpack/package.json'
   Require stack:
   - /home/user/repositories/test-express/node_modules/nx/src/utils/package-json.js
   - /home/user/repositories/test-express/node_modules/nx/src/utils/print-help.js
   - /home/user/repositories/test-express/node_modules/nx/src/command-line/run.js
   - /home/user/repositories/test-express/node_modules/nx/bin/run-executor.js
   Pass --verbose to see the stacktrace.


 >  NX   Running target serve for project test-express failed

   Failed tasks:

   - test-express:serve:development

   Hint: run the command with --verbose for more details.

   View structured, searchable error logs at https://nx.app/runs/iurX2PdBWc

Additional Information

No response

[hirenchauhan2]

I am also having the same issue with my project. I am using NX for my backend serverless API with NestJS. I was on version 13.9.6 initially.

Initial version	Build success?
13.9.6	✅

Start migration.... 🚀

Version	Build success?
13.10.6	✅
14.0.0	✅
14.8.6	✅
15.0.0	✅
15.8.7	✅
15.9.2	✅
16.0.1	✖️

These migrations mostly updated the versions of these following NX dependencies

"@nrwl/cli",
"@nrwl/eslint-plugin-nx",
"@nrwl/jest",
"@nrwl/linter",
"@nrwl/nest",
"@nrwl/node",
"@nrwl/workspace",
"eslint",
"@typescript-eslint/eslint-plugin",
"@typescript-eslint/parser",
"nx",

On version 14.8.6, it upgraded the nestjs version from ^8.0.0 to 9.1.0 for the following dependencies

"@nestjs/common",
"@nestjs/core",
"@nestjs/platform-express",
"@nestjs/swagger",

Up until the version 15 my apps were building fine, but after migrating to 16 it started failing for the missing webpack executor/builder.

On v16.0.1, it seems the package @nrwl/node is just re-exporting from the new @nx/node. But there is something missing in new @nx/node side. It does not have entry for webpack in executors and builders in its executors.json file, nor the actual files for implementation for executor/builder parts

Contents of node_modules/@nrwl/node/executors.json file

{
  "executors": {
    "webpack": {
      "implementation": "@nx/node/src/executors/webpack/webpack.impl",
      "schema": "@nx/node/src/executors/webpack/schema.json",
      "description": "Build a Node application using Webpack."
    },
    "node": {
      "implementation": "@nx/node/src/executors/node/node.impl",
      "schema": "@nx/node/src/executors/node/schema.json",
      "description": "Execute a Node application."
    }
  },
  "builders": {
    "webpack": {
      "implementation": "@nx/node/src/executors/webpack/compat",
      "schema": "@nx/node/src/executors/webpack/schema.json",
      "description": "Build a Node application using Webpack."
    },
    "node": {
      "implementation": "@nx/node/src/executors/node/compat",
      "schema": "@nx/node/src/executors/node/schema.json",
      "description": "Execute a Node application."
    }
  }
}

and here is the new node_modules/@nx/node/executors.json

{
  "executors": {
    "node": {
      "implementation": "./src/executors/node/node.impl",
      "schema": "./src/executors/node/schema.json",
      "description": "Execute a Node application."
    }
  },
  "builders": {
    "node": {
      "implementation": "./src/executors/node/compat",
      "schema": "./src/executors/node/schema.json",
      "description": "Execute a Node application."
    }
  }
}

Is there anything I'm missing here? Or do we have to migrate to other bundlers for the latest version?

Thank you.

[ndcunningham]

@ognjenjevremovic This should be addressed in the next patch. Looks like we missed it. Thanks for reporting
@hirenchauhan2 if the webpack executor is missing could you try and install @nx/webpack If that doesn't work feel free to open a new issue as this will be closed after the PR is merged.

[ognjenjevremovic]

As a workaround (until this is fixed in the future releases of nx), one may do one of the following:

• Configure webpack manually (by installing both @nx/webpack and webpack as dev dependencies in the project, as well as providing the valid webpack configuration),
• Swap the build target of the project to use esbuild instead of webpack (as per versions <= 15.x.x).

For this scenario, let's choose option 2 by installing esbuild and configuring the build target to use the esbuild instead of webpack as the module bundler of our express project.
Disclaimer: This is only a temporary solution, until the issue is addressed by nrwl team. Your application might be having compilation / runtime issues, by using esbuild, to which I am not to be held responsible 🙂.

Steps on addressing the issue with esbuild:

• Install @nx/esbuild package as dev dependency in your project (I used the latest version, which at the time of writing is 16.0.2 - your results may vary, depending on the version of package installed). In order to keep nx packages in sync, I recommend installing the version matching your other @nx/* package versions (ie, @nx/node package version installed in your project).

$ npm i -D @nx/esbuild@latest

• Install esbuild package as dev dependency (I used the latest version, which at the time of writing is 0.17.18 - your results may vary, depending on the version of package installed). Note that the esbuild is a peerDependency of @nx/esbuild package and requires version(s) ~0.17.5, so pick your version of esbuild accordingly. Depending on the time / nx package version(s) published at the time you're following this workaround, it is best to check the peerDependency requirements of the @nx/esbuild package on the following link first and use that version requirements when installing esbuild.

$ npm i -D esbuild@~0.17.5

• Configure the build target of your project.json file, using the following configuration (we're swapping the bundler from default webpack [introduced in version 16 of nx], to esbuild [used in version 15 of nx]:

    "build": {
      "executor": "@nrwl/esbuild:esbuild",
      "outputs": [
        "{options.outputPath}"
      ],
      "defaultConfiguration": "production",
      "options": {
        "platform": "node",
        "outputPath": "dist/<name-of-your-project>",
        "format": [
          "cjs"
        ],
        "bundle": false,
        "main": "src/main.ts",
        "tsConfig": "tsconfig.app.json",
        "assets": [
          "src/assets"
        ],
        "generatePackageJson": true,
        "esbuildOptions": {
          "sourcemap": true,
          "outExtension": {
            ".js": ".js"
          }
        }
      },
      "configurations": {
        "development": {},
        "production": {
          "generateLockfile": true,
          "esbuildOptions": {
            "sourcemap": false,
            "outExtension": {
              ".js": ".js"
            }
          }
        }
      }

• Be sure to replace <name-of-your-project> placeholder, to the actual name of your application (used when you created your nx worksapce, in order to match the dist directory where your application build artifact should be located).

Note: If you're using a different entrypoint file (index.ts, instead of main.ts) or you have your output path configured other than the default one, you will need to update the esbuild configuration provided above accordingly. Which, I assume you know how to do already 🙁.

I hope this workaround helps others run their node / express project(s) on latest nx version 16, without sacrificing on performance, compatibility or compilation / runtime errors, by swapping webpack for esbuild for building their project 🎉 .

[ognjenjevremovic]

@ndcunningham Thanks for your fast reaction on this one. 🚀

I tried installing both webpack and @nx/webpack packages as dev dependencies, however a configuration file for webpack seems to be missing. I didn't dig too deep on how to provide right configuration, so I decided to opt to esbuild instead.
I provided my full workaround above on how I managed to (temporarily) address the issue in my project, by swapping out webpack for esbuild.

I didn't want to rollback to version 15.x of nx (as I wanted to stay up to date with the latest release of nx), so swapping module bundler seemed like the easiest workaround to me.
Of course, I do not recommend this approach above the default configuration setup of nx, however I found it as easy drop-in solution with little steps involved on how to get the project running asap.

Edit

For tracking the resolution of this issue, follow the #16702.

[DanielSchiavini]

After running nx 16 migrations in my existing project, I am now getting:

> nx run api:serve

 >  NX   Unable to resolve @nx/webpack:webpack.

   Cannot find module '@nx/webpack/package.json'
   Require stack:
   - /home/dschiavini/esta/estamap-services/node_modules/nx/src/utils/package-json.js
   - /home/dschiavini/esta/estamap-services/node_modules/nx/src/utils/print-help.js
   - /home/dschiavini/esta/estamap-services/node_modules/nx/src/command-line/run.js
   - /home/dschiavini/esta/estamap-services/node_modules/nx/bin/run-executor.js
   Pass --verbose to see the stacktrace.

I upgraded to 16.0.3 but the error persists. The error looks terribly similar to the issue description.

Manually installing "@nx/webpack" seems to fix the problem. But I haven't found that in the documentation.

[Botosio]

Hello, I have just upgraded to version 16.1.3 and I am still having issues being able to run a nestjs application. I created another nx/nest application to compare the isolated project.json with my existing codebase for a quick fix. There seem to be new properties under targets build:

• `target": "node",
• "compiler": "tsc",
• "isolatedConfig": true,
• "webpackConfig": "{app location}/webpack.config.js"

also the executor for serve is now @nx/js:node while the build should be @nx/webpack:webpack

The last property I did not have and copied the file over to my existing app.

Running serve:production seems to be working

[Woodman9]

I'm broken and remedies described like manual install of @nx/webpack is not working. All of this is associated with installing the @mui/x-data-grid module. Before installing everything ran fine. I installed x-data-grid and then got the following when calling npm start:

Cannot find module '@nrwl/webpack/package.json'
Require stack:

• C:\Users\woodm\source\repository\equesoft\node_modules\nx\src\utils\package-json.js
• C:\Users\woodm\source\repository\equesoft\node_modules\nx\src\utils\package-manager.js
• C:\Users\woodm\source\repository\equesoft\node_modules\nx\bin\init-local.js
• C:\Users\woodm\source\repository\equesoft\node_modules\nx\bin\nx.js
  Pass --verbose to see the stacktrace.

Then I did what was suggested and did npm install @nx/webpack. Now when I npm start I get the following:

NX Successfully ran target serve for project ingateweb

NX Unable to resolve @nrwl/webpack:dev-server.

ENOENT: no such file or directory, open 'C:\Users\woodm\source\repository\equesoft\node_modules@nrwl\webpack@nx\webpack\src\executors\dev-server\schema.json'
Pass --verbose to see the stacktrace.

I'm a bit of a novice with Nx. Am I left with the esbuild option to fix this? Does anyone have instructions on what steps I can take to get my project building/running again?

I went ahead and did a migrate to 16.0.3 Nx version, then after that ran npm install @nx/webpack and now it's worse. My project has become COMPLETELY BROKEN. This is what I get running npm start...

nx run ingateweb:serve:development

NX customWebpack is not a function
Pass --verbose to see the stacktrace.
———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

NX Running target serve for project ingateweb failed

Failed tasks:

• ingateweb:serve:development

Hint: run the command with --verbose for more details.

How do I resolve this, anyone?

[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.