Prod build error with 3rd party lib (tinymce): Error: Invalid IIFE Structure

Versions

Angular CLI: 6.0.5
Node: 10.0.0
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.5
@angular-devkit/build-angular     0.6.5
@angular-devkit/build-optimizer   0.6.5
@angular-devkit/core              0.6.5
@angular-devkit/schematics        0.6.5
@angular/cli                      6.0.5
@ngtools/webpack                  6.0.5
@schematics/angular               0.6.5
@schematics/update                0.6.5
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Repro steps

• ng new kvak
• cd kvak
• npm install --save tinymce
• nano src/app/app.component.ts
• add import { tinymce } from 'tinymce/tinymce';
• add dummy = tinymce; inside the AppComponent
• ng build --prod

Observed behavior

ERROR in ./node_modules/tinymce/tinymce.js
Module build failed: Error: Invalid IIFE Structure
    at updateEnumIife (/Users/kolik/Workspaces/Test/kvak/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:298:15)
    at visitBlockStatements (/Users/kolik/Workspaces/Test/kvak/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:82:61)
    at visitor (/Users/kolik/Workspaces/Test/kvak/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:33:26)
    at visitNode (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:52795:23)
    at visitFunctionBody (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:52901:23)
    at Object.visitEachChild (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:53015:407)
    at visitor (/Users/kolik/Workspaces/Test/kvak/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:53:23)
    at visitNode (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:52795:23)
    at Object.visitEachChild (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:53005:44)
    at visitor (/Users/kolik/Workspaces/Test/kvak/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:53:23)
    at visitNode (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:52795:23)
    at Object.visitEachChild (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:53013:45)
    at visitor (/Users/kolik/Workspaces/Test/kvak/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:53:23)
    at visitNode (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:52795:23)
    at Object.visitEachChild (/Users/kolik/Workspaces/Test/kvak/node_modules/typescript/lib/typescript.js:53059:49)
    at visitor (/Users/kolik/Workspaces/Test/kvak/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:53:23)

Desired behavior

Build success.

[johandrott]

I’ve also got the same error. I have temporarily solved the problem by downgrading tinymce to version 4.7.4. This issue might give some additional information: https://github.com/tinymce/tinymce/issues/4165

[PTC-JoshuaMatthews]

@ttrevorr Also just got some updates on the tinymce side and they are confident that the issue is with angular cli. See the latest comments. https://github.com/tinymce/tinymce/issues/4165

I looked into the angular-cli issue more and it appears to be an issue in their logic. The cause appears to be that they are using metaprogramming to parse the imported modules (not entirely sure why, but it looks to be for processing enums), however their logic seems to be incorrect because as @TheSpyder said it’s perfectly valid to have an iife inside another iife in JS (even though it is probably an edge case).

As such, I’d suggest logging an issue with the Angular team so that they can investigate/fix their processing logic.

To add a little bit more detail, when TypeScript compiles an enum it ends up as JS something like this:

export var Direction; (function (Direction) { Direction[Direction[“Up”] = 0] = “Up”; })(Direction || (Direction = {})); So what appears to be happening, is that the angular logic is incorrectly detecting the iife JS produced by TinyMCE to be an Enum and therefore saying it’s invalid because it’s not an enum.