angular-cli: 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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 18
Comments: 24

Most upvoted comments

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

johandrott on Jun 1, 2018

@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.

PTC-JoshuaMatthews on Mar 19, 2019

make sure to uninstall the previous tinymce first and then install the 4.7.4 build. it worked for me.

ttrevorr on Jul 25, 2018

Any progress with this issue? Would be nice to be able to get the latest version and not having to do any special handling. Seems like TinyMCE has closed the issue on their end: https://github.com/tinymce/tinymce/issues/4165 https://github.com/tinymce/tinymce/issues/4483

Gidmark on May 20, 2019

Fixed ng build --prod succeeded! I had an unnecessary import in my AppComponent.

puravupadhyay on Jun 19, 2019

Still broken with tinymce 4.9.2 and @angular/cli 7.2.2 but works fine with tinymce 4.7.4

edbzn on Jan 25, 2019

TinyMCE 5.0.8 should resolve this issue.

TheSpyder on Jun 19, 2019

Try importing tinymce.min.js, worked for me. Had the same error with silver theme, and imported theme.min.js, it fixed error.

How did you do that ? i had to downgrade to 4.7.4 to make it build in production.

I used dynamic import

 public async initEditor(): Promise<void> {
        this.editorManager = (await import('tinymce/tinymce.min.js')).default;
        await import('tinymce/themes/silver/theme.min.js');
}

chislin on Apr 8, 2019

This really seems like an issue with TinyMCE and not angular cli. It looks like a breaking change was introduced after 4.7.4 build and it has yet to be fixed. https://github.com/tinymce/tinymce/issues/4165

ttrevorr on Jul 25, 2018