Unexpected token import (Angular Universal, cli)

[SpeedoPasanen]

Is it possible to make mobx-angular play nicely with an Angular-CLI Universal app?

I guess it's got something to do with how mobx-angular is compiled, and there're ES6 imports left around.

Tried some workarounds mentioned elsewhere, but didn't help:

• Repack my apps main bundle again with webpack for server, targeting node. No good: Imports are gone but then "Zone already started" or something. Other meaningless errors if I don't require zone.js/dist/zone-node in my Express app.
• Require('import-export'): Some other weird error like "Unexpected string".

node_modules\mobx-angular\dist\directives\mobx-autorun.directive.js:10 import { Directive, ViewContainerRef, TemplateRef, Renderer } from '@angular/core'; ^^^^^^

SyntaxError: Unexpected token import at createScript (vm.js:74:10) at Object.runInThisContext (vm.js:116:10) at Module._compile (module.js:533:28) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Object.xKKB (C:\Duunit\dia-log\functions\dist-server\main.f67f166eccdf77f620c3.bundle.js:1:915114)

[adamkleingit]

Hi @funkizer , can you share the code that fails? I'd like to see the configuration there. Thanks

[SpeedoPasanen]

Seems it's a common problem with many libraries at the moment. I know Angularfire2 had the same issue, and they fixed it by moving the module structure around a bit in 4.0.0.rc-2, so that UMD packages get loaded in Node instead of individual modules. I don't know exactly how, not guru enough. :)

Basically it's caused just by import { MobxAngularModule } from 'mobx-angular'; in another module, angular-tree-component.

However this could all be angular-tree-component, as I later found out how to work around it and after fixing require statements of mobx-angular to get the UMD package, had to do the same to angular-tree-component, and I haven't used mobx-angular directly in this app, only through angular-tree-component.

Anyway, here's a work-around that solved all my problems altough it's not very elegant. In my server main.bundle.js, I replace require("mobx-angular/dist/mobx-angular") and require("mobx-angular/dist/directives/mobx-autorun.directive") with require("mobx-angular/dist/mobx-angular.umd.js") using an after build script:

https://gist.github.com/funkizer/febbd6f860ec1b955b9ded4802811e37

[adamkleingit]

Strange, because node should open the main entry in package.json which points to the umd bundle. For some reason it's using the jsnext / module which point to the compiled ES6 code. Well I'm glad you bypassed it but I'll try to examine it further

[IlyaLytvynov]

Faced same issue when using angular-cli and angular universal.

[adamkleingit]

Strange, I wonder why does angular universal require the UMD bundle? Can you share a repository so I can reproduce the error? Thanks

On Fri, Mar 16, 2018 at 7:02 PM, Ilya notifications@github.com wrote:

Faced same issue when using angular-cli and angular universal.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx-angular/issues/38#issuecomment-373779626, or mute the thread https://github.com/notifications/unsubscribe-auth/AA2SSpCXhKJUAf1AoWGbDfn4GaIEBRTvks5te_BAgaJpZM4PLOqD .

[ildarnm]

Faced same issue. Demo repo https://github.com/ildarnm/mobx-universal-starter. npm run build:ssr && npm run serve:ssr - Compiles your application and spins up a Node Express to serve your Universal application on http://localhost:4000. I fork this repository https://github.com/angular/universal-starter

[adamkleingit]

I tried:

import {MobxAngularModule} from 'mobx-angular/dist/mobx-angular.umd.js';

But then I got a different error:

ERROR in : Unexpected value 'MobxAngularModule in /Users/adamklein/projects/mobx-universal-starter/node_modules/mobx-angular/dist/mobx-angular.umd.js' imported by the module 'AppModule in /Users/adamklein/projects/mobx-universal-starter/src/app/app.module.ts'. Please add a @NgModule annotation.

[Avcajaraville]

Having the same issue when using *mobxAutorun directive in my templates. If not, everything is fine.

I have to run something like this in my components:

ngAfterViewInit() {
  reaction(() => ({
    whatever: some observable
  }) () => {
    this.ref.detectChanges();
  });
}

Basically, do a workaround to update my views, which is precisely what this module is supposed to do.

Maybe this could be fixed by #51 ? Seems packing issue...

Best regards !

[crhistianramirez]

Running into this as well :(

@SpeedoPasanen your gist is no longer accessible :(

[adamkleingit]

I have no experience with Universal. If anybody wants to make a PR to solve #51 I will be happy to merge - and maybe it will solve this. I made a tweet about it, hopefully someone will take a look: https://twitter.com/adamklein500/status/1165256957323862017

[Avcajaraville]

@adamkleingit thanks a lot for the effort. I will try to make a PR when I have time, as I'm very busy at the moment. I believe by packing the module as recommended by angular team, and as written in #51 this can be solved :)

[adamkleingit]

@Avcajaraville @SpeedoPasanen @kubk did anyone test the new version with Universal?

[Chuckv01]

Hi folks, going to close this issue due to inactivity. If this is still a problem please feel free to open up a new Issue. 😄