Skip to main content

Angular 5 Build issues - Cannot find module 'webpack/lib/dependencies/ContextElementDependency'

After upgrading to Node.js version 8 on our build server, one of our development teams contacted me because their build started to fail. Here is the error they got when running ‘ng build’:

2018-06-14T06:20:11.8790352Z ##[section]Starting: ng build

2018-06-14T06:20:11.9073421Z ==============================================================================

2018-06-14T06:20:11.9073421Z Task         : npm

2018-06-14T06:20:11.9073421Z Description  : Run an npm command

2018-06-14T06:20:11.9083182Z Version      : 0.2.22

2018-06-14T06:20:11.9083182Z Author       : Microsoft Corporation

2018-06-14T06:20:11.9083182Z Help         : [More Information](https://go.microsoft.com/fwlink/?LinkID=613746)

2018-06-14T06:20:11.9083182Z ==============================================================================

2018-06-14T06:20:15.5560039Z [command]C:\Program Files\nodejs\npm.cmd config list

2018-06-14T06:20:17.1849642Z ; cli configs

2018-06-14T06:20:17.1849642Z metrics-registry = "https://registry.npmjs.org/"

2018-06-14T06:20:17.1849642Z scope = ""

2018-06-14T06:20:17.1849642Z user-agent = "npm/5.6.0 node/v8.11.2 win32 x64"

2018-06-14T06:20:17.1849642Z

2018-06-14T06:20:17.1849642Z ; builtin config undefined

2018-06-14T06:20:17.1859408Z prefix = "C:\\Users\\AppData\\Roaming\\npm"

2018-06-14T06:20:17.1859408Z

2018-06-14T06:20:17.1859408Z ; node bin location = C:\Program Files\nodejs\node.exe

2018-06-14T06:20:17.1859408Z ; cwd = D:\b\3\_work\8\s\BBM

2018-06-14T06:20:17.1859408Z ; HOME = C:\Users\

2018-06-14T06:20:17.1859408Z ; "npm config ls -l" to show all defaults.

2018-06-14T06:20:17.1869174Z

2018-06-14T06:20:17.2357474Z [command]C:\Program Files\nodejs\npm.cmd run ng build

2018-06-14T06:20:20.5014978Z

2018-06-14T06:20:20.5014978Z > BBM@0.0.0 ng D:\b\3\_work\8\s\BBM

2018-06-14T06:20:20.5171234Z > ng "build"

2018-06-14T06:20:20.5171234Z

2018-06-14T06:20:30.8837324Z Cannot find module 'webpack/lib/dependencies/ContextElementDependency'

2018-06-14T06:20:30.8837324Z Error: Cannot find module 'webpack/lib/dependencies/ContextElementDependency'

2018-06-14T06:20:30.8837324Z     at Function.Module._resolveFilename (module.js:547:15)

2018-06-14T06:20:30.8837324Z     at Function.Module._load (module.js:474:25)

2018-06-14T06:20:30.8837324Z     at Module.require (module.js:596:17)

2018-06-14T06:20:30.8837324Z     at require (internal/module.js:11:18)

2018-06-14T06:20:30.8837324Z     at Object.<anonymous> (D:\b\3\_work\8\s\BBM\node_modules\@ngtools\webpack\src\plugin.js:8:34)

2018-06-14T06:20:30.8837324Z     at Module._compile (module.js:652:30)

2018-06-14T06:20:30.8837324Z     at Object.Module._extensions..js (module.js:663:10)

2018-06-14T06:20:30.8837324Z     at Module.load (module.js:565:32)

2018-06-14T06:20:30.8837324Z     at tryModuleLoad (module.js:505:12)

2018-06-14T06:20:30.8837324Z     at Function.Module._load (module.js:497:3)

2018-06-14T06:20:30.9325624Z npm ERR! code ELIFECYCLE

2018-06-14T06:20:30.9325624Z npm ERR! errno 1

2018-06-14T06:20:30.9345156Z npm ERR! BBM@0.0.0 ng: `ng "build"`

2018-06-14T06:20:30.9345156Z npm ERR! Exit status 1

2018-06-14T06:20:30.9345156Z npm ERR!

2018-06-14T06:20:30.9354922Z npm ERR! Failed at the BBM@0.0.0 ng script.

2018-06-14T06:20:30.9354922Z npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

2018-06-14T06:20:30.9520944Z

2018-06-14T06:20:30.9520944Z npm ERR! A complete log of this run can be found in:

2018-06-14T06:20:30.9520944Z npm ERR!     C:\Users\AppData\Roaming\npm-cache\_logs\2018-06-14T06_20_30_933Z-debug.log

2018-06-14T06:20:31.3720324Z ##[error]npm failed with error: C:\Program Files\nodejs\npm.cmd failed with return code: 1

2018-06-14T06:20:31.3720324Z ##[section]Finishing: ng build

Here are the steps we took to fix it:

  • Step 1  - Deleted the node modules from the build folder
  • Step 2 – Removed the existing package-lock.json
  • Step 3 - Run npm install
  • Step 4 – Check in the newly created package-lock.json

After doing that, the build started to work again. (My love/hate relationship with NPM continues…Smile)

Labels:

Popular posts from this blog

Podman– Command execution failed with exit code 125

After updating WSL on one of the developer machines, Podman failed to work. When we took a look through Podman Desktop, we noticed that Podman had stopped running and returned the following error message: Error: Command execution failed with exit code 125 Here are the steps we tried to fix the issue: We started by running podman info to get some extra details on what could be wrong: >podman info OS: windows/amd64 provider: wsl version: 5.3.1 Cannot connect to Podman. Please verify your connection to the Linux system using `podman system connection list`, or try `podman machine init` and `podman machine start` to manage a new Linux VM Error: unable to connect to Podman socket: failed to connect: dial tcp 127.0.0.1:2655: connectex: No connection could be made because the target machine actively refused it. That makes sense as the podman VM was not running. Let’s check the VM: >podman machine list NAME         ...
Read more

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.
Read more

VS Code Planning mode

After the introduction of Plan mode in Visual Studio , it now also found its way into VS Code. Planning mode, or as I like to call it 'Hannibal mode', extends GitHub Copilot's Agent Mode capabilities to handle larger, multi-step coding tasks with a structured approach. Instead of jumping straight into code generation, Planning mode creates a detailed execution plan. If you want more details, have a look at my previous post . Putting plan mode into action VS Code takes a different approach compared to Visual Studio when using plan mode. Instead of a configuration setting that you can activate but have limited control over, planning is available as a separate chat mode/agent: I like this approach better than how Visual Studio does it as you have explicit control when plan mode is activated. Instead of immediately diving into execution, the plan agent creates a plan and asks some follow up questions: You can further edit the plan by clicking on ‘Open in Editor’: ...
Read more