question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Module not found: Error: Can't resolve ' commonjs-proxy:../..

See original GitHub issue

Type of Issue

[x ] Bug Report
[ ] Feature Request

Description

Unsure if this is an angular-cli issue or ng-packagr.

Have an angular 6 application containing a library project. When I build using ng-packagr directly the resulting npm package can be consumed from another Angular 6 application. When I build using the angular-cli the resulting package cannot be consumed from another Angular 6 application and get multiple errors as follows when trying to build the consuming Angular 6 app:

ERROR in ./node_modules/c-lib/fesm5/c-lib.js Module not found: Error: Can’t resolve ’ commonjs-proxy:…/…/a-service/a.service’ in ‘C:\data\sandbox\angular\example-ng6-lib-app\node_modules\c-lib\fesm5’

How To Reproduce

  1. Given the following configuration in angular.json, build the library using the angular cli and then package using npm:
ng build --prod c-lib
cd dist/c-lib && npm pack

angular.json:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/c-lib/tsconfig.lib.json",
            "project": "projects/c-lib/ng-package.json"
          },
          "configurations": {
            "production": {
              "project": "projects/c-lib/ng-package.prod.json"
            }
          }
        },
  1. Install the library into another angular 6 application and attempt to consume a component from the installed library

  2. Build the consuming application

Expected Behaviour

Expect the consuming application to build successfully and consumed component to function correctly.

This expected behaviour is achieved when using ng-packagr directly replacing step 1 above with the following:

ng-packagr -p ./projects/c-lib/ng-package.prod.json
cd dist/c-lib && npm pack

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr:            4.0.0-rc.0
@angular/compiler:     6.0.0
rollup:                0.59.4
tsickle:               0.27.5
typescript:            2.7.2

Please include all version numbers that might be relevant, e.g. third-party libraries

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:17 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
alan-agius4commented, Jun 15, 2018

@AlexanderKozhevin, for thanks the reproduction. And as always in the open source community a good reproduction always gets things solved fast.

What I noticed is that the module format used in esm5 and fesm5 is commonjs. This is due that in tsconfig.lib.json you don’t have a module specified. Please add the following.

"compilerOptions": {
    "module": "es2015",
     ...
},
2reactions
AlexanderKozhevincommented, Jun 15, 2018

@alan-agius4 https://github.com/AlexanderKozhevin/angular6-library-test Here we are. Created project from scratch, added library, got an error. Please, let me know if you know how to fix that.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Module not found: Error: Can't resolve 'commonjs-proxy
One solution I've seen is that in tsconfig.lib.json of the library that is being built the module should be set as follows:
Read more >
Module not found: Error: Can't resolve 'tls' [Solved] | bobbyhadz
The first thing you should try is to set the browser.tls property to false in your package.json file. package.json. Copied ...
Read more >
Next.js + Webpack - Fix for ModuleNotFoundError: Module not ...
To fix the error with Webpack 4, update your Next.js config file ( /next.config.js ) with the following, it tells webpack to set...
Read more >
API - esbuild
Here's a simple example of a proxy server to get you started, using node's built-in http module. It adds a custom 404 page...
Read more >
Externals - webpack
Instead, the created bundle relies on that dependency to be present in the ... For example, if the external library is a CommonJS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found