uuidv4 return nan-undefinedundefined in browser #193

[anton-marchenko]

Steps:

1. Install Angular 8
2. Install uuid ^8.2.0
3. Run project in development mode. Result is good (like 75442486-0878-440c-9db1-a7006c25a39f).
4. Run project in production mode. Result is:

nan-undefinedundefined-undefinedundefined-undefinedundefined-undefinedundefinedundefinedundefinedundefinedundefined

OS: Windows 7 or 10
Browser: Chrome

[ctavan]

This might be the same issue as #500.

Could you provide a minimal reproducible example, ideally as a github repository, so that we can look into this?

[anton-marchenko]

This might be the same issue as #500.

Could you provide a minimal reproducible example, ideally as a github repository, so that we can look into this?

Okay. I have created repository with error:
https://github.com/anton-marchenko/uuid-bug

It is not exactly same error that I have had before, but it is similar:

You should:

1. Install node.js
2. npm install -g @angular/cli
3. clone repository
4. ng serve --prod

By the way I realized that the reason of the bug is conflict with other packages.
I just created new project and my package.json was: https://github.com/anton-marchenko/uuid-bug/commit/e8bfe06ca8268712ef1751e3f4156325253c2ebf#diff-b9cfc7f2cdf78a7f4b91a753d10865a2
In this case bug did not produce.

Then I changed package.json to https://github.com/anton-marchenko/uuid-bug/blob/master/package.json
(it is package.json from my working project)
Then I could get the bug.

[broofa]

@anton-marchenko thanks for putting that repo together. I'm not able to reproduce the problem, unfortunately.

See "Environment" I'm running in, below, though. Maybe you've got a different setup? Also, I have ng installed locally in the project. Not sure if that matters (seems unlikely).

$ ng serve --prod
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
 10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {0} runtime.3f3fc55b246d2a4b8254.js, runtime.3f3fc55b246d2a4b8254.js.map (runtime) 1.46 kB [entry] [rendered]
chunk {1} main.42b92c186383e23c098d.js, main.42b92c186383e23c098d.js.map (main) 317 kB [initial] [rendered]
chunk {2} polyfills.5001903a16b945c3328e.js, polyfills.5001903a16b945c3328e.js.map (polyfills) 36.3 kB [initial] [rendered]
chunk {3} styles.6da545eacc81d81026d3.css, styles.6da545eacc81d81026d3.css.map (styles) 59 bytes [initial] [rendered]
Date: 2020-08-13T17:08:42.423Z - Hash: 4b163e7436c6a1086717 - Time: 17796ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

Environment:

$ node --version
v14.8.0

$ npm --version
n6.14.7

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.1.3
Node: 14.8.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@angular/cli                      8.1.3
@angular/http                     6.1.10
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.6.2
typescript                        3.4.5
webpack                           4.35.2

[anton-marchenko]

@broofa @ctavan

Okay. I have deployed production version for you: https://anton-marchenko.github.io/uuid-bug/index.html

You can see the error in devTools:

P.S. I have built it using node v12.14.0

[broofa]

kk, I'm seeing that issue on your website. (Also, thank you! That's WAY easier for me to work with.)

This looks like a code transpilation problem in Angular. Notice here:

This is the transpiled/minified version of this code. The To array is the transpiled version the bytesToHex array that maps 0-255 byte values to 2-digit hex strings. But in the transpiled code, To is never populated. You can still see the remnants of the for loop that does the initialization (e.g. So < 256 exit condition), but the code that's supposed to create and push the hex strings onto the array is just... gone.

So, yeah, this is an issue in the Angular toolchain somewhere. Are you running the latest version of Angular? 'Looks like you're on angular/[email protected], while latest is 10.0.6. So... try updating to a more recent Angular build and see if that fixes the problem.

[anton-marchenko]

@broofa

Yeah. I reproduced the bug in Angular 8.
I have updated Angular to v9 and the bug does not reproduce any more.

Thank you.

[RezaRahmati]

@broofa

Yeah. I reproduced the bug in Angular 8.
I have updated Angular to v9 and the bug does not reproduce any more.

Thank you.

I originally reported the issue on Angular 9.1.9, not sure how it's working for you

[broofa]

I originally reported the issue on Angular 9.1.9, not sure how it's working for you

@RezaRahmati 'Looks like the latest 9.X release of angular is 9.1.12. Maybe try that?

[anton-marchenko]

@broofa
Yeah. I reproduced the bug in Angular 8.
I have updated Angular to v9 and the bug does not reproduce any more.
Thank you.

I originally reported the issue on Angular 9.1.9, not sure how it's working for you

I used Angular 9.1.12

[ctavan]

@anton-marchenko thank you for taking the time to pull together the reproduction.

I was able to reproduce the issue with Angular 8.

The key thing that fixed it for me was upgrading @angular-devkit/[email protected] to @angular-devkit/[email protected]

@RezaRahmati can you give that a try?