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

ziacik commented 6 years ago

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.

byungjuJin commented 6 years ago

I've got same error with "ng build --prod --build-optimizer=false" can build

johandrott commented 6 years ago

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

chaseWillden commented 6 years ago

I'm getting the same issue:

ERROR in ./node_modules/tinymce/tinymce.js
Module build failed: Error: Invalid IIFE Structure
    at updateEnumIife (/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:307:15)
    at visitBlockStatements (/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:82:61)
    at visitor (/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:33:26)
    at visitNode (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:56836:23)
    at visitFunctionBody (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:56942:23)
    at Object.visitEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:57062:407)
    at visitor (/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:53:23)
    at visitNode (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:56836:23)
    at Object.visitEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:57052:44)
    at visitor (/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:53:23)
    at visitNode (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:56836:23)
    at Object.visitEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:57060:45)
    at visitor (/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:53:23)
    at visitNode (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:56836:23)
    at Object.visitEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:57106:49)
    at visitor (/node_modules/@angular-devkit/build-optimizer/src/transforms/wrap-enums.js:53:23)

Downgrading didn't work for me though....

ttrevorr commented 6 years ago

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

ttrevorr commented 6 years ago

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

jiangen1016 commented 5 years ago

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

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

Taht work for me.Thanks

edbzn commented 5 years ago

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

PTC-JoshuaMatthews commented 5 years ago

Has anyone made progress here? Seems the issue is on the tinymce side, but the ticket is marked closed https://github.com/tinymce/tinymce/issues/4165

PTC-JoshuaMatthews commented 5 years ago

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

aijazkhan81 commented 5 years ago

Did anyone get a solution here? It still seems to break on prod build. Even the 4.7.4 build

chislin commented 5 years ago

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

darxmac commented 5 years ago

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.

chislin commented 5 years ago

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');
}

Gidmark commented 5 years ago

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

mradcliffe commented 5 years ago

In order to use tinymce.min.js in scripts in angular.json, I needed to remove any import of 'tinymce' that I was using in any file and declare const tinymce: any;, which really makes me sad. I don't really see any other fix as I need to stay on Angular 7 until ng-bootstrap is ready and I need to stay on TinyMCE 4 until I have time to update a major version. Hope this helps any one else caught in a similar situation.

TheSpyder commented 5 years ago

TinyMCE 5.0.8 should resolve this issue.

puravupadhyay commented 5 years ago

I tried the Angular prod build with the latest tinymce 5.0.8 and still getting the Error: Invalid IIFE Structure

puravupadhyay commented 5 years ago

TinyMCE 5.0.8 should resolve this issue.

Has it worked for anyone?

TheSpyder commented 5 years ago

well... to be clear 5.0.8 removes the "double iife" issue that was logged against TinyMCE. I assumed it would fix the error if that was indeed the cause.

edbzn commented 5 years ago

:tada: Yeah it compiles well with TinyMCE 5.0.8.

puravupadhyay commented 5 years ago

Yeah it compiles well with TinyMCE 5.0.8.

Thanks for the reply would you mind sharing your working code please? What do you have to do to get it working? Here is my attempt: https://github.com/puravupadhyay/TinymceAngular I'm following the integration steps from here: https://www.tiny.cloud/docs/integrations/angular2/

puravupadhyay commented 5 years ago

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

alan-agius4 commented 4 years ago

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

angular-automatic-lock-bot[bot] commented 3 years ago

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

angular / angular-cli