Problems with CBOR in Angular App

[dibog]

I tried to use 'cbor-web' in an Angular Frontend.
But when I type ng build I get the following error:

Uncaught ReferenceError: process is not defined
    at Object.push.MCLT.exports.debuglog (util.js:100)
    at Object.481 (cbor.js:2)
    at o (cbor.js:2)
    at Object.830 (cbor.js:2)
    at o (cbor.js:2)
    at Object.20 (cbor.js:2)
    at o (cbor.js:2)
    at Object.141 (cbor.js:2)
    at o (cbor.js:2)
    at cbor.js:2
    at cbor.js:2
    at cbor.js:2
    at cbor.js:2
    at Object.4uv0 (cbor.js:2)
    at __webpack_require__ (bootstrap:79)

[hildjj]

As a work-around npm install -D process and add this to your JS file:

// eslint-disable-next-line no-unused-vars
const process = require('process')

I'll see if I can fix it so you don't need it in the future.

[dibog]

Thanks, I'll try that out.

So a dependency is missing, could those be automatically resolved by npm?

The following dependency is also missing:

• bignumber.js

I also get the following warning (should I open an own issue for it):

WARNING in <path/filename> depends on 'cbor-web'. CommonJS and AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[dibog]

I'm using typescript for my Angular app. This is how I'm importing the necessary imports from cbor-web:

import { decode } from 'cbor-web';

I tried the following for process dependency:

import p from 'process';

ng build or ng serve works, but when I try to load my app I get the following in the log:

util.js:100 Uncaught ReferenceError: process is not defined
    at Object.push.MCLT.exports.debuglog (util.js:100)
    at Object.481 (cbor.js:2)
    at o (cbor.js:2)
    at Object.830 (cbor.js:2)
    at o (cbor.js:2)
    at Object.20 (cbor.js:2)
    at o (cbor.js:2)
    at Object.141 (cbor.js:2)
    at o (cbor.js:2)
    at cbor.js:2
    at cbor.js:2
    at cbor.js:2
    at cbor.js:2
    at Object.4uv0 (cbor.js:2)
    at __webpack_require__ (bootstrap:79)

[hildjj]

Did you add process as a dependency? Yes, you'll probably also need bignumber.js as a dependency until I land the fix for #140 in the next major release (which I'm getting very close to having a PR for. Follow my work in the node12required branch)

[dibog]

Please have a look at my repo here: https://github.com/dibog/angular-cbor

Its basically a freshly created Angular App (ng new angular-cbor), then I ripped out all the html stuff and
added via npm install

• cbor-web
• bignumber.js
• process

Still same error. I really would like to use your library, but it so far I'm not successfull with my tries.

[hildjj]

I'm just pulling it down now, thanks for cutting the repro down. I can't reproduce needing process in my environment anymore, so I'm hoping this will help me find it.

[hildjj]

What version of node are you using?

[dibog]

C:\>node
Welcome to Node.js v15.3.0.
Type ".help" for more information.

C:\>npm --version
6.14.9

[hildjj]

I think the issue is that your setup is using an old webpack version that is pulling in the util package, which then includes process. You can see the work-around I used in

node-cbor/packages/webpack-demo/webpack.config.js

Line 17 in e3b17d1

util: '{}'

(combined with pulling node-inspect-extracted into the HTML file), but I don't know how to do that in angular. I'll have a chance to look for a work-around this afternoon, but I think moving to the node12required branch will remove all traces of util and fix this problem more completely. If it does, I'll accelerate moving to a release of cbor@8 this afternoon instead.

[dibog]

Cool. I also try to setup a similiar project with newer node/npm version. Am Fr., 16. Juli 2021 um 18:16 Uhr schrieb Joe Hildebrand < ***@***.***>:

…

I think the issue is that your setup is using an old webpack version that is pulling in the util package, which then includes process. You can see the work-around I used in https://github.com/hildjj/node-cbor/blob/e3b17d1980dd4656505c575c9bc9d65148d40af1/packages/webpack-demo/webpack.config.js#L17 (combined with pulling node-inspect-extracted into the HTML file), but I don't know how to do that in angular. I'll have a chance to look for a work-around this afternoon, but I think moving to the node12required branch will remove all traces of util and fix this problem more completely. If it does, I'll accelerate moving to a release of ***@***.*** this afternoon instead. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#148 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIC3IVT4VH7KLFB32MT56LTYBLOZANCNFSM5AM6YZ6A> .

[dibog]

With the newest npm and node for windows it does not even compile.
I have to install 'util' and 'bignumber.js' and then I got during building this:

./node_modules/cbor-web/dist/cbor.js:5:13-36 - Warning: Module not found: Error: Can't resolve 'bignumber.js' in 'D:\angular-cbor2\node_modules\cbor-web\dist'

Warning: D:\angular-cbor2\src\app\app.component.ts depends on 'cbor-web'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



Error: src/app/app.component.ts:2:24 - error TS7016: Could not find a declaration file for module 'cbor-web'. 'D:/angular-cbor2/node_modules/cbor-web/dist/cbor.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/cbor-web` if it exists or add a new declaration (.d.ts) file containing `declare module 'cbor-web';`

2 import { decode } from 'cbor-web';
                         ~~~~~~~~~~

[hildjj]

Nod. Ok, I think the next major release should fix all of that (I hope). I'm surfing (what I hope is) the last set of changes right now, so will ping you when I have a release candidate to test. In the meantime, can you update your test repo with the modern version, perhaps on a branch so we can switch back and forth?

[hildjj]

Try this:

npm add https://gitpkg.now.sh/hildjj/node-cbor/packages/cbor-web\?node12required

and remove process as a dependency, and remove the import process from 'process';

(this is just to see if it works. I don't know angular enough to be able to tell if this fixed the problem :( )

[dibog]

Nod. Ok, I think the next major release should fix all of that (I hope). I'm surfing (what I hope is) the last set of changes right now, so will ping you when I have a release candidate to test. In the meantime, can you update your test repo with the modern version, perhaps on a branch so we can switch back and forth?

Looking forward to it. Do you have any idea when you have such release candidate?

[dibog]

Try this:

npm add https://gitpkg.now.sh/hildjj/node-cbor/packages/cbor-web\?node12required

and remove process as a dependency, and remove the import process from 'process';

(this is just to see if it works. I don't know angular enough to be able to tell if this fixed the problem :( )

I'll try that out, but probably not before monday. Thanks!

[dibog]

So its now Friday and not Monday :-)

Taken your last post into account I was able to start my app. On decoding I got the following error:

Error: Unknown input type
    at Object.t.guessEncoding (cbor.js:2) [angular]
    at decodeFirstSync (cbor.js:2) [angular]

The message I got is from a python backend. I assume the CBOR message is valid, but I can't prove it. :-)
So take this error message with a grain of salt.

[hildjj]

We've made good progress at least. :)

guessEncoding should work if you passed in a hex-encoded string, a Buffer, an ArrayBuffer, or a Uint8Array. I wonder what else you might have passed in?

[dibog]

Hi Joe,

I looked it up. I put a Blob object I got from a websocket into the decode method.

    try {
      console.log('trying to decode message:', message);                 // 105
      const blob = message as Blob;
      const decodedMessage = decode(blob.arrayBuffer());
      console.log('decoded', message, 'to', decodedMessage);
      this.emitMessage(decodedMessage);
    }
    catch (error: any) {
      console.log('can\'t decode cbor:', error);                                  // 112
    }

and I got in the log:

DBCConnector: handleCBORMessage:  emitter_length= 1
dbc.connector.ts:105 trying to decode message: Blob
dbc.connector.ts:112 can't decode cbor: Error: Unknown input type
    at Object.t.guessEncoding (cbor.js:2) [angular]
    at decodeFirstSync (cbor.js:2) [angular]
    at DataBusConnector.handleCBORMessage (dbc.connector.ts:107) [angular]
    ...

[hildjj]

add an await blob.arrayBuffer() in there? I may add support for Blob directly if we get this working.

[dibog]

Hi Joe, I oversaw that the method was an async one. Yes, with the await it works. Am Mo., 26. Juli 2021 um 18:03 Uhr schrieb Joe Hildebrand < ***@***.***>:

…

add an await blob.arrayBuffer() in there? I may add support for Blob directly if we get this working. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#148 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIC3IRJJCK64DXKKYZ6UL3TZWBOXANCNFSM5AM6YZ6A> .