Error when building angular app with solid-client: Module '"../constants"' has no exported member 'acp'

[WhyINeedToFillUsername]

Search terms you've used

inrupt module acp

Bug description

npm error when building application with "@inrupt/solid-client": "^1.0.0", using angular's ng build

To Reproduce

1. generate new angular app (https://angular.io/tutorial/toh-pt0, ng new solid-error)
2. add solid-client (based on https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/getting-started/, npm install @inrupt/solid-client @inrupt/solid-client-authn-browser @inrupt/vocab-common-rdf)
3. use import {getSolidDataset, getStringNoLocale, getThing} from '@inrupt/solid-client'; in a component
4. run app (ng serve)

Expected result

application gets built without error and starts

Actual result

the following error occurs:
ERROR in node_modules/@inrupt/solid-client/dist/acp/control.d.ts:21:10 - error TS2305: Module '"../constants"' has no exported member 'acp'.

Environment

$ npx envinfo --system --npmPackages --binaries --npmGlobalPackages --browsers

  System:
    OS: Windows 10 10.0.19041
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 17.01 GB / 31.71 GB
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (86.0.622.69)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @angular-devkit/build-angular: ~0.1001.7 => 0.1001.7
    @angular/animations: ~10.1.6 => 10.1.6
    @angular/cli: ~10.1.7 => 10.1.7
    @angular/common: ~10.1.6 => 10.1.6
    @angular/compiler: ~10.1.6 => 10.1.6
    @angular/compiler-cli: ~10.1.6 => 10.1.6
    @angular/core: ~10.1.6 => 10.1.6
    @angular/forms: ~10.1.6 => 10.1.6
    @angular/platform-browser: ~10.1.6 => 10.1.6
    @angular/platform-browser-dynamic: ~10.1.6 => 10.1.6
    @angular/router: ~10.1.6 => 10.1.6
    @inrupt/solid-client: ^1.0.0 => 1.0.0
    @inrupt/solid-client-authn-browser: ^1.0.0 => 1.0.0
    @inrupt/vocab-common-rdf: ^0.6.3 => 0.6.3
    @types/jasmine: ~3.5.0 => 3.5.14
    @types/jasminewd2: ~2.0.3 => 2.0.8
    @types/node: ^12.11.1 => 12.19.4
    codelyzer: ^6.0.0 => 6.0.1
    jasmine-core: ~3.6.0 => 3.6.0
    jasmine-spec-reporter: ~5.0.0 => 5.0.2
    karma: ~5.0.0 => 5.0.9
    karma-chrome-launcher: ~3.1.0 => 3.1.0
    karma-coverage-istanbul-reporter: ~3.0.2 => 3.0.3
    karma-jasmine: ~4.0.0 => 4.0.1
    karma-jasmine-html-reporter: ^1.5.0 => 1.5.4
    protractor: ~7.0.0 => 7.0.0
    rxjs: ~6.6.0 => 6.6.3
    ts-node: ~8.3.0 => 8.3.0
    tslib: ^2.0.0 => 2.0.3
    tslint: ~6.1.0 => 6.1.3
    typescript: ~4.0.2 => 4.0.5
    zone.js: ~0.10.2 => 0.10.3
  npmGlobalPackages:
    @angular/cli: 10.1.7
    npm: 6.14.8
    windows-build-tools: 5.2.2

Additional information

I've created a sample angular project with the error: https://github.com/WhyINeedToFillUsername/solid-error

• check it out, run npm install and ng serve

[nicolasmondada]

Hi @WhyINeedToFillUsername,

Thanks for reporting this issue so thoroughly. We'll have a look and get back to you.

All the best,
Nick.-

[WhyINeedToFillUsername]

Thank you. I think the problem is the libraries are not ready to be used with angular. I have tried excluding the files manually and encountered various different errors.

First, in the build log:

WARNING in C:\dev\Windows\src\temp\solid-error\src\app\inrupt\inrupt.component.ts depends on '@inrupt/solid-client-authn-browser'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in C:\dev\Windows\src\temp\solid-error\src\app\inrupt\inrupt.component.ts depends on '@inrupt/solid-client'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in C:\dev\Windows\src\temp\solid-error\node_modules\n3\src\N3StreamWriter.js depends on 'readable-stream'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

but more importantly, this in the browser:

Uncaught ReferenceError: global is not defined
    at Object.rVef (index.js:13)
    at __webpack_require__ (bootstrap:79)
    at Module.Fxdt (index.es.js:1)
    at __webpack_require__ (bootstrap:79)
    at Object.zNZT (ClientAuthentication.js:16)
    at __webpack_require__ (bootstrap:79)
    at Object.rgET (dependencies.js:29)
    at __webpack_require__ (bootstrap:79)
    at Object.oDU2 (Session.js:5)
    at __webpack_require__ (bootstrap:79)

• snippet of the indes.js:13:

if (typeof Buffer === "undefined") {
  (global || window).Buffer = require("buffer").Buffer;
}

[Vinnl]

Thanks for reporting this @WhyINeedToFillUsername. I was able to reproduce your issue and possibly identified the fix. Could you verify whether the fix works for you by installing a preview release including the fix version 1.1.0?

[Vinnl]

(Re-opening since we haven't had confirmation that the issue is fixed yet - sorry!)

[WhyINeedToFillUsername]

Thank you for quick reaction!

I am sorry, but the fix did not work for me. I still get:

ERROR in ./node_modules/jwa/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\dev\Windows\src\temp\solid-error\node_modules\jwa'

ERROR in ./node_modules/jws/lib/sign-stream.js
Module not found: Error: Can't resolve 'stream' in 'C:\dev\Windows\src\temp\solid-error\node_modules\jws\lib'

ERROR in ./node_modules/jws/lib/verify-stream.js
Module not found: Error: Can't resolve 'stream' in 'C:\dev\Windows\src\temp\solid-error\node_modules\jws\lib'

ERROR in ./node_modules/jws/lib/data-stream.js
Module not found: Error: Can't resolve 'stream' in 'C:\dev\Windows\src\temp\solid-error\node_modules\jws\lib'

I've pushed the updated version to the package.json of the https://github.com/WhyINeedToFillUsername/solid-error project.

[Vinnl]

@WhyINeedToFillUsername solid-client-authn apparently makes use of the crypto and stream Node modules, which will have to be polyfilled when used in the browser. I'm not too familiar with Angular, but if it's using Webpack 5 under the hood, an npm install crypto-browserify might resolve it for you. (And possibly npm install buffer for solid-client, which depends on the buffer module.) When I run that in your repo, those errors go away.

(I do get the following error, but they don't sound related to solid-client or solid-client-authn-browser:

Error: src/app/inrupt/inrupt.component.html:16:78 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

16     <input type="url" id="webID" name="webID" size="50" pattern="https://.*" [(ngModel)]="webID"
                                                                                ~~~~~~~~~~~~~~~~~~~

  src/app/inrupt/inrupt.component.ts:8:16
    8   templateUrl: './inrupt.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component InruptComponent.

)

[NSeydoux]

As @Vinnl says, with the latest WebPack, some Node builtins must be manually provided to solid-client-authn, namely crypto, stream and util. Updating one of our dependencies should resolve the problem, but it's a bit involved, so in the meantime if you want here is the webpack configuration that we use for solid-client-authn: https://github.com/inrupt/solid-client-authn-js/blob/master/packages/browser/webpack.common.js

[WhyINeedToFillUsername]

@Vinnl sorry, I've fixed it, but forgot to push the fix.. it is in the repo now.

I have installed
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"stream": "0.0.2",
"util": "^0.12.3"

I've also tried
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"stream-browserify": "^3.0.0",
"util": "^0.12.3"

But no success, I still get the same error:

Error: ./node_modules/jws/lib/data-stream.js
Module not found: Error: Can't resolve 'stream' in 'C:\dev\Windows\src\temp\solid-error\node_modules\jws\lib'

I've pushed an 'additional_dependencies' branch so you can test this. I suggest 'ng build', which gives more verbose information.

@NSeydoux thank you, I will look into the webpack configuration, however I don't know how to modify the angular's webpack to accommodate this.

[nicolasmondada]

Hi @WhyINeedToFillUsername,

This is now flagged as a known issue for Angular and we are looking at adding support for browser/node-specific crypto libraries in the near future. In the meantime, the workaround is to change your project's webpack configuration to manually add those dependencies as @NSeydoux and @Vinnl explained.

Cheers,
Nick.-

[WhyINeedToFillUsername]

Jeezus this is a rabbit hole! I've tried using a custom webpack configuration as you suggest. In order to do so, in this Angular 10 I am using, you have to use "@angular-builders/custom-webpack" and "@angular-devkit/build-angular". Those are using webpack 4, which does not have the resolve.fallback option you are using to fix this. Both previous and next webpack versions do have this option...

I am trying to use another version of angular and the builders to see if they updated webpack as well.

[WhyINeedToFillUsername]

FYI, it didn't help. Angular 11 has option to use webpack 5 (only with Yarn, https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7), but in order to use custom webpack configuration, one has to use "@angular-builders/custom-webpack" and "@angular-devkit/build-angular" packages (https://medium.com/angular-in-depth/customizing-angular-cli-build-an-alternative-to-ng-eject-v2-c655768b48cc), which rely on webpack 4 and the build does not work.

[WhyINeedToFillUsername]

So I have finally found a hackish way to make it work. In the repo in branch custom-webpack (https://github.com/WhyINeedToFillUsername/solid-error/tree/custom-webpack), you can see how. I am manually supplying the modules + need to replace the import statements in some places. It is a very bad solution, but I am able to login and read Inrupt profile with it.

There might be some other ways how to use the custom webpack configuration or to supply fallback for those missing libraries (namely another package for supplying custom webpack config: https://github.com/manfredsteyer/ngx-build-plus).

Maybe the real question here is - why is solid-client-authn using crypto, stream (and util?) node libraries, and not their browser versions (crypto-browserify etc.)?

[Vinnl]

Good to hear you managed to find some way of getting this to work. For some additional context: Webpack 4 and below did natively include those polyfills, but Angular explicitly disabled those. However, if you are able to customise the Webpack configuration for Webpack 4, you might have been able to re-enable the polyfills yourself. That said, if you are now able to use the latest Angular version, that is probably preferable.

As for your final question: that is basically the result of a changing ecosystem. When the project was started, most bundlers included those polyfills by default, and existing crypto libraries that worked in both the browser and Node (that we build on) relied on those being supplied by the developer. Since then, updated versions of libraries have been made available that do indeed fall back to the browser-native utilities first, and we hope to be able to adopt those soon.

[Vinnl]

Since the original issue has been fixed, I'll close this issue. As for the question of polyfills in solid-client-authn-browser, I think this ticket is the most relevant one: inrupt/solid-client-authn-js#1099

If you have any further issues, feel free to log a new issue or to re-open this one. Cheers!

[WhyINeedToFillUsername]

Since the original issue has been fixed, I'll close this issue.

Which original issue do you mean?

I haven't tried it, but if the library is still using the node.js dependencies, the issue will remain.

[Vinnl]

@WhyINeedToFillUsername This:

Error when building angular app with solid-client: Module '"../constants"' has no exported member 'acp'

The dependencies on Node.js is, as I understand it, in solid-client-authn, whereas this is the solid-client repository. Hence, I think the issue about SCA using Node dependencies is this one: inrupt/solid-client-authn-js#1099 But let me know if I have misunderstood something :)