Angular 8. RippleAPI (from ripple-lib) raise error "global is not defined"

[alex-piccione]

I have a new Angualr 8 web app, empty. It was created with angular-cli version "8.3.14", Node version: 13.0.1

ng new -> ok (move into the new Angular project folder) npm install -> ok ng serve -> ok, app started and is reachable at http://localhost:4200 npm install ripple-lib (current version: 1.3.4) -> (ok with 1 vulnerability) ng serve -> error

ERROR in node_modules/ripple-lib/dist/npm/common/connection.d.ts(3,8): error TS1259: Module '"D:/temp/test/node_modules/@types/ws/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

Add ""allowSyntheticDefaultImports": true," in compilerOptions of tsconfig.json.

ng serve -> ok, app started and is reachable at http://localhost:4200

use Ripple in a Component:

• set 1: import import { RippleAPI} from "ripple-lib" -> OK

• step 2: use it

   constructor(){
    let api = new RippleAPI({"server": "wss://s1.ripple.com"})
   }

Error: Uncaught ReferenceError: global is not defined at Object../node_modules/buffer/index.js (index.js:43) at webpack_require__ (bootstrap:79) at Object../node_modules/safe-buffer/index.js (index.js:2) at webpack_require (bootstrap:79) at Object../node_modules/base-x/index.js (index.js:9) at __webpack_require (bootstrap:79) at Object../node_modules/ripple-address-codec/dist/xrp-codec.js (xrp-codec.js:6) at webpack_require__ (bootstrap:79) at Object../node_modules/ripple-address-codec/dist/index.js (index.js:6) at webpack_require__ (bootstrap:79) client:52 [WDS] Live Reloading enabled.

Same problem when try to use it in a function (like button click call).

[FKSRipple]

Thanks for filing. I've had trouble turning allowSyntheticDefaultImports on in the past as well, I think it changes more about how your project is built than it appears, and probably introduced that global issue.

We should get this issue fixed, but if it helps I almost always turn on "skipLibCheck" so that dependency type issues don't break my application build. Maybe that would help you here.

Do you have esModuleInterop turned on in your tsconfig? The ws package (https://www.npmjs.com/package/ws) is in a format that isn't valid TS/ESM (where the module itself is a function and not a module) so you'll need this option set to true to work with this kind of package. I ^think^ that that would solve the error that you're seeing as well.

[alex-piccione]

I set back "allowSyntheticDefaultImports" to false.

That was done because suggested by the original error:

ERROR in node_modules/ripple-lib/dist/npm/common/connection.d.ts:3:8 - error TS1259: Module '"D:/temp/ripple-lib Angular issue/angular app/node_modules/@types/ws/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

3 import WebSocket from 'ws';
         ~~~~~~~~~

  node_modules/@types/ws/index.d.ts:203:1
    203 export = WebSocket;
        ~~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

So, I set "skipLibCheck": true but nothing changed.

I changed import WebSocket from 'ws' to import * as WebSocket from 'ws'. Then another series of errors...

I also tried this:
(from https://stackoverflow.com/questions/50356408/upgrading-to-angular-6-x-gives-uncaught-referenceerror-global-is-not-defined)

var global = global || window;
var Buffer = Buffer || [];
var process = process || {
  env: { DEBUG: undefined },
  version: []
}; 

I then added esModuleInterop: true and try again: same error

This is my tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "allowSyntheticDefaultImports": false,
    "skipLibCheck": true, // suggested by ripple-lib developer to avoid the error:  This module is declared with using 'export ='
    "esModuleInterop": true,  // suggested by ripple-lib developer to avoid the error:  This module is declared with using 'export ='
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

If I execute "npm list buffer" I have this:
-- @angular-devkit/build-angular@0.803.14 -- webpack@4.39.2 -- node-libs-browser@2.2.1 -- buffer@4.9.1

So, I don't understand why adding ripple-lib started to give me a problem on a angular (so, not related to rippl-lib) dependency ?

[FKSRipple]

I just pushed a PR to update ws (#1073), maybe the latest version will have fixed this type issue. Will try to get that out as soon as we can for you to test against.

[intelliot]

@alex75it An update to ws was included in ripple-lib 1.4.1. Can you update and see if that helps?

[alex-piccione]

All good. No more error. (latest 1.4.1) Thanks!