Angular-cli: AOT Error: UglifyJs TypeError: str.replace is not a function at make_string

[squadwuschel]

Versions

`` Output from:ng --version`:

Angular CLI: 1.6.4
Node: 7.0.0
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.6.2
webpack: 3.10.0

Windows 7

Repro steps

I can build my project in devmode, but when I try to compile my project in AOT mode with

ng build --prod

I get the following error.

• I've cleared the npm cache
• removed complete node_modules folder
• I've structured my App into small modules, when I comment out nearly all modules the error is still there => is AOT trying to compile the hole app when I don't use the module ?

Observed behavior

ERROR in main.6a43ba34eae25a3e2b53.bundle.js from UglifyJs TypeError: str.replace is not a function at make_string (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :5634:19)
at encode_string (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :5678:19) at Object.print_string (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :6091:27) at print_property_name (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :7179:20)
at eval (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :7211:17) at doit (eval at
(C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :6152:13)
at AST_ObjectKeyVal.eval (eval at
(C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :6159:13)
at AST_ObjectKeyVal.AST_Node.print (eval at
(C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :5414:18)
at eval (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1),:7115:22)
at Array.forEach (native)
at eval (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :7109:29)
at eval (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :5912:19)
at OutputStream.with_indent (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :5877:38)
at Object.with_block (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :5911:9)
at eval (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :7108:48)
at doit (eval at (C:\TFS\DEV\30_Production\TestProjekt\0.2_ng5Update10_Gui\Web\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), :6152:13)

Desired behavior

I can build the project with AOT

Mention any other details that might be useful (optional)

[nourson]

Same issue breaks when compiling --prod due to Uglify

Output from: ng --version:

Angular CLI: 1.6.2
Node: 7.2.1
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.6.2
webpack-bundle-analyzer: 2.9.2
webpack: 3.10.0

Observed behavior

ERROR in 1.c1ea63b3ae55ccf3932a.chunk.js from UglifyJs
TypeError: str.replace is not a function
at make_string 
at encode_string
at Object.print_string
at print_property_name
at eval 

[Chris380]

Same for my project, building with Angular CLI 1.6.4:
ng build works
ng build --prod fails:

ERROR in main.06ba7b57493d1c0b57a6.bundle.js from UglifyJs
TypeError: str.replace is not a function
    at make_string (eval at <anonymous>

Clearing the npm cache and removing the node_modules folder did not help.
Building a new project created with ng new works.

[squadwuschel]

there seems to be something broken, in some npm modules. When I build the project on a other pc its working, because I've old node modules folder there. But with a new node_modules folder its not working anymore. Someone has broken its dependencies

[akosk]

I've the same problem. This is critical issue because I am not able to create new prod build.

Angular CLI: 1.6.4
Node: 7.10.1
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.4.2
webpack: 3.10.0

ERROR in 0.d38b28484293b972e1a7.chunk.js from UglifyJs
TypeError: str.replace is not a function
    at make_string (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:5634:19)
    at encode_string (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:5678:19)
    at Object.print_string (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:609
1:27)
    at print_property_name (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:717
9:20)
    at eval (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:7211:17)
    at doit (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:6152:13)
    at AST_ObjectKeyVal.eval (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:6
159:13)
    at AST_ObjectKeyVal.AST_Node.print (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <an
onymous>:5414:18)
    at eval (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:7115:22)
    at Array.forEach (native)
    at eval (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:7109:29)
    at eval (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:5912:19)
    at OutputStream.with_indent (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous
>:5877:38)
    at Object.with_block (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:5911:
9)
    at eval (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:7108:48)
    at doit (eval at <anonymous> (C:\sh\node_modules\uglifyjs-webpack-plugin\node_modules\uglify-es\tools\node.js:1:1), <anonymous>:6152:13)

[rbluethl]

This is an uglify-es bug.
Stick to version 3.3.5 using a shrinkwrap file as a temporary workaround.

https://github.com/angular/angular-cli/issues/9206
https://github.com/mishoo/UglifyJS2/issues/2783

[rdnscr]

We have the same problem. However we now enforce following packages to make the build work again:

  "devDependencies": {
    "@types/uglify-js": "2.6.30",
    "uglify-es": "3.3.5",
    "uglifyjs-webpack-plugin": "1.1.6"
  }

It seems the new release of uglify-es (3.3.7) done last weekend is creating the issue. I hope this helps somebody in getting his production build running again.

[alexeykostevich]

Thank you for research, @rbluethl and @rdnscr! Your solution resolves the issue.

While the issue exists in _Angular CLI_ dependencies, just add "uglify-es": "3.3.5" to _devDependencies_ in _package.json_.

{
   ...
  "devDependencies": {
    "@angular/cli": "1.6.5",
    ...
    "uglify-es": "3.3.5"
  }
}

Please, pay attention that you may need to run npm cache clean --force and remove _package-lock.json_ before running npm install.

[kzc]

This bug is probably not related to https://github.com/mishoo/UglifyJS2/issues/2783.

If someone is able to isolate this "str.replace is not a function at make_string" bug in a small self-contained standalone javascript test case please report it in: https://github.com/mishoo/UglifyJS2/issues/2790

The AST_ObjectKeyVal.AST_Node.print in the stack trace suggests it is related to object literals or class expressions.

[kzc]

Uglify fix: https://github.com/mishoo/UglifyJS2/pull/2810

[kzc]

@filipesilva @clydin It would be very helpful if a new flag were added to angular-cli to disable uglify in webpack:

ng build --prod --no-minify

That way users could upload the problematic unminified webpack bundle file(s) into a bug report for simple diagnosis.

[RingoKam]

rdnscr solution fix the build error, but some functionality in my app was broken on production built.

upgrading uglify to 3.3.8 seems to have fix the issue.

"devDependencies": {
    "@types/uglify-js": "2.6.30",
    "uglify-es": "3.3.8",
    "uglifyjs-webpack-plugin": "1.1.6"
  }

[kzc]

The issue was resolved in uglify-es 3.3.8.

$ node_modules/uglify-es/bin/uglifyjs -V
uglify-es 3.3.8

$ echo 'var o={}; o[-1]=1; console.log(o);' | node_modules/uglify-es/bin/uglifyjs -c
var o={"-1":1};console.log(o);

$ node_modules/uglify-es/bin/uglifyjs -V
uglify-es 3.3.7

$ echo 'var o={}; o[-1]=1; console.log(o);' | node_modules/uglify-es/bin/uglifyjs -c
ERROR: str.replace is not a function
    at make_string

[nhustak]

I understand this has been fixed in uglify 3.3.8. I cannot get my project to update it. I have removed the lock file, cleared the cache via --force and did an install. I added 3.3.8 as a devdependency per the above comment. I end up with references to both versions in my lock file. I noticed uglifjs-webpack-plugin 1.1.6 has 3.3.7 listed as a dependency. In turn, the cli references the plugin. How do I get it to pick up 3.3.8? Thanks I'm still learning my way around npm.

I added my package.json file.

package.zip

[kzc]

@filipesilva made a write up how to do this for an earlier version: https://github.com/angular/angular-cli/issues/8571#issuecomment-346998807

[clydin]

Closing as resolved by [email protected].

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}